CODEWITHSUNDEEP
javascriptcssreact-nativeflexbox
bsky
bsky

Reputation: 20222

Prevent outer component to add white space at top

In React Native, I have this component:

class List extends Component {
  render() {
    return (
      <Provider store={store}>
        <View style={ styles.container } >
          <ListContainer />
        </View>
      </Provider>
    );
  }
}

The View component has this style:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignSelf: 'center',
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: '#000000',
  }
});

This used to occupy the whole screen. However, I added a StackNavigator component:

const MyApp = StackNavigator({
  List: { screen: List },
  OtherComponent: { screen: OtherComponent }
});

Now my component doesn't occupy the whole screen any more. There is a weird white space at the top. I believe that now my View component is nested within other components and somehow that makes it not occupy the full screen.

So how can I make my View occupy the whole screen again?

Upvotes: 1

Views: 234

Answers (1)

bsky
bsky

Reputation: 20222

It was an issue with StackNavigator. I had to change the code from this:

List: { screen: List },

to this:

List: { screen: List, navigationOptions: { header: null } },

Upvotes: 1

Related Questions