CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
react1
react1

Reputation: 25

Show BottomNavigation once the user is logged

I want to use BottomNavigation to navigation between screens actually its working fine with BottomNavigation.SceneMap({...})

but the BottomNavigation its being showing in every screens, i only want to show once the user is logged. after click on login button

import React from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import userReducer from './src/reducers/user'
import { NavigationContainer } from '@react-navigation/native'
import { BottomNavigation, Text } from 'react-native-paper'
import { createStackNavigator } from '@react-navigation/stack'
import { theme } from './src/core/theme'
import {
  StartScreen,
  Dashboard,
  GroupScreen,
  InviteScreen,
  CreateGroup,
} from './src/screens'

const Stack = createStackNavigator()
const store = createStore(userReducer)
export default function App() {
  const [index, setIndex] = React.useState(0)
  const [routes] = React.useState([
    { key: 'music', title: 'Music', icon: 'queue-music' },
    { key: 'albums', title: 'Albums', icon: 'album' },
  ])

  const one = () => (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="StartScreen"
      >
        <Stack.Screen name="StartScreen" component={StartScreen} />
        <Stack.Screen name="Dashboard" component={Dashboard} /> 
      </Stack.Navigator>
    </NavigationContainer>
  )

  const two = () => (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="InviteScreen" component={InviteScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )

  const renderScene = BottomNavigation.SceneMap({
    music: one,
    albums: two,
  })

  return (
    <Provider store={store} theme={theme}>
      <BottomNavigation
        navigationState={{ index, routes }}
        onIndexChange={setIndex}
        renderScene={renderScene}
      />
    </Provider>
  )
}

EDIT by answers:

i did this when i pressed the button login i need to redirect to dashboard but dashboard is in mytabs

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Dashboard" component={Dashboard} />
      
    </Tab.Navigator>
  )
}

does not render nothing, i just to copy any example from here https://reactnavigation.org/docs/bottom-tab-navigator/ any of those render in my local, i am using EXPO

for example this

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

enter image description here

the wrong is display:none

enter image description here

Upvotes: 1

Views: 1124

Answers (3)

Hern&#226;ni Pereira
Hern&#226;ni Pereira

Reputation: 324

The best way is to do like this:

<NavigationContainer>
      {user !== null ? <RootNavigator /> : <AuthNavigator />}
</NavigationContainer>

The user is a useState. The NavigationContainer has 2 options. If the user is logged it shows the RootNAvigator with the bottomNavigation, if not it shows the authentication flow.

Upvotes: 0

Julian Castro
Julian Castro

Reputation: 115

Take what you already have with MyTabs() and create a LoginScreen and then do the following. You will need to detect whether the user is present. If there is a user, then show the main screen, if not show the login screen.

<>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        {user ? (
          <Stack.Screen name="Main" component={MainStack} />
        ) : (
          <Stack.Screen name="Login" component={LoginStack} />
        )}
      </Stack.Navigator>
    </>

Upvotes: 1

Behzad Fattahi
Behzad Fattahi

Reputation: 479

You need to put your BottomNavigation in another stack that has loginScreen side by side.

Try using createBottomTabNavigator

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

<NavigationContainer>
  <Stack.Navigator initialRouteName="loginScreen">
    <Stack.Screen name="loginScreen" component={LoginScreen} />
    <Stack.Screen name="main" component={MyTabs} />
  </Stack.Navigator>
</NavigationContainer>

Upvotes: 1

Related Questions