BottomTabNavigator coming on top instead of bottom in React Native expo mobile app

Question

I am developing a mobile react native expo app. I am using BottomTabNavigator (NavigationContainer). As the name suggests it should appear at the bottom but it is incorrectly appearing on top.

I already have another image (logo.png) on the top of the screen and the navigationbar (or NavigationContainer) is also coming on top and overlapping above the image. Please help me resolve this issue. See my code below:

In the below code MyTabs is the Navigator created from createBottomTabNavigator() . This is incorrectly appearing on top of the screen.

import React from 'react';
import { Image,  StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import logo from './assets/logo.png';
import { NavigationContainer } from '@react-navigation/native';
import MyTabs from './navigator/AppNavigator';

export default function App() {
  return (
    <SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
        <View>
            <View style={styles.container}>
                <Image source={logo} style={{ width: 100, height: 100 }} />

                <Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>
                To share a photo from your phone with a friend or anyone, just press the button below!
                </Text>
            </View>

            <View >
                <NavigationContainer >
                        <MyTabs />        // This is incorrectly coming on top of screen.
                </NavigationContainer>
            </View>

        </View>
    </SafeAreaView>
  );
}

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

Answer 1

The NavigationContainer should be the outermost component in App . This then wraps the Tab.Navigator component (in your case MyTabs ), where you create tabs linked to each of your components. Inside your components, you are able to utilize SafeAreaView to then display the image at the top of the screen. Any type of Navigation scheme has to be made the top most component in the hierarchy in react native, wrapping the rest of your components. I've altered your code below:

import React from 'react';
import { Image,  StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

export default function App() {
  const Tab = createBottomTabNavigator()

  return (
    <NavigationContainer >
      <Tab.Navigator>  
        <Tab.Screen name="Home" component={myComponent} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const myComponent = () => {
  return (
    <SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight: 0 }} >
      <View>
        <View style={styles.container}>
          <Image source={require('@expo/snack-static/react-native-logo.png')} style={{ width: 100, height: 100 }} />
          <Text style={{color: '#888', fontSize: 18, alignItems: 'center'}}>To share a photo from your phone with a friend or anyone, just press the button below!</Text>
        </View>
      </View>
    </SafeAreaView>
  )
}

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