Develop Reference

React-Native (0.64.2) Formik handleSubmit onSubmit not firing

Relevant Modules:
Formik: "2.1.4"
Yup: "0.28.5"
React-Navigation v5
So i've been struggling with a simple formik problem for a day now, and I'm sure I must be missing something, but I would love some help, because I can't see what I'm doing wrong.
I have two files: Login/index.tsx & Login/LoginForm.tsx
Login/index.tsx for the most part looks like this:
const handleSubmit = async (values) => {
console.log("values submitted == ", values)
}
return (
<View style={Styles.container}>
<CircleIconButton
size={60}
backgroundColor={'white'}
onPress={goBack}
>
<Icon name={'arrow-left'} type={'FontAwesome5'} style={{ color: Colors.primaryOrange}} />
</CircleIconButton>
<Text style={[Typography.title, {color: 'white', marginTop: '30%'}]}>
Login
</Text>
<Text style={[Typography.titleDesc, {color: 'white', marginTop: '3%', marginBottom: '8%'}]}>
Securely login to your account
</Text>
<Formik
initialValues={formInitialValues}
onSubmit={handleSubmit}
>
<LoginForm />
</Formik>
</View>
)
Login/LoginForm.tsx for the most part looks like this:
const {handleChange, handleSubmit, values, isSubmitting, isValidating} = useFormikContext();
const { navigate } = useNavigation()
return (
<View style={Styles.container}>
<IVTextInput
onChangeText={handleChange('email')}
value={values?.email}
editable
fieldLabel={"Phone/Email"}
/>
<IVTextInput
isPassword
editable
containerStyle={{ marginTop: '8%', marginBottom: '15%' }}
onChangeText={handleChange('password')}
value={values?.password}
fieldLabel={"Your Password"}
/>
<RoundedButton
block
onPress={handleSubmit}
>
Log In
</RoundedButton>
<View style={{...allCenter, marginTop: '7%'}}>
<Text
style={[Typography.titleDesc, Styles.signupTextButton]}
onPress={() => navigate('Signup')}
>
Don’t have an account? Register
</Text>
<Text style={[Typography.titleDesc, {color: 'white', marginTop: '8%'}]}>
Forgot Password
</Text>
</View>
</View>
)
LoginForm is wrapped by the <Formik> tags. I then try to access the formik context in the LoginForm.tsx file.
Things i've tried:
Printing the values variables as it changes (from me typing in the textfields), and I can see that the values object is tracking my keystrokes
Printing isSubmitting & isValidating, and at no point has isSubmitting = true AND isValidating = false. when I submit isSubmitting == true and isValidating == true. The docs for Formik seem to suggest that I know when my form is submitting when isValidating == false && isSubmitting == true but that hasn't happened yet.
Creating a Yup schema, but i've also tried removing the yup schema within the <Formik> tag inside the Login/index.tsx file, either way, neither the onSubmit nor the handleSubmit funciton do anything when I tap the Login button.
Put in a simple console.log() statement to test that the action to my <RoundedButton> onPress prop is working, and it worked, my console.log() was seen in the console output.
Returning an empty object from the validate prop within the <Formik> opening tag, because the general consensus I get from looking online is that the form doesn't submit when the validation fails
Interesting Info: When I used a validationSchema, I purposely violated the validation, and when I printed errors the object was empty
The gist is . . . nothing i've tried seems to get the onSubmit or
handleSubmit functions to fire. Please let me know what I could be
doing wrong, any help would be greatly appreciated.
Thank You

Hide/shaded a react navigation screen header while function is loading

I'm trying to make a custom loading screen while my Firebase function is updating the data and avoid the user to leave the screen while loading, except that my header is still clickable and doesn't prevent the user to go back.
I tried with SafeAeraView, etc. but I didn't get any result.
The research goal illustrated:
Here is a pic of what i mean
This is how I do it:
if (taked === true) {
setTimeout(() => {
cancelDelivery();
}, 1500);
return (
<SafeAreaView style={{ flex: 1, backgroundColor: "grey",justifyContent: "center", alignItems: "center"}}>
<View style={styles.mainContainer}>
<Image style={{width: 50, height: 50}} source={require('../../assets/images/delivraide-icon-192.png')}/>
<Text style={styles.patientText}>Veuillez patientez s'il vous plaît</Text>
</View>
</SafeAreaView>
);
After the function is executed, the user is returned to the parent with the PopToTop function.

Basically what you need to do is prevent default behavior while you are updating data by adding a listener on beforeRemove event (please check this doc to know when this event is triggered). You will need to have some state variable (updatingData or whatever) and set it to true when you start the request and set it to false when request completes.
navigation.addListener('beforeRemove', (e) => {
if (updatingData) {
e.preventDefault();
}
}

QR Scanner react-native crash on second invocation

Im using react-native-qrcode-scanner from https://github.com/moaazsidat/react-native-qrcode-scanner and I read perfectly the code but when I go back to qr-scanner again it crashes.
I think it is because the camera is still working on background, there is a way to close it when it ends?

I believe you are having the same issue as this one on that github page.
And would recommend using that page to submit your problems regarding that software.

The following solution worked for navigation between Camera screen and others:
In Constructor:
this.state = {
focusedScreen: true
};
In render:
render() {
const { focusedScreen } = this.state;
if (!focusedScreen){
return <View />;
} else
{
return (
<QRCodeScanner ............
)
}

<QRCodeScanner
onRead={this.onSuccess.bind(this)}// change {this.onSuccess} to {this.onSuccess.bind(this)}
topContent={
<Text style={styles.centerText}>
Go to <Text style={styles.textBold}>wikipedia.org/wiki/QR_code</Text> on your computer and scan the QR code.
</Text>
}
bottomContent={
<TouchableOpacity style={styles.buttonTouchable}>
<Text style={styles.buttonText}>OK. Got it!</Text>
</TouchableOpacity>
}
/>

Issues with the AccessToken in the React Native FBSDK

I am having trouble with my ability to get the AccessToken in the fbsdk in React Native.
I am calling the core as suggested by Facebook:
const FBSDKCore = require('react-native-fbsdkcore');
const {
FBSDKAccessToken,
} = FBSDKCore;
And in one scenario I try to write the token in the log as suggested by a similair question stated here on SO.
<View>
<View style={{flex: 1, alignItems: 'center', padding: 50, marginTop: 250}}>
<View>
<LoginButton
publishPermissions={["publish_actions"]}
onLoginFinished={
(error, result) => {
if (error) {
alert("login has error: " + result.error);
} else if (result.isCancelled) {
alert("login is cancelled.");
} else {
FBSDKAccessToken.getCurrentAccessToken((token)=> {
console.log(token);
});
Actions.Navigator()
}
}
}
onLogoutFinished={() => {
alert("logout.")}}/>
</View>
</View>
</View>
This gives me the redscreen "undefined is not an object (evaluating the FBSDKAccessTokenInterface.getCurrentAccessToken)
Trying to pull off something similair in other parts of the app, of course defining the const FBSDKAccessToken first, then calling the userID (which should be a part of the FBSDKCore) as:
<Text style={{fontSize: 18, color:colors.General.navtext}}>{FBSDKAccessToken.userID}</Text>
Yields nothing, where I believed it to return the userID of the logged in user. Also, if I try to write out the accesstoken in that same place as:
<Text style={{fontSize: 18, color:colors.General.navtext}}>{FBSDKAccessToken.getCurrentAccessToken()}</Text>
I get the same red screen as before.
I tried to look in to the linking of libraries, but that even caused further problem.
Hence, from this, I am pretty stranded and I would really appreciate some feedback on what has gone wrong.

Try this.
console.log(token.accessToken.toString());

react-native-camera freezes app when opened 2 times via navigator

I'm using the https://github.com/lwansbrough/react-native-camera library in a view that is contained inside a simple <Navigator /> component.
Everything works as expected until you navigate back the Home view and try to reload the View with the <Camera />. There are no error messages in the console OR in Xcode which makes this extremely hard to pinpoint the problem.
When I delete the entire <Camera /> component, the navigation works as expected and the view reloads fine.
There is currently an open issue on github https://github.com/lwansbrough/react-native-camera/issues/80 but as time is of the essence, I am wondering if anyone else has found a solution to this problem and can share a fix.
standard render method:
render() {
return (
<View style={styles.outer}>
<Overlay
modalVisible={this.state.modalVisible}
/>
<Camera
ref="cam"
style={styles.container}
captureTarget={Camera.constants.CaptureTarget.disk}
type={this.state.cameraType}>
<TouchableHighlight style={styles.circlebutton} onPress={this._takePicture}>
<Text>Take Picture</Text>
</TouchableHighlight>
</Camera>
<Image
source={{uri: this.state.imageURI, isStatic:true}}
style={{width: this.state.imageURI ? 100 : 0, height: this.state.imageURI ? 100 : 0, opacity: this.state.imageURI ? 1 : 0}}
/>
</View>
);
}

Try this:
On Xcode, Go to RCTCamera.xcodeproj (This is one of the react native libraries)
In RCTCameraManager.h
Add the property
#property (nonatomic, strong) RCTCamera *camera;
In RCTCameraManager.m
- (UIView *)view
{
return [[RCTCamera alloc] initWithManager:self bridge:self.bridge];
}
Replace With:
- (UIView *)view
{
if(!self.camera){
self.camera = [[RCTCamera alloc] initWithManager:self bridge:self.bridge];
return self.camera;
}
return self.camera;
}
Hope thats help.