I have managed to get a web version of my app loading in a browser using native-base, react-navigation and react-native-web but the react-navigation Drawer permanently displays (even with headerShown set to false) and no interaction will get rid of it.
There are numerous config files and components so I have included a test app as a means to test this issue if anyone can help.
Here is a link the the repro:
testApp on GitHub
To set up the app:
yarn
yarn web
Related
I am working on building a React Native application. I have installed React navigation stack and worked on it, it works fine. When I installed Drawer navigation and tried to use that, it came up with these errors. What is causing the problem here?
My App.js:
My Navigation.js:
My Errors:
npm start -- --reset-cache
Also I closed and rerun the emulator.
More can me found here.
Navigate
While working on my app yesterday, the web emulator of Expo was working properly.
Now when I am trying to start the app on the browser today using expo start and then w, the whole screen is blank.
Nothing is there on the browser.
What kind of issue is this? How should I fix this?
Image of the emulator:
EDIT
These are the Screenshot from Snack:
App.js
LoginScreen.js
HomeScreen.js
The problem you're having is in navigation and has nothing to do with emulator,
the issue is that react Navigation on web require linking prop, you can check for details in documentation
Another solution is to use #react-navigation/web and here is a example web navigation in react native
For your case try using :
const LoginScreen({navigation})
and use navigation object normally like that :
navigation.navigate('HomeScreen')
no need to use useNavigation
Hello so I'm working on an app for android and iOS which is quite developed by now and I'd like to activate react-native-web on it. the problem is that I have a bug when I try to run the script to launch the web development server :
The first error at the top is the one I'm struggling with I've tried updating my babel config :
I tried deleting the babel config at the root of my project and it changed nothing like the babel config has no importance
It is being used though to build the android app i know that, but for the react native web build it seems he has no importance
But is still get the same error again and again
please let me know if you need any more information's on this issue
I'm trying to run my React Native app as a web site, on a browser.
I tried to go according to https://necolas.github.io/react-native-web/docs/installation/ but the instructions on the Setup page are not clear.
I found some (rare) posts regarding this, but they are old (2019) and seem to deviate from the info in the link above.
I use yarn android to run it on android.
So, I tried using yarn web. Didn't work.
Also, tried the basic react-native start followed by react-native run-web.
It seems the run-web command is not what is needed.
Any assist appreciated.
P.S. I initialized my project through Expo, as a Bare Workflow project. Hope that helps
According to the docs:
Expo for web can work on any React Native project. When you initialize a new project with a bare workflow template using expo-cli, if you run yarn web or npm run web it will start up expo-cli and open your project in a web browser.
The same guides for web from the managed workflow apply here.
So basically just initialise your project using expo init project-name and then select bare workflow or managed workflow. After that you can execute npm run web. It will open up the browser and run the web version of it. Keep in mind that there are some incompatibility of libraries from expo, for example, the Webview is incompatible on the web so you need to switch when on web to an iframe or so.
I am following this link to customize my react-native components
Theming NativeBase Apps
but I am unable to find light.js and proceed further
Run the following command after installing native-base in your root app directory.
node node_modules/native-base/ejectTheme.js
https://docs.nativebase.io/Customize.html#Customize
set version to 2.2.0 and it will show you the steps to theming nativeBase App.