CODEWITHSUNDEEP
androidreact-native
N Sharma
N Sharma

Reputation: 34507

How to set custom font on ToolbarAndroid in react native

I am learning react-native programming where I need to set custom fontFamily on toolbar title. I have added TTF font in assets/fonts folder of my android directory.

 const styles = StyleSheet.create({
   toolbar: {
     backgroundColor: '#2E8B57',
     height: 40,
     fontFamily: 'roboto_thin'
   },
 });

 <ToolbarAndroid title='Login' titleColor='white'
            onIconClicked={() => this.props.navigator.pop()}
            style={styles.toolbar}/>

However ToolbarAndroid title font is not setting & getting a warning while running the application.

Warning: Failed prop type: Invalid props.style key fontFamily supplied to ToolbarAndroid...

Can anyone help me for How to set custom font family on ToolbarAndroid title. Thanks in advance.

Upvotes: 1

Views: 667

Answers (2)

Sajjad Ashraf
Sajjad Ashraf

Reputation: 3844

All you need to do is this

<ToolbarAndroid>
    <Text style={{ fontFamily: 'yourFont' }}>Title Text</Text>
</ToolbarAndroid>

Upvotes: 1

eden
eden

Reputation: 6103

AFAIK there is no documented way to set it (if you spare your time and play with the source codes you may find your way).

Apart from that complication, even though you're developing your application just for Android, you can still use react-native-router-flux, where you're able to render a custom toolbar, that may contain any React element - Icons, Images, Texts. It supports both platforms and offers a real easy navigation across app Scenes.

Upvotes: 0

Related Questions