I tried to install react navigation following the its docs: https://reactnavigation.org/
Here are the steps I made:
run "npm install --save @react-navigation/native"
run "expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view"
run "npm install --save @react-navigation/stack"
And then inside my navigation folder, I created a file called MealsNavigator.js
file and inside:
import { createStackNavigator } from '@react-navigation/stack';import { createAppContainer } from '@react-navigation/native';import CategoriesScreen from '../screens/CategoriesScreen';import CategoryMealsScreen from '../screens/CategoryMealsScreen';import MealDetailScreen from '../screens/MealDetailScreen';const MealsNavigator = createStackNavigator({ Categories: CategoriesScreen, CategoryMeals: { screen: CategoryMealsScreen }, MealDetail: MealDetailScreen});export default createAppContainer(MealsNavigator);
I then tried to use this inside my App.js
file to see if its working:
import React, { useState } from 'react';import { StyleSheet, Text, View } from 'react-native';import * as Font from 'expo-font';import { AppLoading } from 'expo';import MealsNavigator from './navigation/MealsNavigator';const fetchFonts = () => { Font.loadAsync({'poppins-regular': require('./assets/fonts/Poppins-Regular.otf'),'poppins-bold': require('./assets/fonts/Poppins-Bold.otf') })};export default function App() { const [fontLoaded, setFontLoaded] = useState(false); // This will make sure simply keep the flash screen open // until our fonts loaded if (!fontLoaded) { return (<AppLoading startAsync={fetchFonts} onFinish={() => setFontLoaded(true)} /> ); } return <MealsNavigator />;}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', },});
But in the end I ended up getting this error:
Unable to resolve "react-native-gesture-handler" from "node_modules/@react-navigation/stack/src/views/GestureHandler.native.tsx"
Any idea how to fix this?