We Keep Coding

React Native simple useState does not work, state is staying 'undefined' and "setState is not a function"

I have just a simple React-Native Component that uses useState as a test if it works. When I set the userstate, and I just print it, it logs 'undefined'. Also when I call setUser, it throws an error, that setUser is not a function. Whats wrong with my Setup?:
import { StyleSheet, Text, View, TextInput, Button, Seperator, Pressable } from 'react-native'
import React, {useState, useEffect} from 'react'
import colors from '../theme/colors.style.js'
import NetInfo from '#react-native-community/netinfo';
import { checkConnected } from '../utils/Netinfo.js';
export default function MachineManager() {
const {connectStatus, setConnectStatus} = useState(false);
const {user, setUser} = useState("martin");
console.log(user);
return (
<View style={styles.container}>
<View style={styles.connectorMenu}>
<View style={styles.shadowView}>
<View style= {styles.connectionMenuHeader}>
<Text style={styles.connectionMenuHeaderText}>Verbundenes Gerät</Text>
</View>
<View style={styles.inputRow}>
<Text style={styles.inputLabel}>SSID:</Text>
<TextInput placeholder="SSID Kennung" style={styles.input}/>
</View>
<View style={styles.inputRow}>
<Text style={styles.inputLabel}>Passwort:</Text>
<TextInput placeholder="Passwort" style={styles.input}/>
</View>
<View style={styles.connectionControl}>
<View style={styles.connectionControlStatus}>
<Text style={styles.connectionControlStatusText}>Status: Nicht Verbunden</Text>
<Text style={styles.connectionControlStatusText}>{user}</Text>
</View>
<View style={styles.connectionControlConnect}>
<Pressable style={styles.connectButton}>
<Text style={styles.connectButtonText}>Verbinden</Text>
</Pressable>
</View>
</View>
</View>
</View>
</View>
)
}

The syntax is incorrect. It needs to be -
const [connectStatus, setConnectStatus] = useState(false);
const [user, setUser] = useState("martin")

React native loading data from async storage returns undefined

I am trying to load data from Async Storage in react-native. I managed to load all User Data from API to async storage and I was able to display it in UserData(), however when I try to return received data to other components I get:
[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected identifier "undefined"]
I assumed data is returned asyncroniously so I tried to await it however then I was getting:
[Unhandled promise rejection: Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:]
I searched this error and all I found out was that it assumes I was calling hooks in class. It is not truth however, because I simply used setState() in UserProfile() to save data received from UserData(). Could anyone please tell me what am I doing wrong? Thanks for all the help in advance.
Function I used to retrieve user data from:
import React, { useState } from "react";
import { View, Text } from "react-native";
import storage from "./Storage";
export default function UserData() {
const [userData, setuserData] = useState();
storage
.load({
key: "user",
autoSync: true,
syncInBackground: true,
})
.then(ret => {
setuserData(JSON.stringify(ret.info));
})
.catch(err => {
// console.warn(err.message);
return;
});
if (userData) return userData;
}
Function which displays user profile:
import React, { useState, useEffect } from "react";
import DeleteUser from "./DeleteProfile";
import PayPal from "../navigation/PayPal";
import { Button, TextInput, Text, ScrollView, View, Image } from "react-native";
import Styles from "../../styles/Styles";
import storage from "../elements/Storage";
import UserData from "../elements/GetUserData";
export default function UserProfile() {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [phone, setPhone] = useState("");
const [premium, setpremium] = useState(false);
const [admin, setAdmin] = useState(false);
const [id, setId] = useState("");
const [checkout, setCheckout] = useState(false);
const info = UserData();
useEffect(() => {
async function getData() {
const result = JSON.parse(info);
setEmail(result.email);
setName(result.name);
setId(result._id);
setPhone(result.phone);
setpremium(result.premium);
setAdmin(result.admin);
}
getData();
}, []);
return (
<ScrollView style={Styles.userProfile}>
<View style={(Styles.bigBar, { textAlign: "center" })}>
<Text style={Styles.h1}>Profile Page</Text>
</View>
<View style={Styles.profileContent}>
<View>
<Image
style={Styles.profileImg}
source={{
uri: "https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg",
}}
/>
</View>
<View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>User name: </Text>
</View>
</View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>Email: </Text>
</View>
</View>
<View>
<View style={Styles.profileView}>
<Text style={Styles.h6}>Phone number: </Text>
</View>
</View>
<View>
{/* {premium && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}>premium: </Text>
</View>
{/* )} */}
</View>
<View>
{/* {!premium && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}> premium: </Text>
<View
style={{
color: "red",
}}
></View>
</View>
{/* )} */}
</View>
{/* {admin && ( */}
<View style={Styles.profileView}>
<Text style={Styles.h6}>Admin: </Text>
<View style={{ color: "green" }}></View>
</View>
{/* )} */}
</View>
<View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{name}</Text>
</View>
</View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{email}</Text>
</View>
</View>
<View>
<View style={Styles.profileView2}>
<Text style={Styles.h6}>{phone}</Text>
</View>
</View>
<View>
{/* {premium && ( */}
<View style={Styles.profileView2}>
<View style={{ color: "orange" }}>
<Text style={Styles.h6}> POSIADANE</Text>
</View>
<View style={{ marginBottom: 1 }} />
</View>
{/* )} */}
</View>
<View>
{/* {!premium && ( */}
<View style={Styles.profileView2}>
<View
className="inline"
style={{
color: "red",
}}
>
{checkout ? (
<View style={{ margin: 0 }}>
<PayPal />
</View>
) : (
<View style={Styles.smlBtn}>
<Button
style={{ marginLeft: 1, marginBottom: 1 }}
onPress={() => setCheckout(true)}
title="BUY PREMIUM"
/>
</View>
)}
</View>
</View>
{/* )} */}
</View>
{/* {admin && ( */}
<View style={Styles.profileView2}>
<View style={{ color: "green" }}>
<Text style={Styles.h6}> TRUE</Text>
</View>
</View>
{/* )} */}
</View>
</View>
<View>
{/* <DeleteUser id={id} /> */}
{/* <Link
className="rf update better"
to={{
pathname: `/editProfile/?${id}`,
}}
>
UPDATE
</Link> */}
</View>
</ScrollView>
);
}

Okay I figured it out. In order to execute it properly I had to handle Promise returned from UserData() with then. It looks like this in the end:
useEffect(() => {
async function getData() {
await UserData().then(result => {
setEmail(result.email);
setName(result.name);
setId(result._id);
setPhone(result.phone);
setpremium(result.premium);
setAdmin(result.admin);
});
}
getData();
}, []);

React-Navigation: Navigating by pressing images

I am trying to navigate screens by pressing on specific images on SearchScreen.js. Each image leads to a different screen. I am currently trying navigate from the first image to the screen meo_sw.js. However, I am not being able to do so and I don't undersand why. Here is the code of SearchScreen.js :
import React from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, Image, TouchableOpacity} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
function SearchScreen() {
return (
<View style={styles.screen}>
<View style={styles.container}>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Procura aqui"
placeholderTextColor = "black"
selectionColor="black"
keyboardType="default"/>
</View>
<View style={styles.teste}>
<Text style={styles.festivais}>Recomendados</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
<TouchableOpacity>
<Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image} onPress={() => navigation.navigate('meo_sw')}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/superbock_superrock.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/nos_primavera.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/rock_in_rio.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
<TouchableOpacity>
<Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image} onPress={() => {}}/>
</TouchableOpacity>
</ScrollView>
</View>
</View>
);
}
SearchScreen.navigationOptions = {
title: 'Procurar',
};
const styles = StyleSheet.create({
//I took this part off because it is useless for this especific question
});
export default SearchScreen;
And here is the screen 'meo_sw.js':
import React from 'react';
import {View, Text, TouchableOpacity, StyleSheet} from 'react-native';
const meo_sw = props => {
return(
<View style={styles.header}>
<Text style={styles.texto}>Meo Sudoeste</Text>
</View>
)
};
const styles=StyleSheet.create({
header:{
width:'100%',
height:90,
paddingTop:36,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center'
},
texto:{
color:'white',
fontSize: 18
}
})
export default meo_sw;
Please help me

What I would suggest is wrapping the Image in TouchableWithoutFeedback and then adding the onPress on the TouchableWithoutFeedback. https://facebook.github.io/react-native/docs/touchablewithoutfeedback

use hookrouter instead, the modern alternative to react-router: https://www.npmjs.com/package/hookrouter
...
import { useRoutes, usePath, A} from "hookrouter";
navigate('/about');
to answer OP question about navigating from image click:
...
<TouchableOpacity>
<Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image} onPress={() => navigate('/meo_sw')}/>
</TouchableOpacity>
...

You should add:
function xx({navigation}) {}
It worked for me at least!

I think there could be these issues
First pass the navigation in the function searchScreen({navigation}).
Then there is no onPress prop available in <Image> component so use onPress on <TouchableOpacity>.

React-Native: Formik ref fails to get value

I have a dummy Login code with formik form in react-native
import React, { Component } from "react";
import {
TextInput,
Text,
Alert,
Image,
View,
TouchableOpacity,
SafeAreaView,
ScrollView
} from "react-native";
import styles from "./Styles/LoginStylesheet";
import { KeyboardAccessoryNavigation } from "react-native-keyboard-accessory";
import { Formik } from "formik";
import schemaObject, { initialValues, refs } from "./Validations/LoginValidations";
export default class LoginView extends Component {
constructor(props) {
super(props);
this.state = {
activeInputIndex: 0
};
}
handleFocus = index => () => {
this.setState({
activeInputIndex: index
});
};
handleFocusNext = () => {
if (this.state.activeInputIndex + 1 >= refs.length) {
return;
}
refs[this.state.activeInputIndex + 1].focus();
};
handleFocusPrevious = () => {
if (this.state.activeInputIndex - 1 < 0) {
return;
}
refs[this.state.activeInputIndex - 1].focus();
};
handleLogin = () => {
console.log("ACTIOn");
// this.formik.handleSubmit();
};
render() {
return (
<View style={styles.safeAreaView}>
<SafeAreaView style={styles.safeAreaView}>
<ScrollView style={styles.superView}>
<Formik {/* LINE 56 */}
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
ref={p => (this.formik = p)}
>
{({
values,
handleChange,
errors,
setFieldTouched,
touched,
isValid,
handleSubmit
}) => (
<View style={styles.superView}>
<View style={styles.logoParentView}>
<Image
source={require("../../Resources/Assets/Login/aptihealth_logo.png")}
resizeMode={"contain"}
style={styles.logo}
/>
</View>
<View style={styles.emailParentView}>
<Text style={styles.titleLabel}>Email Id</Text>
<TextInput
value={values.emailId}
onChangeText={handleChange("emailId")}
onBlur={() => setFieldTouched("emailId")}
placeholder="Email Id"
style={styles.textInput}
autoCorrect={false}
onFocus={this.handleFocus(0)}
ref={input => {
refs[0] = input;
}}
/>
{touched.emailId && errors.emailId && (
<Text style={{ fontSize: 10, color: "red" }}>
{errors.emailId}
</Text>
)}
</View>
<View style={styles.passwordParentView}>
<Text style={styles.titleLabel}>Password</Text>
<TextInput
value={values.password}
onChangeText={handleChange("password")}
placeholder="Password"
onBlur={() => setFieldTouched("password")}
style={styles.textInput}
autoCorrect={false}
secureTextEntry={true}
onFocus={this.handleFocus(1)}
ref={input => {
refs[1] = input;
}}
/>
{touched.password && errors.password && (
<Text style={{ fontSize: 10, color: "red" }}>
{errors.password}
</Text>
)}
</View>
<View style={styles.forgotPasswordParentView}>
<TouchableOpacity
style={styles.forgotpasswordButton}
activeOpacity={0.7}
>
<Text>Forgot Password?</Text>
</TouchableOpacity>
</View>
<View style={styles.loginParentView}>
<TouchableOpacity
onPress={() => {
console.log("VALUES: ", values, this.formik);
this.handleLogin();
}}
style={styles.loginButton}
activeOpacity={0.7}
>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
</View>
<View style={styles.seperaterParentView}>
<View style={styles.seperaterView} />
<Text style={styles.seperaterText}>OR</Text>
<View style={styles.seperaterView} />
</View>
<View style={styles.faceIdLoginParentView}>
<Image
source={require("../../Resources/Assets/face_id_small_color/face_id_small_color.png")}
resizeMode={"contain"}
/>
<TouchableOpacity style={styles.faceIdButton}>
<Text>Sign In with Face ID</Text>
</TouchableOpacity>
</View>
<View style={styles.signUpParentView}>
<TouchableOpacity style={styles.signupButton}>
<Text>Sign Up for Account Here</Text>
</TouchableOpacity>
</View>
</View>
)}
</Formik>
</ScrollView>
</SafeAreaView>
<KeyboardAccessoryNavigation
nextDisabled={false}
previousDisabled={false}
nextHidden={false}
previousHidden={false}
onNext={this.handleFocusNext}
onPrevious={this.handleFocusPrevious}
avoidKeyboard
/>
</View>
);
}
}
I am trying to console formik ref in login action getting undefined value with debug error
ExceptionsManager.js:126 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `LoginView`.
in Formik (at LoginView.js:56)
I have no idea why it's getting undefined ??

You should take a look at this issue.
You problem is here
<Formik
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
ref={p => (this.formik = p)} {/* passing this ref will throw the error */}
>
In the latest version of Formik, they changed Formik to a functional component as explained in the issue, which gives you this error if you pass ref's.
You can check for the suggestions on the issue or wait until they release an update with the correction.
Edit:
Formik made an update and now you can use ref with the prop innerRef.
Please see this comment
You should change it to
<Formik
initialValues={initialValues}
onSubmit={values => Alert.alert(JSON.stringify(values))}
validationSchema={schemaObject}
{/* using innerRef instead of ref*/}
innerRef={p => (this.formik = p)} {/* this will give you the formik bag */}
>
And this way you can call this.formik.handleSubmit(), just lik you want to do.

React-native deep linking not working on iOS

I'd like two buttons in my customerServices component to deep link to the phone's dial and the phone's email client. However the Linking.openURL not working on iOS, just on Android. What would you recommend? I have the following code:
import React, { Component } from 'react';
import { Text, View, TouchableOpacity, StyleSheet, Image, Linking } from 'react-native';
import Container from '../../components/Container';
import { Images, Colors, FontFamily } from '../../components/Theme';
import InnerContainer from '../../components/InnerContainer';
export default class CustomerService extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<Container style={styles.container} type="mancsTRBL">
<InnerContainer style={styles.innerContainer}>
<TouchableOpacity style={styles.sideCard} onPress={() => { Linking.openURL("tel://+36201234567") }}>
<View style={styles.row}>
<Image source={Images.call} style={styles.icon} />
<View>
<Text style={styles.serviceHeader}>Customer service</Text>
<Text style={styles.serviceText}>+36 20 123 4567</Text>
</View>
</View>
</TouchableOpacity>
<TouchableOpacity style={styles.sideCard} onPress={() => { Linking.openURL("mailto:email#email.com") }}>
<View style={styles.row}>
<Image source={Images.email} style={styles.icon} />
<View>
<Text style={styles.serviceHeader}>Email </Text>
<Text style={styles.serviceText}>email#email.cc</Text>
</View>
</View>
</TouchableOpacity>
</InnerContainer>
</Container>
);
}
}