CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
kirimi
kirimi

Reputation: 1400

react-navigation how to place tabBarNavigation on top of image background

I am trying to set tabBarNavigation on top of image background so that I can see the image background through the tabBar. If I set the position to absolute I can see my background image but text and tabBar is missing. This is my code:

export default class App extends Component {

  render(){
  return(
    <SafeAreaView style={{flex:1}}>
    <AppContainer/>
    </SafeAreaView>
  )
 }
} 

class HomeScreen extends Component {

  render(){
  return(
      <View>
      <ImageBackground
                style={{width:375, height:400}}
                source={require('./assets/pizza.jpg')}>
                </ImageBackground>
      </View>
  )
}
}

const AppTabNavigator = createMaterialTopTabNavigator({
  Home:{
  screen:HomeScreen,
  navigationOptions: {
      header: null,
      tabBarVisible:true,
      activeTintColor: '#e91e63',
    }
  },
  Second:{
  screen: Second,
  navigationOptions: {
      header: null,
      tabBarVisible:true,
      }
    },
    Third:{
    screen: Third,
    navigationOptions: {
        header: null,
        tabBarVisible:true,
        }
      },
    Fourth:{
    screen: Fourth,
    navigationOptions: {
        header: null,
        tabBarVisible:true,
        }
      }
    }, {
    tabBarOptions: {
    style: {
      backgroundColor: 'gray',
//If I set position to absolute, I can see background image but text is missing
      position:'absolute'
    }
  }
}
  )

const AppContainer = createAppContainer(AppTabNavigator)

enter image description here

Any comments or advice would be really appreciated! Thanks in advance :)

Upvotes: 1

Views: 1367

Answers (1)

Aung Myat Hein
Aung Myat Hein

Reputation: 4188

I hoped you want to implement like shown in image : enter image description here

If so, modify your tabBarOptions :

  tabBarOptions: {
   showLabel: true,
    style: {
        backgroundColor: 'rgba(22, 22, 22, 0)',
        position: 'absolute',
        bottom:  Dimensions.get('window').height-tabBarHeight,
        left:0,
        right:0
    },
    labelStyle:{
      fontSize:15,
      color:"black"
    }
  }

You can see also at https://snack.expo.io/HkoC8SA0Q.

Upvotes: 1

Related Questions