This is my react-native.config.js file:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ['./assets/fonts/'], // stays the same
};
I added some fonts to my assets/fonts folder and ran react-native link. after this I tested my application on IOs emulator and fonts have worked fine but on android it is not working.
Here is the whole component:
import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
const styles = StyleSheet.create({
textContainer: {
marginTop: '30%',
alignSelf: 'center',
},
text: {
fontFamily: 'BodoniSvtyTwoITCTTBook',
color: 'red',
fontSize: 25,
},
});
const App = () => {
return (
<SafeAreaView style={styles.textContainer}>
<Text style={styles.text}>
Welcome to Font-Play in react-native for android
</Text>
</SafeAreaView>
);
};
export default App;
Location of the assets in android folder:
Any suggestions please?
add fonts in android/app/src/main/assets/fonts in the case of android and re-run the app.
Related
I am very new to mobile development. I am trying to use a downloaded font in my react native package. I searched online. The answers are similar, which ask me to create a font folder and put it under src/main/assets/font, but there is no android folder in my package since it is only a dependency package of the main project. I can only run it from the main project. I tried to add font folder under assets folder in main project, but it's not working. I am wondering if I miss any steps? Or is there any way that I can add the font in my own package, but not under android folder? And due to company security, I cannot use npx or npm to link.
Yes, You will have to make a folder with the name of fonts in assets folder like I did
Now, download the fonts
import * as Font from "expo-font";
import AppLoading from "expo-app-loading";
const fetchFont = () => {
return Font.loadAsync({
"open-sans": require("./App/assets/Fonts/open-sans.regular.ttf"),
"open-sans-bold": require("./App/assets/Fonts/open-sans.bold.ttf"),
});
};
export default function App() {
const [fontLoaded, setFontLoaded] = useState(false);
if (!fontLoaded) {
return (
<AppLoading
startAsync={fetchFont}
onFinish={() => setFontLoaded(true)}
onError={(err) => console.log(err)}
/>
);
}
return (
<Provider store={store}>
<MealsNavigator />
</Provider>
);
}
Use like below code
title: {
fontFamily: "open-sans-bold",
fontSize: 20,
color: "white",
textAlign: "center",
alignItems: "center",
},
});
I'm developing an app with react native and testing it with my android emulator.The SafeAreaView component in React Native is currently applicable only to ios devices with ios version 11 or later.
Did someone know about anything to solve this issue?
Use SafeAreaView for IOS and use a padding for Android
import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
export default function App() {
return (
<SafeAreaView style={styles.container}>
//Rest of your app
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#A6A9BC',
paddingTop: Platform.OS === 'android' ? 25 : 0
},
});
I'm using the example found here & currently facing issue with the toast not showing at all... I just have the initial 'Welcome to React Native!' screen in the emulator. My app structure is as follows:
testApp
android
app
src
main
java
com
testApp
CustomToastPackage.java
MainActivity.java
MainApplication.java
ToastModule.java
res
assets
index.android.bundle
AndroidManifest.xml
ios
node_modules
app.json
App.js
index.js
package.json
ToastExample.js
yarn.lock
My index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {NativeModules} from 'react-native'; //Added this
module.exports = NativeModules.testApp; //Added this
AppRegistry.registerComponent(appName, () => App);
My App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ToastExample from './ToastExample'; //Added this
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
As you can see from the file structure I created an additional file named ToastExample.js that contains following based upon the answer found here
import {NativeModules} from 'react-native';
module.exports = NativeModules.ToastExample;
Package name is simply
com.testapp
I can't figure out why the toast never shows? I know react comes with toast support but looking to build upon an initial example to include more advanced Java/Android code...
In your example you didn't add ToastExample in index.js you need to add this into rendering method in index.js like below.
return(
<ToastExample/>
)
In addition to that, you are going to create an android native module which can be used only for android.
But According to my point of view, you can use toast messages module which can be used in both Android and Ios. Otherwise, you need to create ios base native module for creating toast for ios. If u don't want to ios base implementation, it's ok to use this native module. But you block your Ios deployment by it.
I would like to suggest this https://github.com/crazycodeboy/react-native-easy-toast#readme
easy-toast for u. It will work on both Android and IOS devices. You can customize it like android native toast as well. It is easy to implement in your application.
Thanks #Ariel & #Lucefer for feedback, I made the update you suggested but ran into another error. Posting this answer to save anyone potential headache caused by using Android Studio as IDE with React Native. Turns out the MainApplication.java file had 2 items (import of CustomToastPackage & ReactPackage) greyed out & could never figure out why? See the screenshot below
I created a separate application (react-native init newapp) & used a simple text editor (Atom or gedit will do instead of Android Studio) to make the changes & the example runs just fine now.
try this:
<Root>
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
</Root>
just import Root to react native
I'm able to add normal fonts, but not FontAwesome, i'm using v4.7.0 of FontAwesome.
I've checked older answers on SO, but I only found this one to be relevant, but I think the answer is outdated, because you cant link fonts with the first letter of the file name being lowercase, it has to be uppercase, like 'Font Awesome.ttf' for example(which is what I have right now). This naming strategy worked for adding another regular font called 'Titillium Web'.
My index.js
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.fontawesome}></Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
fontawesome:{
fontFamily: 'Font Awesome',
color: '#000',
fontSize: 20
},
});
AppRegistry.registerComponent('myappname', () => App);
In my package.json
"rnpm": {
"assets": [
"./src/assets/fonts/TitilliumWeb",
"./src/assets/fonts/FontAwesome"
]
},
Executed react-native link in project dir, the fonts were copied correctly.
Executed react-native run-android in project dir.
My Environment
Device: real device, android kitkat v4.4.2
react-native: v0.55.2
react: v16.3.1
yarn: v1.5.1
node: v9.5.0
I am developing Android app using React Native. I tried running a simple code of a screen being displayed, but I get the following error. I tried closing all command line windows and emulator and re-starting React Native package and run it, but doesn't work. The code is provided below:
index.android.js:
import React, { Component} from 'react';
import {Text, View, AppRegistry,Button} from 'react-native';
import {StackNavigator} from 'react-navigation';
import dhrumil from '.\dhrumil.js';
export default class MainApp extends Component{
render(){
return(
<dhrumil />
);
}
}
const SimpleApp = StackNavigator({
Home: {screen: dhrumil }
});
AppRegistry.registerComponent("MainApp",()=>SimpleApp);
dhrumil.js:
import React, { Component} from 'react';
import {Text, View, AppRegistry,Button,StyleSheet} from 'react-native';
const dhrumil = () =>{
return(
<View style={styles.container}>
<Text style={styles.texter}>Hello World!</Text>
<Button
onPress={() => navigate('dharmin')}
title="Chat with Lucy"
/>
</View>
);
}
const styles = StyleSheet.create({
container:{
justifyContent: 'center',
alignItems: 'center',
flex: 1
}
texter:
{
fontSize: 20,
textAlign: 'center'
}
});
dhrumil.navigationOptions = {
title:'dhrumil'
}
export default dhrumil
How do I solve this?
In index.android.js change the import dhrumil from '.\dhrumil.js'; to import dhrumil from './dhrumil';. You have to use / to specify the path and it is not necessary use dhrumil.js when we are importing the js file.
#Jeffrey Rajan 's suggestion was absolutely correct here.
This error occurs mostly due to :
Issue 1:
A wrong file name in import statement
Using the wrong case in file name
Using '\' instead of '/' in file name
Hope that using this list you can easily find errors causing this in your code.
Issue 2:
An issue with the material design.To resolve this install material design locally using :
react-native-material-design
Issue 3:
babel-preset-react-native making trouble code. To resolve this issue run:
yarn remove babel-preset-react-native
yarn add babel-preset-react-native#2.1.0
Try troubleshooting in this order.Mostly the Issue 1 will solve the problem.