I am working on a project in react native. I am getting a warning related to React 18. The message is Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
I have searched to resolve this but I only found the solution related to reactjs not react native.
Please help me to solve this.
App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Starting New Native Projecsft</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Related
Hey guys I am trying to make an app using AWS Amplify and React Native. I want to just add a background image to my app and for that small purpose, I don't want to create an entirely custom component to display for the Sign In Screen. Here is my code.
import React, { useEffect } from 'react';
import { Text, View, StyleSheet, StatusBar, ImageBackground, Image } from 'react-native';
import SplashScreen from 'react-native-splash-screen';
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
import { Authenticator, AmplifyTheme } from 'aws-amplify-react-native';
Amplify.configure(awsconfig);
console.disableYellowBox=true;
const App = function() {
useEffect(() => {
SplashScreen.hide();
}, []);
return(
<View style={styles.container}>
<StatusBar
barStyle = 'light-content'
backgroundColor='black'
/>
<Authenticator usernameAttributes="email" >
</Authenticator>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black'
}
});
export default App;
I know ImageBackground should do the job but I don't know how to integrate the Amplify sign in with it.
Thanks in advance.
I am starting with React-Native. I was able to see the <Text>. Then I progressed in adding my <TextInput>
import React from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
export default class App extends Component {
state = {
placeName: ''
}
placeNameChangedHandler = event => {
alert(event)
}
render(){
return (
<View style={styles.container}>
<Text>Ayman</Text>
<TextInput
style={{width:300, borderColor:"black"}}
value={this.state.placeName}
onChangeText={this.placeNameChangedHandler}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I am able to bundle my Javascript app, but the UI shows a blank screen.
Note that I'm a novice and I'm using expo on my phone for UI device.
Add borderWidth: 1 in TextInput styles and it will show the empty textinput.
I am learning React Native and applying some simple styling to a View. But the styling is not showing up at all. What am I doing wrong?
import React, { Component } from 'react'
import { Text, View } from 'react-native'
export default class Header extends Component {
render() {
return (
<View style={styles.container}>
<Text> Hello </Text>
</View>
)
}
}
const styles = {
container: {
backgrounColor: '#ddd',
color: 'red',
paddingTop: 14
}
}
If I change it to <View style={{backgroundColor: '#ddd', color: 'red', paddingTop: 14}}> it would work, but why won't the first approach work?
I am using:
react-native-cli: 2.0.1 and
react-native: 0.57.8
You need to use StyleSheet to create JavaScript styles in react-native
Import StyleSheet from react-native and change your variable style to:
const styles = StyleSheet.create({
container: {
backgrounColor: '#ddd',
color: 'red',
paddingTop: 14
}
});
I've been working with React Native recently trying to produce a mobile application. I'm planning on using the react-navigation plugin in order to allow the user to change screens. However, when I import the screen (ScreenOne.js) into the App.js. However, I get the error:
Unable to resolve module `screens/ScreenOne` from `C:\Users\User\Desktop\Projects\LRAPPMAIN\App.js`: Module `screens/ScreenOne` does not exist in the Haste module map
This is strange as I only get this error when importing it. My code is as follows:
ScreenOne.js
import React, {Component} from 'react';
import {Button, Text, View} from 'react-native';
export class ScreenOne extends Component {
render() {
return (
<View>
<Text>This is the Settings screen</Text>
<Button title="Home"/>
</View>
)
};
export default ScreenOne;
App.js
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ScreenOne from 'screens/ScreenOne'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Is there anything I'm doing wrong here?
When you import something on react and don't use relative paths, it will always look inside your node-modules folder.
What you probably want to do on your App.js file is
import ScreenOne from './screens/ScreenOne';
This way, react will not look for the file relative to your current one.
also
you forgot to close one curly bracket on your ScreenOne.js file.
I am trying to learn React Native and got stuck with React Navigation. I have installed NPM and expo CLI. Also followed the react documentation to create the React Project. But when I tried to create navigation between screens got this error on expo mobile client -
I am not sure what I am doing wrong. I searched for hours on StackOverflow but none of the solutions worked. I am seeking a bit guidance from experts. Below I am pasting the source -
======
App.js
======
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './screen/HomeScreen';
import DetailsScreen from './screen/DetailsScreen';
const AppStackNavigator = createStackNavigator({
Home: {
screen: HomeScreen
},
Details: {
screen: DetailsScreen
},
});
export default class App extends React.Component {
render() {
return (<AppStackNavigator />);
}
}
=============
HomeScreen.js
=============
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
/* StyleSheet */
const styles = StyleSheet.create({
mainContainer: {flex: 1, flexDirection: 'column', backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center'},
});
class HomeScreen extends React.Component {
render() {
return (
<View style={styles.mainContainer}>
<Text>Home Screen</Text>
</View>
);
}
}
export default HomeScreen;
================
DelaitsScreen.js
================
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
/* StyleSheet */
const styles = StyleSheet.create({
mainContainer: {flex: 1, flexDirection: 'column', backgroundColor: '#efefef', alignItems: 'center', justifyContent: 'center'},
});
class DetailsScreen extends React.Component {
render() {
return (
<View style={styles.mainContainer}>
<Text>Details Screen</Text>
</View>
);
}
}
export default DetailsScreen;
To The Experts, I will be forever grateful if anyone can nudge me to the right direction. :)
Thank You.
Your app is crashing because it seems like you are using React Navigation V3 with code that is for V2. V3 requires a container.
Either downgrade to V2 or add the container.