We Keep Coding

this.props.route.params.value is undefined at initial screen. in react native

I am sending params through navigation in back direction. from screen B to A. but when I console this.props.route.params.value then I am getting undefined error. please help. how can I get data which I have send in back direction. I dont know redux. is there any quick way without redux.
here is screen A
import { TouchableOpacity, View } from "react-native";
export default class patientReadings extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
console.log(this.props.route.params.value)
return (
<View>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("B",{value1:"1"})}
>
button 1
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("B",{value2:"2"})}
>
button 2
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.props.navigation.navigate("B",{value3:"3"})}
>
button 3
</TouchableOpacity>
</View>
);
}
}
here is screen B
export default class medicalInput extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {};
}
validateInputs = (event) => {
fetch("api", {
method: "POST",
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json",
},
body: JSON.stringify([
{
data,
},
]),
})
.then((returnValue) => returnValue.json())
.then((response) => {
console.log(response);
this.props.navigation.navigate("A", {value : this.props.route.params.value1+"1"});
});
};
render() {
return (
<TouchableOpacity
onPress={() => this.validateInputs()}
></TouchableOpacity>
);
}
}

undefined is not an object (evaluating '_ref.navigation') React-native navigation error

How to solve this error in react navigation
I am can't able to navigate another screen from passReg() function,
check bellow my full code on my answer
This is my error

THIS IS MY CODE PLZ SOLVE THIS ERROR
import 'react-native-gesture-handler';
import React,{ useState } from 'react';
import { StyleSheet, Text, SafeAreaView, ScrollView , View,Image,FlatList,RefreshControl,AsyncStorage,TextInput} from 'react-native';
import { TouchableRipple,Button} from 'react-native-paper';
import { useNavigation,NavigationContainer} from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import firebase from 'firebase';
import auth from '#react-native-firebase/auth';
import Reg from './Reg';
const Stack = createStackNavigator();
function passReg({ navigation })
{
navigation.navigate('reg');
}
const PhoneSignIn=()=> {
// If null, no SMS has been sent
const [number, setNumber] = useState(null);
const [confirm, setConfirm] = useState(null);
const [code, setCode] = useState('');
const [flag, setFlag] = useState();
// Handle the button press
async function signInWithPhoneNumber(phoneNumber) {
const addNum = '+91'+phoneNumber;
try{
const confirmation = await auth().signInWithPhoneNumber(addNum);
setConfirm(confirmation);
} catch (error) {
alert(error);
}
}
async function confirmCode() {
try {
await confirm.confirm(code);
if (confirm.confirm(code)) {
AsyncStorage.setItem('mo_num',number);
alert("Congraulation....")
datasend();
}
} catch (error) {
alert(error);
}
}
async function datasend()
{
fetch('https://punjabfoodhub.in/app/reg.php', {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
'phone_num': number,
})
}).then((response) => response.json())
.then((json) => {
setFlag(json.flag);
if (flag == 'reg') { passReg()}
}).catch((err) => { console.log(err); });
}
if (!confirm) {
return (
<>
<Image
source={require('../assets/cover.png')}
style={styles.image}
/>
<View style={{padding:18}}>
<TextInput
style={styles.input}
placeholder="+91 **********"
onChangeText={num => setNumber(num)}
keyboardType="numeric"
autoCompleteType="tel"
dataDetectorTypes="phoneNumber"
/>
<Button icon="phone" mode="contained" style={styles.btn} onPress={() => passReg()}>
SEND OTP
</Button>
</View>
</>
);
}
return (
<>
<Image
source={require('../assets/cover.png')}
style={styles.image}
/>
<View style={{padding:18}}>
<TextInput
style={styles.input}
maxLength = {6}
onChangeText={text => setCode(text)}
keyboardType="numeric"
placeholder="OTP"
/>
<Button icon="camera" mode="contained" style={styles.btn} onPress={()=> confirmCode()}>
Next
</Button>
<Button mode="text" color="gold" onPress={() => console.log('Pressed')}>
Resend OTP ?
</Button>
</View>
</>
);
}
export default class Login extends React.Component{
constructor(props) {
super(props);
this.state = {
number:null,
otpsend:false,
confirm:null,
otp:null,
};
}
render(){
return(
<ScrollView style={{backgroundColor:'#fff'}}>
<PhoneSignIn/>
<Stack.Navigator headerMode="none">
<Stack.Screen name="main" component={PhoneSignIn} />
<Stack.Screen name="reg" component={Reg} />
</Stack.Navigator>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FBFCFC', //#FFFAFA
paddingHorizontal:12,
//marginTop: Constants.statusBarHeight,
},
image:{
width:'100%',
height:250
},
input:{
borderRadius:20,
borderWidth: 2,
borderColor:'gold',
paddingHorizontal:20,
fontSize:18
, },
btn:{
borderRadius:20,
backgroundColor:'gold',
paddingVertical:5,
marginTop:8
}
});

I believe this has to do with the deconstruction of the navigation prop.
In the line function passReg({ navigation }), there is probably data that's supposed to be there but is not coming through. I'll check back in when I'm able to find the solution for my exact same problem....

Text Input onSubmit while using fetch React Native

I am trying to update my state for nickname and email through textInput and then submit it through a post request to my server. Both keep coming back as undefined. I'm totalling lost as to what I'm doing wrong here.
export default class Add extends Component {
constructor(props){
super(props);
this.state ={
isLoading: true,
nickname: "",
email: ""
}
}
static navigationOptions = {
title: 'Add Contacts',
};
componentDidMount(){
this.setState({
isLoading: false
})
}
onSubmit = () => {
console.log('on submit')
return fetch(`...`, {
method: 'POST',
headers: {
'Accept': 'application/json, text/plain */*',
'Content-Type': 'application/json',
},
body: JSON.stringify(this.state)
})
.then((response) => response)
.then((responseJson) => {
return responseJson
})
.catch((error) => {
throw error;
})
}
render() {
const { navigate } = this.props.navigation;
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return(
<View
style={styles.container}
>
<Text
style={{fontSize:30}}>
New Contact
</Text>
<View>
<TextInput
ref= {(el) => { this.nickname = el; }}
onChangeText={(nickname) => this.setState({nickname}, function () {console.log('Nickname updated')})}
value={this.state.nickname}
/>
<TextInput
value={this.state.email}
onChangeText={(text) => this.setState({email: text})}
/>
</View>
<Button
text = {
<Text
style={{color:colors.textColor, textAlign: 'center'}}
>
Save
</Text>
}
onPress= { () => {
this.onSubmit()
navigate('Home')
}
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
marginTop: 20,
alignItems: 'center',
justifyContent: 'center',
}
});

.then((response) => response)
Should be:
.then((response) => response.json())
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Making_fetch_requests

React-native saving image as state not working

First of all, I am using Image Picker to get the image and RNFetchBlob to sending in the API.
My problem is that I have some text inputs and in the end pushing a button, I would like to send this inputs with the image at the same time. For that I trying to save the image uri as state to send it after. But appears _this2.setState is not a function. For the moment I don't know how to solve it.
And this is my code simplified.
class Create extends Component{
constructor(props){
super(props);
this.state = {
foto: '',
}
}
openImagePicker(){
const options = {
title: 'Select Avatar',
storageOptions: {
skipBackup: true,
path: 'images'
}
}
ImagePicker.showImagePicker(options, (imagen) =>{
if (imagen.didCancel) {
console.log('User cancelled image picker');
}
else if (imagen.error) {
console.log('ImagePicker Error: ', imagen.error);
}
else if (imagen.customButton) {
console.log('User tapped custom button: ', imagen.customButton);
}
else {
let source = { uri: imagen.uri };
console.log(source.uri);
this.setState({
foto: source.uri
})
}
render(){
return(
<Container>
<Header><Title>Eat</Title></Header>
<Content>
<Text>Título</Text>
<View>
<TextInput
onChangeText={(text) => this.titulo = text}
/>
</View>
<Text>Personas</Text>
<View style={styles.container}>
<TextInput
type="number"
onChangeText={(text) => this.personas = text}
/>
</View>
<Text>Foto</Text>
<View>
<TouchableOpacity activeOpacity={.8} onPress={this.openImagePicker}>
<View>
<Text>Cambiar</Text>
</View>
</TouchableOpacity>
</View>
<View>
<ScrollView >
<TouchableHighlight onPress={(this._create.bind(this))}>
<Text>Crear Receta</Text>
</TouchableHighlight>
</ScrollView>
</View>
</Content>
</Container>
)
}
_create () {
RNFetchBlob.fetch('POST', 'XXXXXXXXXXXX', {
'Content-Type' : 'multipart/form-data',
},
[
// element with property `filename` will be transformed into `file` in form data
{ name : 'file', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(source.uri)},
{ name : 'info', data : JSON.stringify({
"titulo": this.titulo,
"personas": this.personas,
})}
]).then((resp) => {
console.log("ok");
}).catch((err) => {
console.log(err);
})
}
})
}
}

You can either bind your method openImagePicker or call it like this:
onPress={() => this.openImagePicker()}
So that you can access your class context.

Stack navigator giving me undefined error

I'm using https://facebook.github.io/react-native/docs/navigation.html by the way.
I'm trying to use the StackNavigator to go from Login.js to AboutDendro.js. What's wrong in my <Button/> component that's throwing that error in my iOS simulator?
Here's Login.js:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, Text, TextInput, View, Button, StyleSheet } from 'react-native';
import { login } from '../redux/actions/auth';
import {AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool} from '../lib/aws-cognito-identity';
import StackNavigator from 'react-navigation';
import AboutDendro from './AboutDendro';
const awsCognitoSettings = {
UserPoolId: 'something',
ClientId: 'something'
};
class Login extends Component {
constructor (props) {
super(props);
this.state = {
page: 'Login',
username: '',
password: ''
};
}
get alt () { return (this.state.page === 'Login') ? 'SignUp' : 'Login'; }
handleClick (e) {
e.preventDefault();
const userPool = new CognitoUserPool(awsCognitoSettings);
// Sign up
if (this.state.page === 'SignUp') {
const attributeList = [
new CognitoUserAttribute({ Name: 'email', Value: this.state.username })
];
userPool.signUp(
this.state.username,
this.state.password,
attributeList,
null,
(err, result) => {
if (err) {
alert(err);
this.setState({ username: '', password: '' });
return;
}
console.log(`result = ${JSON.stringify(result)}`);
this.props.onLogin(this.state.username, this.state.password);
}
);
} else {
const authDetails = new AuthenticationDetails({
Username: this.state.username,
Password: this.state.password
});
const cognitoUser = new CognitoUser({
Username: this.state.username,
Pool: userPool
});
cognitoUser.authenticateUser(authDetails, {
onSuccess: (result) => {
console.log(`access token = ${result.getAccessToken().getJwtToken()}`);
this.props.onLogin(this.state.username, this.state.password);
},
onFailure: (err) => {
alert(err);
this.setState({ username: '', password: '' });
return;
}
});
}
}
togglePage (e) {
this.setState({ page: this.alt });
e.preventDefault();
}
static navigationOptions = {
title: 'AboutDendro',
};
render() {
const { navigate } = this.props.navigation;
const App = StackNavigator({
Home: { screen: Login },
Profile: { screen: AboutDendro },
});
return (
<ScrollView style={{padding: 20}}>
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('AboutDendro', { name: 'AboutDendro' })
}
/>
<Text style={{fontSize: 27}}>{this.state.page}</Text>
<TextInput
placeholder='Email Address'
autoCapitalize='none'
autoCorrect={false}
autoFocus={true}
keyboardType='email-address'
value={this.state.username}
onChangeText={(text) => this.setState({ username: text })} />
<TextInput
placeholder='Password'
autoCapitalize='none'
autoCorrect={false}
secureTextEntry={true}
value={this.state.password}
onChangeText={(text) => this.setState({ password: text })} />
<View style={{margin: 7}}/>
<Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
<View style={styles.firstView}>
<Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
{this.alt}
</Text>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
buttons: {
fontSize: 12,
color: 'blue',
flex: 1
},
firstView: {
margin: 7,
flexDirection: 'row',
justifyContent: 'center'
}
});
const mapStateToProps = (state, ownProps) => {
return {
isLoggedIn: state.auth.isLoggedIn
};
}
const mapDispatchToProps = (dispatch) => {
return {
onLogin: (username, password) => { dispatch(login(username, password)); }
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Login);

It is because navigation is not in your props. It is a part of your App component you created. But you do nothing with this component.
You should have an App.js file, with your stackNavigator, set your Login component as your default component in your stackNavigator's parameters.
Take a look at this documentation

I try to refactor your code.
in component render maybe you can just write :
render() {
const { navigate } = this.props.navigation;
return (
<ScrollView style={{padding: 20}}>
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'AboutDendro' })
}
/>
<Text style={{fontSize: 27}}>{this.state.page}</Text>
<TextInput
placeholder='Email Address'
autoCapitalize='none'
autoCorrect={false}
autoFocus={true}
keyboardType='email-address'
value={this.state.username}
onChangeText={(text) => this.setState({ username: text })} />
<TextInput
placeholder='Password'
autoCapitalize='none'
autoCorrect={false}
secureTextEntry={true}
value={this.state.password}
onChangeText={(text) => this.setState({ password: text })} />
<View style={{margin: 7}}/>
<Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
<View style={styles.firstView}>
<Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
{this.alt}
</Text>
</View>
</ScrollView>
);
}
}
And you separate component StackNavigation below component render() like:
const App = StackNavigator({
Home: { screen: Login },
Profile: { screen: AboutDendro },
});
And then import component App in your index.ios.js like:
import './Login';
just that. Maybe my answer can help you.