Trying to make tab Icons clickable away from TabBar on Android

Question

I am trying to make my tab icons to render their screens when clicked upon and when they are not within the TabBar. It is working with IOS but not with Android. It seems that the tab selection range can only be reached within the TabBar and not outside, above that it is not attached to its icons. Is there any way to make it work outside the TabBar when clicking on its icon? Thanks

Another way I tried is by making the TabBar height at a 100% of the screen and making its backgroundColor Transparent to see the screen behind but it shows a white screen instead and hides the content behind it.

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native'
import {
  createBottomTabNavigator,
  createAppContainer
} from 'react-navigation'
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp
} from 'react-native-responsive-screen'
class DocSelection extends React.Component {
  render() {
    return ( <
      View style = {
        styles.container
      } >

      <
      Text > CustomerService < /Text>

      <
      /View>



    )
  }
}
class Printing extends React.Component {
  render() {
    return ( <
      View style = {
        styles.container
      } >

      <
      Text > hfhdfjedhfeehfjeh < /Text>

      <
      /View>

    )
  }
}
class Design extends React.Component {
  render() {
    return ( <
      View style = {
        styles.container
      } >

      <
      Text > 874877847484787 < /Text>

      <
      /View>
    )
  }
}
const RouteConfigs = {
    'Home': {
      screen: DocSelection,
      navigationOptions: { //tabBarButtonComponent: tabBarIcon: ({ tintColor, horizontal }) => (
        <
        Image style = {
          {
            margin: 15,
            width: 35,
            height: 35,
            tintColor: "red"
          }
        }
        source = {
          require("../Icons/home.png")
        }
        /> ), }, }, 'Order history':{ screen: Printing, navigationOptions: { backgroundColor: '#262A2C', top:-60, borderTopWidth: 0, tabBarIcon: ({ tintColor }) => ( <
        Image style = {
          {
            width: 32,
            height: 32,
            tintColor: "red"
          }
        }
        source = {
          require("../Icons/history-clock-button.png")
        }
        /> ), }, }, 'Customer service':{ screen: Design, navigationOptions: { tabBarIcon: ({ tintColor }) => ( <
        Image style = {
          {
            top: 0,
            margin: 15,
            width: 40,
            height: 40,
            tintColor: "red"
          }
        }
        source = {
          require("../Icons/customer-service.png")
        }
        /> ), }, }, }; const DrawerNavigatorConfig = { intialRouteName: 'Home', navigationOptions: { tabBarVisible: true }, tabBarOptions: { tabStyle:{ top:-130, height:0 }, showLabel: false, style:{ backgroundColor:"rgba(255, 0, 0, 0)" }, }, }; const Navigator = createBottomTabNavigator(RouteConfigs, DrawerNavigatorConfig);
        export default createAppContainer(Navigator);
        const styles = StyleSheet.create({
          container: {
            flex: 1,
            justifyContent: 'center',
            backgroundColor: '#ecf0f1',
            top: 300
          }
        });

Trying to make tab Icons clickable away from TabBar on Android

Answers (1)

Related Questions