Im working with React Native and using Expo. When I open the console from the browser I see that the app is using ReactDOM.render instead of createRoot to display the app. I wonder how can I change it from index.js or what can I do?
Thanks in advance.
Screenshot
You need to make some changes in you index.js (if you have not changed the name) search for the latest syntax of react and there you will find what is wrong.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
if you have like this,
make it like this
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
Related
I have simple application react native with expo.
My code is:
const html = require('./assets/web/index.html');
export default (): any => <WebView source={html} />;
Problem is that web page is loaded as pure html on android device. On IOS device it is working perfectly.
I am using react-native-webview
11.23.0
Any tips how can I fix my issue?
Google, SO and githu issues
I am using NativeBase with my ReactNative App.
It is running ok.
However there is a warning that is bugging me a little bit.
How do I fix the warning below?
When server rendering, you must wrap your application in an
to ensure consistent ids are generated between the
client and server.
FormControl#http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.wenyang.DanceConnectyCube:162364:111
RCTView View
First install this package
npm i #react-aria/ssr or yarn add #react-aria/ssr
Then import it into your App.js
import {SSRProvider} from '#react-aria/ssr';
Then do this
const App = () => {
return (
<SSRProvider>
<NativeBaseProvider>
<App />
</NativeBaseProvider>
</SSRProvider>
);
};
After using Linking.getInitialURL() the URL stay there.
I am using react-native-router-flux to navigate.
when users log out I run
import { NativeModules } from 'react-native';
NativeModules.DevSettings.reload()
What happens is the react-navigation do Linking.getInitialURL()
and if there any result so it navigates automatically to the page.
how to reset Linking.getInitialURL() after use ?
happens only on android
React Navigation 5 provides an option to specify a custom getInitialURL method which you can use:
<NavigationContainer
linking={{
// ... linking config
getInitialURL() {
return YourCustomModule.getInitialURL();
},
}}
>
{/* content */}
</NavigationContainer>
https://reactnavigation.org/docs/navigation-container/#linkinggetinitialurl
For the implementation, since you're reloading the whole JS, the code cannot be in JS as the state is lost on reload. You'll need to write a custom native module where you can clear the initial URL when reloading.
I am using the expo-cli tool to develop in react native. I am using an android simulator: Once i run "yarn start" the console asks me:
To run the app with live reloading, choose one of:
• Scan the QR code above with the Expo app (Android) or the Camera app (iOS).
• Press a for Android emulator.
• Press e to send a link to your phone with email.
• Press s to sign in and enable more options.
I press a. The simulator loads the expo app succesfully but the text displayed is not updated. What i mean with this is that before I just had this on app.js:
export default function App() {
return (
<UtilityThemeProvider>
<Box><Text>Hello App</Text></Box>
</UtilityThemeProvider>
);
}
And indeed it was showing Hello App. But then I installed react navigation and similar dependiencies and i have this on app.js:
export default function App() {
return (
<UtilityThemeProvider>
<Navigation />
</UtilityThemeProvider>
);
}
There is no error showing. Not in the console of the simulator, nor in the console, nor in the metro bundler! But the android simulator still it´s showing Hello App
Here´s how i export and import the Navigator component:
index.js:
export default class Navigation extends Component{
state = {}
render(){
return <AppNavigator />
}
}
App.js:
import Navigation from './src/views/index'
Things i´ve tried:
Restart the simulator device
2- Stop the server and run yarn start again
3- Make sure my IDE is still in autosave mode
Any idea what i could do? Could it be possible that i´ve touched something to disable re-load?
Click on Android simulator Ctrl + M and check if you have Enable Live Reload option
What I am doing now is closing and opening different instances of Android Emulator to see how it works in X resolution.
Is there a smarter way?
If your react-native app has a single root react-native-layout-tester is what you are looking for!
The setup is fairly straightforward and you will have to run it on the biggest device possible (a tablet)
render() {
return (
<LayoutTester> // here
<Provider store={ store }>
<Router
initialRoute={ this._initialRoute }
ref={ this._setRouter }
/>
</Provider>
</LayoutTester>
);
}
In case your app navigation is handled via react-native-navigation, then the setup will be a little complex and you wont be able test the Navbar.