CODEWITHSUNDEEP
react-nativereact-navigation
Dennis
Dennis

Reputation: 158

How do i configure react-native navigaton in bare react-native app?

ive been trying to set my navigation with react native using react-navigation/stack but seem to be missing something. here is my code:

    import "react-native-gesture-handler";
import * as React from "react";
import { Button, View, Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

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

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.navigate("Details")}
      />
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

when i try to run the app on web using yarm web the app runs perfectly, bur when i use my android AVD or even my real device, it gives me this error:

Failed building JavaScript bundle.
Unable to resolve "@react-native-community/masked-view" from "node_modules\@react-navigation\stack\src\views\MaskedViewNative.tsx"

please help

Upvotes: 0

Views: 171

Answers (2)

Jignesh Mayani
Jignesh Mayani

Reputation: 7193

Here, You have to install the library of react-native-community/masked-view and you might get the same error for other libraries if you not have installed other libraries required for the base navigation and stack navigation libraries.

try with install library as below:

if you are using yarn

  • yarn add @react-native-community/masked-view

OR

If you are using npm

  • npm install @react-native-community/masked-view

also install other libraries if you got some errors like this.

Upvotes: 1

maltoze
maltoze

Reputation: 737

See the documentation. You are missing some dependencies.

installing-dependencies-into-a-bare-react-native-project

Upvotes: 0

Related Questions