how to use navigation.js in App.js in react native

Question

I followed the instructions of https://reactnavigation.org/docs/en/tab-based-navigation.html to create a navigation in my app.

This is my code for Navigation.js file

import React from 'react';
import { Text, View } from 'react-native';
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>
    );
  }
}
const TabNavigator = createBottomTabNavigator({
  Home: { screen: HomeScreen },
  Settings: { screen: SettingsScreen },
});

const TabNav = createAppContainer(TabNavigator);
export default TabNav;

I wanna import this in my App.js file and use it as a navigation. this is my App.js file

import React from 'react';
import {Text,View,Button} from 'react-native';

import TabNav from './components/CustomerDashboard/Navigation';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <View>
                <TabNav></TabNav>
            </View>

        );
    }
}

but this is giving me an empty white screen. how can i fix this ?

Answer 1

You need to add a style to your View inside your App.js If you give it a flex of 1 it will expand to cover the available space.

You can also close your TabNav component in the following way:

<TabNav /> rather than using <TabNav></TabNav>

Here is how I would update your App.js

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }


    render() {
        return (
            <View style={{flex: 1}}>
                <TabNav />
            </View>

        );
    }
}