Styling react-native Navigation Drawer Items
14,855
You just need to add some props to DrawerItems component. like below.
<DrawerItems {...this.props} activeTintColor='#2196f3' activeBackgroundColor='rgba(0, 0, 0, .04)' inactiveTintColor='rgba(0, 0, 0, .87)' inactiveBackgroundColor='transparent' style={{backgroundColor: '#000000'}} labelStyle={{color: '#ffffff'}}/>
I have customised it with sample values. Update your code and apply whatever font color and background color you want.
Author by
maddy
Updated on July 29, 2022Comments
-
maddy over 1 year
How To styling react-native navigation drawer item's Text.I go through the Documentation but i didnt able to find correct way to do that
This is My AppContainer
import React, { Component } from 'react'; import { connect } from 'react-redux'; import { View, Text, Button, StyleSheet } from 'react-native'; import { bindActionCreators } from 'redux'; import { ActionCreators } from '../actions'; import Home_ from './Home'; import About from './About'; //Add navigation import { DrawerNavigator, DrawerItems} from 'react-navigation' const cunstomeDrawerContentComponent = (props) => ( <View style={{flex: 1, color: 'red', textAlign: 'center', fontSize: 30, fontFamily: 'cochin', letterSpacing: 4}} > <DrawerItems {...this.props} /> </View> ); const drawerLayout = DrawerNavigator({ Home: { screen: Home_ }, About: { screen: About }, }); function mapDispatchToProps(dispatch) { return bindActionCreators(ActionCreators, dispatch); } const styles = StyleSheet.create({ container: { flex: 1, color: 'red', textAlign: 'center', fontSize: 30, fontFamily: 'cochin', letterSpacing: 4 } }); export default connect((state) => { return {} }, mapDispatchToProps)(drawerLayout);