Hello I am making a react native app with expo. Following is my app.js file:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createBottomTabNavigator} from 'react-navigation';
import WeleScreen from "./screens/WeleScreen";
import AuthScreen from "./screens/AuthScreen";

export default class App extends React.Component {
  render() {
    const MainNavigator = createBottomTabNavigator({
       Wele: WeleScreen,
       Auth: AuthScreen
    });

    return (
      <View style={styles.container}>
        <MainNavigator/>
      </View>
    );
  }
}

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

and following is my package.json file:

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "expo": "^28.0.0",
    "react": "16.3.1",
    "react-native": ".0.0.tar.gz",
    "react-navigation": "^2.6.2"
  }
}

The app is running without any errors but it does not display the bottom navigation tab! I have checked the syntax from the official documentation as well and i fear it may be due to version of react-navigation. Any help would be appreciated.

Following is my welescreen ponent file:

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

class WeleScreen extends Component{
    render(){
        return(
            <View>
                <Text>
                    Hello this is working!
                </Text>
            </View>
        );
    }
}

export default WeleScreen;

auth ponent is also same except the change of name.

Hello I am making a react native app with expo. Following is my app.js file:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {createBottomTabNavigator} from 'react-navigation';
import WeleScreen from "./screens/WeleScreen";
import AuthScreen from "./screens/AuthScreen";

export default class App extends React.Component {
  render() {
    const MainNavigator = createBottomTabNavigator({
       Wele: WeleScreen,
       Auth: AuthScreen
    });

    return (
      <View style={styles.container}>
        <MainNavigator/>
      </View>
    );
  }
}

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

and following is my package.json file:

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "expo": "^28.0.0",
    "react": "16.3.1",
    "react-native": "https://github./expo/react-native/archive/sdk-28.0.0.tar.gz",
    "react-navigation": "^2.6.2"
  }
}

The app is running without any errors but it does not display the bottom navigation tab! I have checked the syntax from the official documentation as well and i fear it may be due to version of react-navigation. Any help would be appreciated.

Following is my welescreen ponent file:

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

class WeleScreen extends Component{
    render(){
        return(
            <View>
                <Text>
                    Hello this is working!
                </Text>
            </View>
        );
    }
}

export default WeleScreen;

auth ponent is also same except the change of name.

• javascript
• reactjs
• react-native
• react-navigation
• expo

• It is not displaying the ponents either... All i am getting is a blank page – Shubham Gupta Commented Jul 16, 2018 at 10:47
• Try to create your MainNavigator outside of the render method instead. – Tholle Commented Jul 16, 2018 at 10:56
• Does not work. same result – Shubham Gupta Commented Jul 16, 2018 at 11:01
• Try to put tab navigator without <View/> tag. – Johncy Commented Jan 8, 2019 at 6:31

4 Answers 4

Version is not the issue. The issue is with the custom StyleSheet and <View/> Component

You can View the edited app here

In case u want to try in uer app package.json is:

{
  "dependencies": {
    "@expo/vector-icons": "6.2.1",
    "react-native-elements": "0.18.5",
    "react-navigation": "^2.6.2"
  }
}

and App.js is:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation'; // Version can be specified in package.json

class AuthScreen extends React.Component{
    render(){
        return(
            <View>
                <Text>
                    AuthScreen Works!
                </Text>
            </View>
        );
    }
}

class WeleScreen extends React.Component{
    render(){
        return(
            <View>
                <Text>
                    Hello this is working!
                </Text>
            </View>
        );
    }
}

export default class App extends React.Component {
    render() {
        const MainNavigator = createBottomTabNavigator({
            Auth: { screen: AuthScreen },
            Wele: { screen: WeleScreen },
        });

        // return (
        //     <View style={styles.container}>
        //       <MainNavigator/>
        //     </View>
        // );

        return <MainNavigator/>
    }
}

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

Try to have a stack navigator as your first screen and then try to load Wele screen and Other screen as Bottom Tab Navigator, I have used this structure in many of my apps try this https://github./davekedar/React-Navigation-V2-Authflow

I solved this problem by upgrading to

"react-navigation": "^2.13.0"

Encountered this today with "react-navigation": "^4.3.9".

Fixed by setting <View style={{ flex: 1 }}> instead of just <View>. This problem does not occur if you wrap the navigator in something other than <View> (i.e. <Fragment>).

https://github./react-navigation/react-navigation/issues/8449

https://reactnavigation/docs/troubleshooting/#nothing-is-visible-on-the-screen-after-adding-a-view