We Keep Coding

Warning: Can't perform a React state update on an unmounted component. Cancel all subscriptions and async using componentWillUnmount and useEffect

I am new to react and react native technology and I am stuck into a warning which I am not able to solve.
Two warnings I get:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it
indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method in PhoneInput (at Login.js:40)
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it
indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function in CountryPicker.
Here is my Login.js
import React, {useEffect, useState, useRef } from "react";
import {
View, Text,TouchableOpacity,
StyleSheet, Image, SafeAreaView,
TextInput,
StatusBar, ScrollView
} from 'react-native';
import { Card } from "react-native-shadow-cards";
import PhoneInput from 'react-native-phone-number-input';
import Styling from "../components/Styling";
const Login = (props) => {
const phoneInput = useRef(PhoneInput > (null));
const [phoneNumber,setphoneNumber]=useState(null);
return (
<View style={styles.container}>
<StatusBar backgroundColor='#1e3d59' barStyle="light-content" />
<ScrollView>
<View style={styles.header}>
<Image source={require('../assets/images/login.png')}
style={{ height: 150, width: 150, }}></Image>
</View>
<View
style={[styles.footer]}>
<Text style={Styling.text_footer}>Mobile Number</Text>
<View style={{marginTop:10,
alignContent:'center',
alignItems:'center',
paddingLeft:15,
borderWidth:1,
borderColor:'#d7dade',
borderRadius:20,
flexDirection:'row',
height:72,}}>
<SafeAreaView >
<PhoneInput
containerStyle={{
backgroundColor: '#fff',
borderColor:'black',
alignContent:'center',
height:70,
}}
flagButtonStyle={{
width:'15%'
}}
textContainerStyle={{
backgroundColor: '#fff',
}}
ref={phoneInput}
defaultValue={phoneNumber}
defaultCode="IN"
layout="first"
keyboardType='numeric'
onChangeText={setphoneNumber}
></PhoneInput>
</SafeAreaView>
</View>
<TouchableOpacity on onPress={() => props.onSubmit('+91'+phoneNumber)}>
<Card style={[containerStyle={
height:50,
elevation:0,
borderRadius:10,
backgroundColor: '#ff6e40',
width:"100%",
alignItems:'center',
alignContent:'center',
justifyContent:'center'
},{marginTop:30}]}>
<View >
<Text style={[Styling.textSign, {color:'#fff'}]}>Request OTP</Text>
</View>
</Card>
</TouchableOpacity>
</View>
</ScrollView>
</View>
);
};
export default Login;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:"column",
backgroundColor: '#1e3d59',
width: '100%',
},
header: {
alignItems: 'center',
height:"50%",
justifyContent:"center"
},
footer: {
backgroundColor: "white",
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom:600
},
});
Here is my App.js
import React, { useState } from 'react';
import auth from '#react-native-firebase/auth';
import VerifyCode from './src/screens/VerifyCode';
import AuthStack from './src/navigation/AuthStack';
import Login from './src/auth/Login';
import { NavigationContainer } from '#react-navigation/native';
const App = () => {
const [confirm, setConfirm] = useState(null);
const [authenticated, setAuthenticated] = useState(false);
const signIn = async (phoneNumber)=> {
try {
const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
setConfirm(confirmation);
} catch (error) {
alert(error);
}
}
const confirmVerificationCode= async (code) =>{
try {
await confirm.confirm(code);
setConfirm(null);
} catch (error) {
alert('Invalid code');
}
}
auth().onAuthStateChanged((user) => {
if(user) {
setAuthenticated(true);
} else {
setAuthenticated(false);
}
})
return(
<NavigationContainer>
{ authenticated? (
<AuthStack/>
)
:
confirm? (
<VerifyCode onSubmit={confirmVerificationCode}/>
)
:
<Login onSubmit={signIn}/>
}
</NavigationContainer>
);
}
export default App;
Here is my VerifyCode.js
import React, { useState} from "react";
import {
View, Text,Platform, TouchableOpacity,
StyleSheet, Image,
TextInput,
StatusBar, ScrollView
} from 'react-native';
import { Card } from "react-native-shadow-cards";
import Styling from "../components/Styling";
const Login = (props) => {
const [code, setCode] = useState('');
return (
<View style={styles.container}>
<StatusBar backgroundColor='#1e3d59' barStyle="light-content" />
<ScrollView>
<View style={styles.header}>
<Image source={require('../assets/images/login.png')}
style={{ height: 150, width: 150, }}></Image>
</View>
<View
style={[styles.footer]}>
<View style={{marginTop:10,
alignContent:'center',
alignItems:'center',
alignSelf:'center',
justifyContent:"center",
borderWidth:1,
borderColor:'#d7dade',
borderRadius:20,
height:60,
width:"40%"
}}>
<TextInput
placeholder="Enter OTP"
autoFocus
value={code}
onChangeText={setCode}
keyboardType="numeric"
style={{fontSize:20,}}
></TextInput>
</View>
<View style={{width:"100%", alignSelf:"center"}}>
<TouchableOpacity on onPress={() => props.onSubmit(code)}>
<Card style={[containerStyle={
height:50,
elevation:0,
borderRadius:10,
backgroundColor: '#ff6e40',
alignItems:'center',
alignContent:'center',
justifyContent:'center'
},{marginTop:20}]}>
<View >
<Text style={[Styling.textSign, {color:'#fff'}]}>Confirm</Text>
</View>
</Card>
</TouchableOpacity>
</View></View>
</ScrollView>
</View>
);
};
export default Login;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:"column",
backgroundColor: '#1e3d59',
width: '100%',
},
header: {
alignItems: 'center',
justifyContent:"center",
height:"50%"
},
footer: {
backgroundColor: "white",
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
paddingHorizontal: 20,
paddingTop: 20,
paddingBottom:600
},
});

Navigate Between Stack Screens using imported button

I am new to react native and am having trouble establishing connections between components.
For example
onClickFunction() {this.props.navigation.navigate('CurrencyList')} is not working for my pattern. I did a several research on this subject but I could not understand its logic.
This is my App.js
import React from 'react'
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
// Screens---------------------------------------------------------
// Auth Screens
import Login from './screens/Authentication/Login'
import Register from './screens/Authentication/Register'
// Main Screens
import Home from './screens/Home'
import Converter from './screens/Converter'
import CurrencyList from './screens/CurrencyList'
//-----------------------------------------------------------------
const Stack = createStackNavigator();
var routeName = 'Converter';
export default class App extends React.Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={`${routeName}`}>
<Stack.Screen name="Home" component={Home} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Converter" component={Converter} />
<Stack.Screen name="CurrencyList" component={CurrencyList} />
</Stack.Navigator>
</NavigationContainer>
)
}
}
This my Converter Page
// Currency Converter Page
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
// Components
import UpdateButton from '../../components/UpdateButton'
import CurrencySelectButton from '../../components/CurrencySelectButton'
import CurrencyTextInput from '../../components/CurrencyTextInput'
import ConvertedCurrencyTextInput from '../../components/ConvertedCurrencyTextInput'
export default function Home() {
return (
<View style={styles.container}>
<View style={styles.textHolder}>
<CurrencyTextInput />
<Text>=</Text>
<ConvertedCurrencyTextInput />
</View>
<View style={styles.buttonHolder}>
<CurrencySelectButton />
<Text>to</Text>
<UpdateButton />
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
buttonHolder: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f1f1f1',
alignContent: 'center'
},
textHolder:{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#f1f1f1',
alignContent: 'center'
}
});
This is the button component that I want to change the screen
import React from 'react'
import { TouchableOpacity, Text, StyleSheet } from 'react-native'
export default class CurrencySelectButton extends React.Component {
onClickFunction() {
this.props.navigation.navigate('CurrencyList')
}
render() {
return (
<TouchableOpacity onPress={() => this.onClickFunction()} style={styles.button} >
<Text style={styles.buttonText} >TRY</Text>
</TouchableOpacity>
)
}
}
const styles = StyleSheet.create({
button: {
backgroundColor: 'black',
padding: 15,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 15,
flex: 1,
height: 75,
marginHorizontal:20
},
buttonText: {
color: 'white',
fontWeight: 'bold',
fontSize: 17
}
})

You will have to pass the navigation prop from home to the button like below
export default function Home({navigation}) {
return (
<View style={styles.container}>
<View style={styles.textHolder}>
<CurrencyTextInput />
<Text>=</Text>
<ConvertedCurrencyTextInput navigation={navigation}/>
</View>
<View style={styles.buttonHolder}>
<CurrencySelectButton />
<Text>to</Text>
<UpdateButton />
</View>
</View>
);
}

Navigating between screens having two separate react native files

I am new to react native and I want to navigate between screens. I have two sample files
#App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Home from './src/Home';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Home/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFEB3B',
alignItems: 'center',
justifyContent: 'center',
},
});
and another file
#Home.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>User</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}>
<Text style={styles.buttonText}>Contractor</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
},
button: {
width:300,
borderRadius: 25,
backgroundColor:'#FCE4EC',
marginVertical: 10,
paddingVertical:16
}
});
How do I make it that when either User or Contractor are clicked in Home.js file they take me to different screens preferably using stacknavigator. I tried the documentation but can't seem to figure out the way forward.

You could do this easily using StackNavigator offered by react-navigation library.
Here is the idea:
In the App.js file you have to refer to the stacknavigator/parent of your navigation.
#App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import Home from './src/Home';
import Contractor from './src/Contractor';
import User from './src/User';
const Main = StackNavigator({
HomeScreen: {
screen: Home
},
UserScreen: {
screen: User,
},
ContractorScreen: {
screen: Contractor,
},
}
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Main/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFEB3B',
alignItems: 'center',
justifyContent: 'center',
},
});
Home file:
#Home.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Home extends React.Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}
onPress={() => this.props.navigation.navigate({ routeName: 'UserScreen'})}>
<Text style={styles.buttonText}>User</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button}
onPress={() => this.props.navigation.navigate({ routeName: 'ContractorScreen'})}>
<Text style={styles.buttonText}>Contractor</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonText: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
},
button: {
width:300,
borderRadius: 25,
backgroundColor:'#FCE4EC',
marginVertical: 10,
paddingVertical:16
}
});
User file:
#User.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class User extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>I am the User screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
});
And finally, Contractor file:
#Contractor.js
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity} from 'react-native';
export default class Contractor extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>I am the Contractor screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize:16,
fontWeight:'500',
color:'#212121',
textAlign:'center'
});

Why won't one of my components work in my React Native project?

I'm teaching myself React Native and as of now, I've ran into a minor problem.
I want <KeyboardAvoidingView/> to push the 2 input boxes up so that the user can see what they're typing but my code isn't doing that. It isn't even showing what user is typing. The user must press Next on the keyboard they can see what they typed. Also, what I press Next, it doesn't go to the next input box.
Here's App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<View>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
placeholder={"Email"}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
placeholder={"Password"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
backgroundColor: '#DAE5FF',
// paddingBottom: 20,
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15,
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
}
});
export default Login;
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';
class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<Login/>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
},
});
export default BackGround;

Why won't <TextInput/> display what's being typed?

Whenever I click on Email in the first <TextInput/> box on my physical device, I can't see what's being typed. Only when I press Next to go to the Password box do I see what was typed in the Email box. Why's this so?
Here's App.js:
import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';
export default class App extends Component {
render() {
return(
<View style={styles.back}>
<BackGround/>
</View>
);
}
}
const styles = StyleSheet.create({
back: {
flex: 1
}
});
Here's Login.js:
import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
};
}
updateTextInput = text => this.setState({text});
render() {
return(
<KeyboardAvoidingView behavior={"padding"} style={styles.container}>
<View>
<TextInput
style={styles.input}
returnKeyType={"next"}
keyboardType={"email-address"}
autoCorrect={false}
onChangeText={this.updateTextInput}
value={this.state.text}
/>
<TextInput
style={styles.input}
returnKeyType={"go"}
secureTextEntry
/>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Login</Text>
</TouchableOpacity>
<TouchableOpacity>
<Text style={styles.loginAndCA}>Create Account</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
const styles = StyleSheet.create({
container: {
padding: 20
},
input: {
backgroundColor: '#DAE5FF',
paddingBottom: 20,
padding: 20,
paddingHorizontal: 15,
marginBottom: 10,
borderRadius: 15,
},
loginAndCA: {
fontSize: 40,
textAlign: 'center',
color: 'white',
fontFamily: 'Bodoni 72 Smallcaps',
paddingHorizontal: 10
},
buttons: {
paddingBottom: 50
}
});
export default Login;
Here's BackGround.js:
import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import Login from './Login';
export default class BackGround extends Component {
render() {
return(
<View style={styles.first}>
<Image style={styles.container} source={require('../pictures/smoke.jpg')}>
<View style={styles.second}>
<Login/>
</View>
</Image>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width: null,
height: null,
backgroundColor: 'rgba(0,0,0,0)',
resizeMode: 'cover'
},
first: {
flex: 1
},
second: {
paddingTop: 290 // Moves both <TextInput> boxes down.
}
});

You need to pass value and onTextChange props to TextInput.
https://facebook.github.io/react-native/docs/textinput.html

You need to give it a value connected to state and as that textinput changes, you update the state value:
export default class TextInputExample extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
};
}
updateTextInput = text => this.setState({ text })
render() {
return (
<View style={{ flex: 1}}>
<TextInput
style={{height: 40}}
placeholder="Type here!"
onChangeText={this.updateTextInput}
value={this.state.text}
/>
</View>
);
}
}