Search code examples
react-nativereact-native-router-flux

react-native-router-flux navigation bar overlaps content area

With the below code navigation bar overlaps content area. i.e the text 'Test Data' not appears.

<Scene key="root">
    <Scene key="ContentArea" component={ContentArea} title="Content" initial/>
</Scene>

class ContentArea extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text>Test Data</Text>
      </View>
    );
  }
}

After adding paddingTop, the text 'Test Data' appears.

<View style={{flex: 1, paddingTop: 50}}>

Is there any other possibility, not to overlap the content area with navigation bar without using style attribute 'paddingTop' (main intension is to avoid hardcoded value by giving paddingTop space as 50).

Solution

  • No I think, you should hard code the changes. Here is the link of this issue discussion

    https://github.com/aksonov/react-native-router-flux/issues/103