CreateBottomTabNavigator in react native have a small clickable zone

Asked
Active3 hr before
Viewed126 times

7 Answers

nativereact
90%

My code for bottom bar :,So when i am in the third section in bottom navigator for example, like in this image, to return to home I need to click to the top left of icon home in a small area.,Please can you help me to solve my problem to make all the area zone of home icon clickable , and to understand why i face this problem .

Pretag
 Pretag team - issue, fix, solve, resolve
88%

In this example we have two screen Home screen and About screen. Home screen have a button on which click you will navigate to about screen.,So far, we have learn how navigation works in react native. Now our sample app is able to navigate from one screen to another.,As we know a website or a mobile application consist of many screens and pages. To move form one screen to another or to show other screen on button click is navigation.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

Pretag
 Pretag team - issue, fix, solve, resolve
65%

1 React Native Bottom Navigation, Bottom Navigation - React Navigation,For React Native Bottom Navigation we need to add react-navigation and other supporting dependencies.

There is nothing like double tap, instead you can use focus listener

const unsubscribe = navigation.addListener('focus', () => {
   // Do whatever you want, called when screen is in focus
});
75%

If you have a question, feature request, or an idea for improving the library or its related tools, please try one of the following resources:,Write a RFC if you have ideas for how to implement a feature request,Post a feature request to Canny

import {
  SafeAreaView,
  TouchableOpacity
} from 'react-native'

import { createBottomTabNavigator } from 'react-navigation-tabs'

import { defaultFooterStyle } from '../assets/styles/nav'

import FeedStack from '../screens/feed/navigation/FeedStack'
import InboxStack from '../screens/inbox/navigation/InboxStack'

import UploadIcon from '../screens/upload/components/UploadIcon'
import InboxIcon from '../screens/inbox/components/InboxIcon'

import { Feed, FeedActive } from '../shared/components/icons'
import Colors from '../assets/styles/Colors'

const FooterTabNavigator = (props) => {
  let currentRouteName = props.navigation.state.routes[props.navigation.state.index].key
  return (
    <SafeAreaView style={defaultFooterStyle}>
      <TouchableOpacity
        activeOpacity={0.6}
        hitSlop={{
          top: 20,
          bottom: 50,
          left: 50,
          right: 50
        }}
        onPress={() => props.navigation.navigate('Feed')}>
        {currentRouteName === 'Feed'
          ? <FeedActive fill={Colors.white} />
          : <Feed fill={Colors.white} />}
      </TouchableOpacity>
      <UploadIcon navigation={props.navigation} />
      <TouchableOpacity
        activeOpacity={0.6}
        hitSlop={{
          top: 20,
          bottom: 50,
          left: 50,
          right: 50
        }}
        onPress={() => props.navigation.navigate('Message')}>
        <InboxIcon focused={currentRouteName === 'Message'} />
      </TouchableOpacity>
    </SafeAreaView>
  )
}

const FooterNavigator = createBottomTabNavigator(
  {
    Feed: { screen: FeedStack },
    Message: { screen: InboxStack }
  },
  {
    tabBarComponent: props => <FooterTabNavigator {...props} />
  }
)

export default FooterNavigator
load more v
40%

Thanks a lot for putting time and effort into writing this. This article was very helpful, but I have a small issue.,This was very helpful. Thank you!,In drawer navigation, when I go forth and back in my screens, the screen freezes. In the beginning, I search all of my code but didn't find anything, finally, I came across one example in Reac Navigation Documentation, and I ran it in my Expo and saw similar behaviour.

npm install - g expo - cli
load more v
22%

For React Tab Navigation: This can be used in React Native as well,React-Native Component,Props in Tab Navigation:

Syntax:

const Tab = createBottomTabNavigator();
<Tab.Navigator>
   <Tab.Screen />
</Tab.Navigator>

Step 1: Open your terminal and install expo-cli by the following command.

npm install - g expo - cli

Step 2: Now create a project by the following command.

expo init myapp

Step 3: Now go into your project folder i.e. myapp

cd myapp

Step 4: Now install react-navigation into your project. React Navigation is used to navigate between one page to another. Install it by using the following command.

npm install @react - navigation / native

Step 6: Now install bottom-tabs from react-navigation.

npm install @react - navigation / bottom - tabs

For React Tab Navigation: This can be used in React Native as well

https: //reactnavigation.org/docs/tab-based-navigation/

Start the server by using the following command.

npm run android
load more v

Other "native-react" queries related to "CreateBottomTabNavigator in react native have a small clickable zone"