Trying to add a react navigation to the App. js file. won't work.

[kosmos02]

• [ ] Review the documentation: https://docs.viromedia.com/
• [ ] Search for existing issues: https://github.com/viromedia/viro
• [ ] Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Please provide the following information about your environment:

1. Development OS: Mac
2. Device OS & Version: iOS version (14.4)
3. react-viro: "2.17.0", react-native: "^0.59.9"
4. Device: iphone 12 pro max

Description

I'm trying to make a viroreact project and the only and easiest way to incorporate a "homePage" or some type of navigation with it is to build it in the App.js file. When I introduce with adding a createStackNavigator or any type of navigator from react navigation i always get this error

null is not an object (evaluating '_RNGestureHandlerModule.default.Direction')

Reproducible Demo

here is my package.json file

{ "name": "Portfolio", "version": "0.0.1", "private": true, "scripts": { "prestart": "./node_modules/react-viro/bin/run_ngrok.sh", "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "@react-native-community/masked-view": "^0.1.10", "@react-navigation/bottom-tabs": "^5.11.7", "@react-navigation/native": "^5.9.2", "@react-navigation/stack": "^5.14.2", "link": "^0.1.5", "react": "16.8.3", "react-native": "^0.59.9", "react-native-gesture-handler": "^1.10.0", "react-native-reanimated": "^1.13.2", "react-native-safe-area-context": "^3.1.9", "react-native-screens": "^2.17.1", "react-viro": "2.17.0" }, "devDependencies": { "@babel/core": "^7.12.10", "@babel/runtime": "^7.12.5", "babel-jest": "^26.6.3", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.65.0", "react-test-renderer": "16.8.3" }, "jest": { "preset": "react-native" } }

---

and my App.js with things commented out. When I uncomment them I get that error.

// import 'react-native-gesture-handler'; import React, { Component, Fragment } from 'react'; import { AppRegistry, Text, View, StyleSheet, PixelRatio, TouchableHighlight, } from 'react-native';

import { ViroVRSceneNavigator, ViroARSceneNavigator } from 'react-viro'; import { NavigationContainer } from '@react-navigation/native'; // import { createBottomTabNavigator } from '@react-navigation/bottom-tabs' // import { createStackNavigator } from '@react-navigation/stack' // import HomeScreen from './screens/HomeScreen'

// const Stack = createStackNavigator();

thnaks for any help I've been trying to figure this out for a week for my capstone and not having any luck.

[brandos99]

The same here...

[caifu92]

Implementation that you did is only work on RN0.60.0 or higher versions. If you run react-viro on higher RN version, react-navigation will work as you expected. The reason is because react-navigation version is not suitable for rn0.59.9