Home » Javascript » Switching to tab Navigator using multiple files

Switching to tab Navigator using multiple files

Posted by: admin August 19, 2018 Leave a comment

Questions:

I am making a login page with react native and I’m trying to figure out why my screen won’t switch to my tab navigator. I’m essentially using the Authentication guide on React navigation’s website. Here is the link https://reactnavigation.org/docs/en/auth-flow.html. My code is the same as their example code; however, I am using 4 different files to house my screens for my tab navigator, and importing them at the top of my App.js. My problem is when I click log in it does nothing. It worked fine until I put those screens in their own files and I don’t know what’s wrong. Here is some code from my file

// tab navigator screens
import HomeScreen from './screens/Home.js';
import SearchScreen from './screens/Search.js';
import MessageScreen from './screens/Message.js';
import ProfileScreen from './screens/Profile.js';

Here’s where I’m importing the screens. Here is what one of the screens looks like:
export default class HomeScreen extends React.Component {

static navigationOptions = {
    tabBarIcon: ({ focused, tintColor }) => (
        focused ? <Ionicons name={'ios-beer'} size={25} color={'#FFFFFF'} />
            : <Ionicons name={'ios-beer'} size={25} color={'#536497'} />
    ), tabBarPosition: 'bottom',
    tabBarOptions: {
        showLabel: false,
        activeTintColor: 'white',
        inactiveTintColor: '#536497',
        style: {
            backgroundColor: '#030e2c',
        }
    },
    animationEnabled: false,
    swipeEnabled: false,
};

render() {
    return (
        <View style={styles.container}>
            <Button title="Show me more of the app" onPress={this._showMoreApp} />
            <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
        </View>
    );
}

_showMoreApp = () => {
    this.props.navigation.navigate('Search');
};

_signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
};
}

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

And here is the bottom of my App.js where the navigators are initialized:

const AppTab = createBottomTabNavigator({ Home: HomeScreen, Search: 
SearchScreen, Message: MessageScreen, Profile: ProfileScreen });

const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createSwitchNavigator(
 {
  AuthLoading: AuthLoadingScreen,
  App: AppTab,
  Auth: AuthStack,
 },
 {
  initialRouteName: 'AuthLoading',
 },
);

Thanks

Answers: