Question 32971 in React native Question posted in
The official React Native documentation can be found here.

Adding a button to footer that shows a list with options – React native

I created a footer for my app which let’s the user browse to different pages. However, there are too many screens to display so I wanted to create one button on the right which let’s the user see a list with additional screens that can be opened. I found this to be quite common in other apps, see below an example where the ‘more’-button would give that functionality (i.e., open list of other screens that user can choose):

How it should look like

1

I googled but could not find example code with this functionality. I read about ‘Modals’ but was not sure if this works in a footer and/or is the most simple solution.

This is the items in my footer that I would like to edit to show a list with additional screens instead of just linking to one screen:

      <TouchableOpacity style={styles.innerBox} onPress={()=>navigation.navigate("TabsScreenD")}>
      <Entypo name="dots-three-horizontal" size={40} color="white" />
      <Text style={[Styles.text14L,{color:color.white, textAlign:"center"}]} >
            More
            </Text>
      </TouchableOpacity>

Since I am very new to react-native I am looking for a simple solution.

Many thanks!

EDIT:
Unfortunately, I am not able to implement the solution proposed below. It seems not to fit with the current structure of my app or I am not editing the right parts of the code.

Here are additional details of what my app currently looks like:

App.js:

const App = props => {
  return (
    <Provider store={store}>
      <AppNavigator />
    </Provider>
  );
};

AppNavigator.js:

export const AppNavigator = props => {
  
  return (
    <NavigationContainer>
     <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}
        initialRouteName={"SplashScreen"}
        >
       <Stack.Screen name="SplashScreen" component={SplashScreen} />
       <Stack.Screen name="LoginScreen" component={LoginScreen} />
       <Stack.Screen name="HomeScreen" component={HomeScreen} />
       </Stack.Navigator>
    </NavigationContainer>
  );
};

FooterTabs.js:

const FooterTabs = ({navigation}) => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.innerBox} onPress={()=>navigation.navigate("HomeScreen")}>
            <AntDesign name="home" size={40} color="white" />
            <Text style={[Styles.text14L,{color:color.white, textAlign:"center"}]}>
            Home
            </Text>
      </TouchableOpacity>
               
      <View style={styles.line} />
      <TouchableOpacity style={styles.innerBox} onPress={()=>navigation.navigate("TabsScreenD")}>
      <Entypo name="dots-three-horizontal" size={40} color="white" />
      <Text style={[Styles.text14L,{color:color.white, textAlign:"center"}]} >
            More
            </Text>
      </TouchableOpacity>
    </View>
  )
}

Sorry, this is kinda lengthy. I tried to shorten where possible. Can anyone give me advice on what I need to edit. Based on Nazir’s answer below I tried to replace ‘FooterTabs’ with a TabNavigator, but could not integrate it properly.

Thanks again!

Tags:

2

Answers


  1. 0

    you should use Tab Navigation for your footer and Stack Navigation for your screens.

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

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();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Entries" component={HomeScreen} />
<Tab.Screen name="State" component={HomeScreen} />
<Tab.Screen name="Plus" component={HomeScreen} />
        <Tab.Screen name="Calender" component={SettingsScreen} />
<Tab.Screen name="More" component={StackNavigator} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

    and in StackNavigator.js file you have to create Stack Navigator which will have multiple screens as you want.

       import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function StackNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Notifications" component={Notifications} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}
export default StackNavigator;

    if you want to hide Tabs when inner screen of more tab is visible you will have to change the structure of navigation.

    <Stack.Navigator {...props}>
<Stack.Screen component={()=>
 <Tab.Navigator>
<Tab.screen />
<Tab.screen />
<Tab.screen />
<Tab.screen />
</Tab.Navigator>
}/>

<Stack.Screen name='ScreenName1' component={Component1}/>
<Stack.Screen name='ScreenName2' component={Component2}/>
<Stack.Screen name='ScreenName3' component={Component3}/>
.....
....
...
</Stack.Navigator>
    Login or Signup to reply.
  2. 0

    To demo this, I have added the code below, also the tutorial I personally follow which helped me clear many crucial concepts like this is also mentioned below.
    I have just displayed a full-screen view in the demo, but you can customize it accordingly since you want a list of screens to go into.
    When the + tab is pressed, I am presenting a view with a red background color.

    Free course (Step by step guide on how to show a modal on tab press) – Here

    Code – Here

    Recording – Here

    Kindly have a look and comment if you have further questions.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search