CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
lswank
lswank

Reputation: 2471

Gradient Background for TabBar?

I'm trying to make the background of the TabNavigator be a gradient. The documentation at https://facebook.github.io/react-native/docs/colors.html indicates that color properties usually match how CSS works on the web. I went to https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient and read that Because s belong to the data type, they can only be used where s can be used. For this reason, linear-gradient() won't work on background-color and other properties that use the data type.

Consequently, the following won't work:

import { TabNavigator, TabBarBottom } from 'react-navigation';

export default TabNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
  . . .
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ....
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    animationEnabled: false,
    swipeEnabled: false,
    tabBarOptions: {
      activeTintColor: 'rgb(111, 111, 111)',
      labelStyle: {
        fontSize: 12,
      },
      style: {
        backgroundColor: 'linear-gradient(45deg, blue, red)',
      },
    }
  }
);

Which is clear from the documentation. What isn't clear is what will work.

Update:

Clearly the regularly accepted practice is to create your own tab bar. Or, in my case, to tell the designer that he was out of luck.

Upvotes: 1

Views: 4104

Answers (2)

Saurav Chhetri
Saurav Chhetri

Reputation: 21

you can use this

<Tab.Navigator 
  screenOptions={{
    headerShown: false,
    tabBarActiveTintColor: '#fff',
    tabBarStyle:{position:'absolute', height:55} ,
    tabBarBackground:() =>(
      <LinearGradient  colors={['#AD3231',  '#2757C3']} style={{height:70,borderTopLeftRadius:15,borderTopRightRadius:15}}/>
    )
  }}>
</Tab.Navigator>

Upvotes: 2

Kraylog
Kraylog

Reputation: 7553

You could replace the tabBarComponent with your own component, and there use react-native-linear-gradient.

Upvotes: 2

Related Questions