React Navigation v4 BottomTab with a little tweak

yarn add react-navigation@4.2.2yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

//Tab1.jsimport React from 'react';import { View, Text, Image, Dimensions } from 'react-native';import { createAppContainer } from 'react-navigation';import { createBottomTabNavigator } from 'react-navigation-tabs';import Ionicons from 'react-native-vector-icons/Ionicons';import Tab2 from './Tab2'class Tab1 extends React.Component {    render() {      return (        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>          <Text>Tab1!</Text>        </View>      );    }}const BottomTab = createBottomTabNavigator({    Tab1: {screen: Tab1},    Tab2 :{screen: Tab2},},{    defaultNavigationOptions: ({ navigation }) => ({      tabBarIcon: ({ focused, horizontal, tintColor }) => {        const { routeName } = navigation.state;        let IconComponent = Ionicons;        let iconName;        if (routeName === 'Tab1') {          iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';        } else if (routeName === 'Tab2') {            iconName = focused ? 'alarm' : 'alarm-outline';        }        // You can return any component that you like here!        return <IconComponent name={iconName} size={25} color={tintColor} />;      },    }),    tabBarOptions: {      activeTintColor: '#26416d',      inactiveTintColor: 'gray',    },  })export default createAppContainer(BottomTab);

//Tab2.jsimport React from 'react';import { View, Text,Button } from 'react-native';import { createAppContainer } from 'react-navigation';import { createStackNavigator } from 'react-navigation-stack';class Screen1 extends React.Component {    render() {      return (        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>          <Text>Tab2 Screen1!</Text>          <Button            onPress={() => this.props.navigation.navigate('Screen2')}            title="Go to screen 2"            color="#f5bebd"          />        </View>      );    }}class Screen2 extends React.Component {    render() {      return (        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>          <Text>Screen2!</Text>        </View>      );    }}const StackNavigator = createStackNavigator({    Screen1: Screen1,    Screen2: Screen2,  });export default createAppContainer(StackNavigator);

defaultNavigationOptions: ({ navigation }) => ({      tabBarIcon: ({ focused, horizontal, tintColor }) => {        const { routeName } = navigation.state;        let IconComponent = Ionicons;        let iconName;        if (routeName === 'Tab1') {          iconName = focused           ? require('./profile.png')           : require('./profileInactive.png');        } else if (routeName === 'Tab2') {            iconName = focused             ? require('./settings.png')             : require('./settingsInactive.png');        }        // You can return any component that you like here!        return <Image source={iconName} style={{height:30, width:30, }}/>;      },    })

tabBarVisible: navigation.state.index === 0