Can I set a default fontFamily in my app (iOS and Android)??
I don't want set it in each screen.
Any idea?
The only way to do this is from the native side of things. See here:
Set a default font for whole iOS app?
and
Is it possible to set a custom font for entire of application?
Although, if you use the library Cairn (disclaimer: I wrote it) it's trivial. Simply define your global text style and extend from it everywhere. Cairn makes all global stuff reusable while not breaking component-specific overrides and extensions.
// styles.js
import { createStylesheet } from 'react-native';
import cairn from 'cairn';
export default cairn({
text: {
fontFamily: '...'
}
}, (styles) => createStylesheet(styles));
Then extend those global styles in your component and apply to your text element:
// components/MyComponent.js
import styleContext from '../styles';
const style = styleContext.extend({
'text.header': {
fontSize: 30
}
});
export default const MyComponent = () => (
// Spreads style={[styleContext.text, style['text.header']]}
<Text {...style('text.header')}>Header!</Text>
);
Related
I would like to ask you about section selected on pictures below.
What is the name of this section and how I can style it in React Native? At now my APK have an ugly white bar and I can't see level of battery or WiFi.
The area with the battery and time is called the status bar. In most cases I've seen, the status bar is given a set height depending on the platform from ReactNative's Platform module.
Afterwards, you can pass this height to a <View> and add additional styling.
import { Platform, ... } from 'react-native'
...code...
const STATUS_BAR_HEIGHT = Platform.select({ ios: 20, android: 24 })
export default class MyComponent extends Component {
...code...
render() {
<View style={{ height: STATUS_BAR_HEIGHT, ...more styles here... }} />
<View>
...code...
</View>
}
}
My container class:
import React from 'react';
import {View} from 'react-native';
const Cont = (props) => {
return(
<View style={styles.cStyle}>
{props.children}
</View>
);
};
const styles = {
cStyle: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#fff',
borderBottomWidth: 0,
elevation: 10,
marginLeft: 5,
marginRight: 5,
marginTop: 10
}
};
export default Cont;
Now the class that uses this component:
import React from 'react';
import {Text} from 'react-native';
import Cont from './Cont';
const Det = (props) => {
return(
<Cont>
<Text>{props.alb.title}</Text>
</Cont>
);
};
export default Det;
I don't think I need to provide the index.js, since all I'm doing related to the subject in matter is calling a self closing tag of the object. I have no idea why my styles are not being applied. I checked everything I thought I could of have checked. Any ideas? Any support is appreciated.
PS: I was expecting <Text /> childs to inherit my styles
PS2: Also I'm not sure this is really 'inheritance'. Because actually the styles should affect every <View> from my class and then consequently the children that is INSIDE my <View> tags
I'd like to answer my own question regarding this issue because there might be other persons struggling now or in the future, and would not know quite what to do, hopefully this answer will help them.
There was no error in my code, at least not in the classes I posted above. And EVERY <Text> children should be inside a styled <View>, which was my intention at first. So I had made a typo when calling the class in the entry js file. But, somehow (yes this defies my current React Native knowledge which is already little) the app was still compiling but not styling ANYTHING. Only after I restarted not only the server in the terminal but also the simulator, is that I received the bug which I could finnally debug. (Unexpected char 'blabla' in Line X). After fixing it my styles were applied. But the craziest thing is: It was either compiling with an unexpected character (which seems impossible to me) or compiling a past version of my App. Now, this sounds absolutely crazy to me and I will be reporting it on React Native forums and Android Studio. Thanks for all the help.
EDIT: React Native forums topic on the issue: http://discuss.nativebase.io/t/android-simulator-compiling-wrong-code/1183
Regular styles behave differently in react-native compared to CSS in say, the web-browser. There's no concept of style inheritance by default in react-native, so styling that you apply to <Cont /> won't be inherited by the children of <Cont /> (ie your <Text> elements).
When styling with react, you'll typically need to apply styles directly to all components that you want to tweak the appearance of:
<Cont>
{ /* custom styling must be applied to all components that you
want to tweak */ }
<Text style={{ color : 'red' }}>{props.alb.title}</Text>
</Cont>
Something to also keep in mind is that different element types (<Text/> , <View />, etc) sometimes only support a limited subset of styling options. For example, see the styling documentation for <Text /> for an overview of the styling options that the <Text /> element type supports.
I want all screens on my app to appear below the status bar on both iOS and Android, so I'd either have to add a StatusBar component or a paddingTop to all my screens.
Is there a way to do this globally? Where is the appropriate top level component to add the StatusBar in a Redux app? (e.g. which part of https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample)?
Step 1: Import Platform and StatusBar
import { Platform, StatusBar} from 'react-native';
Step 2: Add this style in parent View
paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0
Full Code:
import React, { Component } from 'react';
import {
Text, View,
Platform, StatusBar
} from 'react-native';
export default class App extends Component {
render() {
return (
<View style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0 }}>
<Text>This is Text</Text>
</View>
);
}
}
You can create a <NavigationContainer/> component to hold all your different pages, so that you don't need to duplicate the StatusBar and padding code in every single screen component.
I created a example in here:　https://snack.expo.io/SyaCeMOwW
And nothing need to change in term of your navigation structure or redux flow.
I need to force app font inside the app and not to be overridden by system font. Namely font size and fontFamily. I also added the font I am using in assets and resources for android and iOS respectively.
rn: 0.42
Just add styles to Text component like:
<Text style={{ fontSize: 13, ... }>some text</Text>.
If you want to use the same styles everywhere in the app just create your own component:
import { Text } from 'react-native';
const MyCustomText = (props) => {
const { style, children, ...rest } = props;
return (
<Text style={[{fontSize: 13}, style]} {...rest}>{children}</Text>
)
}
export default MyCustomText;
I am trying to use a font "Verveine Corp Regular' inside my react-native app.
The font works in the iOS build, but not in the Android build.
The font is in .tff format and is placed in the root of my work (linked in the package.json and I have run react-native link) and inside "android/gradle/src/main/assets/fonts" but it's still not picking the font up. I have also cleaned and rebuilt the app multiple times.
When inspecting an element which uses the font in the android debugger, it says it's using the font. But the font is still the default font.
Could anyone offer some help or guidance on this issue?
Thanks!
The other answers helped me get this working for me, thank you. This manuever is probably only necessary when the font has capital letters in the filename. A more complete answer:
Add the font as normal in react native, for example:
{react-native-project}/fonts/GovtAgentBB.ttf
Run react-native link and this will put the font in
{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB.ttf
{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB_ital.ttf
But android, bring robotic and not human, doesn't like this. So rename the file with all lower case letters and an underscore before the variant, like:
{react-native-project}/android/app/src/main/assets/fonts/govtagentbb.ttf
{react-native-project}/android/app/src/main/assets/fonts/govtagentbb_ital.ttf
Then, you have to change the font name in the style depending on the platform. For iOS, use the human name that is the name of the font that would be displaying in the title of the window of the Mac Font menu (or just the name you see on the web). For android, you have to, robotically, use the name of the file you just renamed.
{Platform.OS === 'ios' ? (
<Text style={styles.welcome}>
Hello World!
</Text>
) : (
<Text style={styles.welcomeAndroid}>
Hello World
</Text>
)}
const styles = StyleSheet.create({
...
welcome: {
fontFamily: 'Government Agent BB',
},
welcomeAndroid: {
fontFamily: 'govtagentbb',
},
This is how I used custom font in my project
//sampleStyle.js
import overrideStyles from '/sampleoverridestyles';
iconTextStyle: {
color: '#FFFFFF',
fontSize: 16
}
//sampleoverridestyles.ios.js
export default {
iconTextStyle: {
fontFamily: 'FaktSoftPro-Medium'
}
}
//sampleoverridestyles.android.js
export default {
iconTextStyle: {
fontFamily: 'faktsoftpro_medium'
}
}
since I cannot set the font name same for iOS and android I have overridden it as above and it worked.
Guys if you are following all other solution and still no update then try following the steps
add react-native-config.js file
then add fonts in assets/fonts/your font
rename it with lowercase like OpenSans_Regular to opensans_regular
react-native link in terminal in your project folder
after all build your project again using react-native run-android
fontFamily: Platform.OS === "ios" ? 'opensans_regular' : 'cassandrapersonaluseregular_3bjg',
I was also getting the same issue the font was not reflecting changes then I build my project again that was my mistake because we adding fonts in our android folder so we need to compile that again.
I hope someone may save their time
I added font in react-native android from here:
https://medium.com/#gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7#.40vw3ooar
Follow all the steps it will work fine.
After adding run react-native run-android
First, make sure you are up to version 0.16+ with react-native.
Your fonts should be *.ttf or *.otf files and must be located in: /projectname/android/app/src/main/assets/fonts
Make sure the fonts are lowercase only and follow this pattern: fontname.ttf, fontname_bold.ttf, fontname_light.ttf, fontname_bold_italic.ttf
Have you defined another font in your AppTheme (styles.xml), that overrides your preferred font?
Have you tested your font with a "Hello World"-App as a minimal test?
Have you implemented your ttf as shown here for example?: How to use custom font in Android Studio