CODEWITHSUNDEEP
javascriptreact-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab
Fachry Ansyah
Fachry Ansyah

Reputation: 53

@react-navigation/bottom-tabs always getting undefined component

i'm trying to create nested Navigation (Bottom Tab with Stack), but when im passing the screen component

<Stack.Screen name="Home" component={HomeScreen} />

always got undefined.
my full code:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from './screens/home';
import Login from './screens/login';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const horizontalAnimation = {
    cardStyleInterpolator: ({ current, layouts }) => {
        return {
            cardStyle: {
                transform: [
                    {
                        translateX: current.progress.interpolate({
                            inputRange: [0, 1],
                            outputRange: [layouts.screen.width, 0],
                        }),
                    },
                ],
            },
        };
    },
};

function HomeScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}
function SettingsScreen({ navigation }) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings screen</Text>
            <Button
                title="Go to Details"
                onPress={() => navigation.navigate('Details')}
            />
        </View>
    );
}

const StackNavigator = () => {
    return (
        <Stack.Navigator
            screenOptions={{
                    headerShown: false
            }}
        >
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Login" component={SettingsScreen} options={horizontalAnimation} />
        </Stack.Navigator>
    );
}

const navigator = () => {
    return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="Index" component={StackNavigator} />
            </Tab.Navigator>
        </NavigationContainer>
    )
}

export default navigator;

package.json

"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.0.1",
"@react-navigation/native": "^5.9.4",
"@react-navigation/stack": "^5.14.5",

the result:
ss-emulator

Upvotes: 0

Views: 662

Answers (1)

satya164
satya164

Reputation: 10145

You're mixing 6.x and 5.x versions of @react-navigation packages:

"@react-navigation/bottom-tabs": "^6.0.1",
"@react-navigation/native": "^5.9.4",

Either upgrade to 6.x versions of all the packages, or downgrade bottom-tabs to 5.x

Upvotes: 1

Related Questions