How to show footer in full screen - react-native

Question

I have a footer that contains several buttons that I want to show in full screen. I'm using below code:
**//App.js**
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={{flex: 1, backgroundColor: '#6ED4C8'}}>
<AppNavigator />
<View style={{flexDirection: 'row'}}>
<Footer />
</View>
</View>
);
}
}
**//AppNavigator.js**
const AppNavigator = createStackNavigator(
{
Home: {screen: Home},
Friends: {screen: Friends},
Login: {screen: Login},
PostDatiles: {screen: PostDatiles},
Aboutus: {screen: Aboutus},
Footer: {screen: Footer},
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
},
// ,initialRouteName: ''
},
);
export default AppNavigator;
**//Footer.js**
export default class Footer extends React.Component {
constructor(props) {
super(props);
}
render() {
const {navigation} = this.props;
return (
<View style={styles.container}>
<View>
<Button
title="About us"
color="#39F80F"
accessibilityLabel="Tap on Me"
onPress={() => navigation.navigate('Login')}
/>
</View>
<View>
<Button
title="Login"
color="#F8380F"
accessibilityLabel="Tap on Me"
/>
</View>
<View>
<Button
title="Search"
color="#B80FF8"
accessibilityLabel="Tap on Me"
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
});
When I click on one of the buttons, I get this error:
enter image description here
In the app.js file I use a footer tag because I want show it on all of the screen.
I searched a lot but couldn't find any similar problem!

Answer 1

To do what you want to do, you must use the createBottomTabNavigator instead of the StackNavigator.
Example
import React from 'react';
import { Text, View } from 'react-native';
import { Ionicons } from '#expo/vector-icons'; // 6.2.2
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
class IconWithBadge extends React.Component {
render() {
const { name, badgeCount, color, size } = this.props;
return (
<View style={{ width: 24, height: 24, margin: 5 }}>
<Ionicons name={name} size={size} color={color} />
{badgeCount > 0 && (
<View
style={{
// /If you're using react-native < 0.57 overflow outside of the parent
// will not work on Android, see https://git.io/fhLJ8
position: 'absolute',
right: -6,
top: -3,
backgroundColor: 'red',
borderRadius: 6,
width: 12,
height: 12,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>
{badgeCount}
</Text>
</View>
)}
</View>
);
}
}
const HomeIconWithBadge = props => {
// You should pass down the badgeCount in some other ways like context, redux, mobx or event emitters.
return <IconWithBadge {...props} badgeCount={3} />;
};
const getTabBarIcon = (navigation, focused, tintColor) => {
const { routeName } = navigation.state;
let IconComponent = Ionicons;
let iconName;
if (routeName === 'Home') {
iconName = `ios-information-circle${focused ? '' : '-outline'}`;
// We want to add badges to home tab icon
IconComponent = HomeIconWithBadge;
} else if (routeName === 'Settings') {
iconName = `ios-options${focused ? '' : '-outline'}`;
}
// You can return any component that you like here!
return <IconComponent name={iconName} size={25} color={tintColor} />;
};
export default createAppContainer(
createBottomTabNavigator(
{
Home: { screen: HomeScreen },
Settings: { screen: SettingsScreen },
},
{
defaultNavigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused, tintColor }) =>
getTabBarIcon(navigation, focused, tintColor),
}),
tabBarOptions: {
activeTintColor: 'tomato',
inactiveTintColor: 'gray',
},
}
)
);