error adding a splash to my expo react native app

The recommended way to add a splash screen to an expo managed app can be found here.

I've managed to create an expo project and achieve the exact same behavior that you've looking for.

I've used react-navigation 4.x.x

This is how it looks and you can find the full code here

Here is the code I've used.

Splash.js

import React, { Component } from "react";
import { Text, SafeAreaView, View, StyleSheet } from "react-native";
import { StackActions, NavigationActions } from "react-navigation";

export class Splash extends Component {
  goToScreen(routeName) {
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: routeName })],
    });
    this.props.navigation.dispatch(resetAction);
  }

  componentDidMount() {
    setTimeout(
      () => {
        this.goToScreen("Root");
      },
      2000,
      this
    );
  }

  render() {
    return (
      <SafeAreaView style={styles.mainContainer}>
        <Text style={styles.text}> Splash Screen </Text>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#efef21",
  },
  text: {
    fontSize: 22,
  },
});

export default Splash;

Navigator.js

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Home from "./Home";
import Splash from "./Splash";
import TabNavigator from "./BottomTabNavigator";

const AppNavigator = createStackNavigator(
  {
    Splash: {
      screen: Splash,
      navigationOptions: {
        headerShown: false,
      },
    },
    Root: {
      screen: TabNavigator,
      navigationOptions: {
        headerShown: false,
      },
    },
  },
  {
    initialRouteName: "Splash",
  }
);

export default createAppContainer(AppNavigator);

BottomTabNavigator.js

import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import Home from "./Home";
import News from "./News";

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: "Home",
    },
  },
  News: {
    screen: News,
    navigationOptions: {
      title: "News",
    },
  },
});

export default createAppContainer(TabNavigator);

Also, I've achieved the same behavior using react-navigation 5.x.x

You can find my code here

Edit 01

If you want to have the headers, You need to use a Stack Navigator for each tab.

Here is the updated code of BottomTabNAvigator.js

import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createStackNavigator } from "react-navigation-stack";
import Home from "./Home";
import News from "./News";

const HomeStack = createStackNavigator({
  Home: Home,
});

const NewsStack = createStackNavigator({
  News: News,
});

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      headerTitle: "Home",
      title: "Home",
    },
  },
  News: {
    screen: NewsStack,
    navigationOptions: {
      title: "News",
    },
  },
});

export default createAppContainer(TabNavigator);

You have used Splash: {screen: Splash}, in your BottomTabNavigator so obviously it will add splash as on bottom navigator. Remove Splash: {screen: Splash}, from BottomTabNavigator and paste it on StackNavigator and set splash as initialRouteName

const StackNavigator = createStackNavigator({
    News: {
        screen: NewsListScreen
    },
    Splash: {screen: Splash},
    NewsItem: {
        screen: NewsItemScreen,
        navigationOptions: {
            headerTitle: 'News Item'
        }
    },
},
   {
       initialRouteName : 'Splash'
    });

you have to move splash screen to StackNavigator and add BottomTabNavigator into StackNavigator as a screen like this

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { MaterialIcons } from '@expo/vector-icons'; 

import Splash from '../screens/Splash';
import NewsListScreen from '../screens/NewsListScreen';
import NewsItemScreen from '../screens/NewsItemScreen';


const StackNavigator = createStackNavigator({
    Splash: {
        screen: Splash
    },
    Home: {
        screen: BottomTabNavigator
    },
    News: {
        screen: NewsListScreen
    },
    NewsItem: {
        screen: NewsItemScreen,
        navigationOptions: {
            headerTitle: 'News Item'
        }
    }
},
{
    initialRouteName: "Splash",
});

const BottomTabNavigator = createBottomTabNavigator({
    Home: {
        screen: StackNavigator,
        navigationOptions: {
            tabBarIcon: () => <MaterialIcons name="home" size={24} />
        }
    }
})

export default createAppContainer(StackNavigator);