Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16552

React Native: resolve "react-native-gesture-handler"

$
0
0

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?


Viewing all articles
Browse latest Browse all 16552

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>