Wrong position of global footer when used with react-navigation

My question is rather basic. I want to have a StackNavigator in a React Native app on top of a global footer.
This is the code of my base App.js:

import React, { Component } from "react";
import { View, Text } from "react-native";
import { createStackNavigator } from "react-navigation";

class TestScreen extends Component {
render() {
return (
<View style={{}}>
<Text>
Hello, WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
...
WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
WorldHello, WorldHello, WorldHello, WorldHello, WorldHello,
WorldHello, WorldHello, WorldHello, WorldHello, World
</Text>
</View>
);
}
}

const Stack = createStackNavigator(
{
Test: { screen: TestScreen }
},
{}
);

class App extends Component {
render() {
return (
<View>
<View>
<Stack />
</View>
<View style={{backgroundColor: 'orange', height: 50}}/>
</View>
);
}
}

export default App;


As you can see, it's a simple view containing one content view (containing the stack navigator), and an orange footer view with a height of 50. My original app is more complicated, of course. The code is simplified to show the issue.
The problem is that the footer is displayed on top of the Stack component:

If I don't use the stack navigator, but TestScreen directly, everything works fine as expected:

render() {
return (
<View>
<View>
<TestScreen />
</View>
<View style={{backgroundColor: 'orange', height: 50}}/>
</View>
);
}


Could this be a bug in react-navigation or am I missing some flexbox magic here?

1 Answer
1

The Navigator should not be used as a Component, it is much more abstract than that. It helps the the components in your App to find each other, connects the dots. The StackNavigator is a navigator which puts each connected view on top of the last, so that you can go back by just pressing the back button for example.

If you have created a stack navigator 'Stack' with multiple Screens you can use it in your App class: return(<Stack />). You don't need anything else. Now the first Screen you put in your stack navigator will be shown first, and it can reach any other of the screens: onPress={() => this.props.navigation.navigate('Screen2')}.

return(<Stack />)

onPress={() => this.props.navigation.navigate('Screen2')}

So the Navigator is much more abstract than a View, and you should create a View seperatly that utilizes the navigator rather than using it directly as a Component. Example:

import React, { Component } from "react";
import {
View,
Text,
ScrollView,
TouchableWithoutFeedback
} from "react-native";
import Icon from 'react-native-vector-icons/Entypo'
import { createStackNavigator } from "react-navigation";

class Footer extends Component {
render() {
const { active } = this.props;
return (
<View
style={{
padding: 10,
paddingHorizontal: 40,
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 0,
height: '10%',
backgroundColor: 'white',
borderTopWidth: 1,
borderColor: 'rgba(0,0,0,0.15)',
flexDirection: 'row'
}}>

<TouchableWithoutFeedback onPress={() => this.props.link1()}>
<Icon name='list' size={20} color={ active === 1 ? 'black' : 'rgba(0,0,0,0.3)'} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.props.link2()}>
<Icon name='add-to-list' size={20} color={ active === 2 ? 'black' : 'rgba(0,0,0,0.3)'} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.props.link3()}>
<Icon name='add-to-list' size={20} color={ active === 3 ? 'black' : 'rgba(0,0,0,0.3)'} />
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => this.props.link4()}>
<Icon name='add-to-list' size={20} color={ active === 4 ? 'black' : 'rgba(0,0,0,0.3)'} />
</TouchableWithoutFeedback>
</View>
)
}
}
export class Screen1 extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={{ flex: 1 }}>
<ScrollView>
<Text>
Screen 1
</Text>
</ScrollView>
<Footer
active={1}
link1={() => navigate('Screen1')}
link2={() => navigate('Screen2')}
link3={() => navigate('Screen3')}
link4={() => navigate('Screen4')}
/>
</View>
);
}
}

export class Screen2 extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={{ flex: 1 }}>
<ScrollView>
<Text>
Screen 2
</Text>
</ScrollView>
<Footer
active={2}
link1={() => navigate('Screen1')}
link2={() => navigate('Screen2')}
link3={() => navigate('Screen3')}
link4={() => navigate('Screen4')}
/>
</View>
);
}
}

export class Screen3 extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={{ flex: 1 }}>
<ScrollView>
<Text>
Screen 3
</Text>
</ScrollView>
<Footer
active={3}
link1={() => navigate('Screen1')}
link2={() => navigate('Screen2')}
link3={() => navigate('Screen3')}
link4={() => navigate('Screen4')}
/>
</View>
);
}
}

export class Screen4 extends Component {
render() {
const { navigate } = this.props.navigation;
return (
<View style={{ flex: 1 }}>
<ScrollView>
<Text>
Screen 4
</Text>
</ScrollView>
<Footer
active={4}
link1={() => navigate('Screen1')}
link2={() => navigate('Screen2')}
link3={() => navigate('Screen3')}
link4={() => navigate('Screen4')}
/>
</View>
);
}
}

const Stack = createStackNavigator(
{
Screen1,
Screen2,
Screen3,
Screen4
}
);

export default class App extends Component {
render() {
return (
<Stack />
);
}
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.