I am new to react-native and learning it. While learning react-native-tab-view, I tried to change it's color but after several tries I was unable to do it. I shall be really grateful if someone guide me how to change to color of the tab-bar which is blue by-default. Here is the link to npm react-native-tab-view and here is the piece of code. Any help would be highly appreciated.
import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
const SecondRoute = () => (
<View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
const initialLayout = { width: Dimensions.get('window').width };
export default function TabViewExample() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
const styles = StyleSheet.create({
scene: {
flex: 1,
},
});
Changing the background color of the tab-bar
If you refer to this section, the styling props for the tab-bar will have to be passed after declaring a custom React component using the renderTabBar
prop.
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
renderTabBar={props => <TabBar {...props} style={{backgroundColor: 'black'}}/>} // <-- add this line
/>
Changing the text color of the tab-bar
If you refer to this,
<TabBar
renderLabel={({route, color}) => (
<Text style={{ color: 'black', margin: 8 }}>
{route.title}
</Text>
)}
style={{backgroundColor: 'white'}}
...
/>
Feel free to experiment further using the example snack. :)