React functional bases props is not defined

React functional bases props is not defined - javascript

i need your helps.
I have a functional based component call WelcomeSlidePage. I want to pass a functional to the functional component. i try to console.log the function in functional component, in the first state, console.log is printing the function, but after the second state, it's becomes undefine.
this is my component that calling the functional component
WebViewPage.jsx
<Modal transparent={true} visible={this.state.WelcomeSlidePageModal} animationType="
<WelcomeSlidePage onDone={()=>{console.log('test bro');this.setState({WelcomeSlidePageModal:false})}}/>
</Modal>
and this is my functional component
WelcomeSlidePage.jsx
import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import string from '../string'
import { _storeData, _getData } from '../components/StoreAsync';
export default WelcomeSlide = (props) => {
const [language, setLanguage] = useState('english');
const [showRealApp, setShowRealApp] = useState(false);
const welcomeSlide = string.welcome_slide[language]
useEffect(() => {
console.log('testing bro',props.onDone)
// getData();
});
async function getData() {
setLanguage( await _getData("language"));
setShowRealApp( await _getData("showRealApp"));
}
_renderItem = ({ item }) => {
switch (item.key) {
case ('k4'):
return (
<View style={{backgroundColor : '#a0c83a', flex: 1}}>
<Text style={styles.title}>{item.title}</Text>
<View style={{justifyContent: 'center', paddingHorizontal: 20, flex: 1}}>
<Text style={styles.text}>{item.text_4_a}</Text>
<View style={{flexDirection: 'row'}}>
<Image style={styles.icon} source={item.icon} />
<Text style={{paddingStart: 5, paddingEnd: 20, ...styles.text}}>{item.text_4_b}</Text>
</View>
<Text style={styles.text}>{item.text_4_c}</Text>
<View style={{flexDirection: 'row'}}>
<Image style={styles.icon} source={item.icon} />
<Text style={{paddingStart: 5, paddingEnd: 20, ...styles.text}}>{item.text_4_d}</Text>
</View>
</View>
</View>
);
case ('k5'):
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.text_5}</Text>
<TouchableOpacity style={{marginVertical: 24}} onPress={()=>{ props.navigation.navigate('WebView', { url: string.onboarding[language].login_url }); }}>
<Text style={styles.button}>{item.text_5_btn1}</Text>
</TouchableOpacity>
<TouchableOpacity style={{marginVertical: 24}} onPress={()=>{ props.navigation.navigate('WebView', { url: string.onboarding[language].register_url }); }}>
<Text style={styles.button}>{item.text_5_btn2}</Text>
</TouchableOpacity>
</View>
);
default:
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.title}</Text>
<Image style={styles.image} source={item.image} />
<Text style={{paddingHorizontal: 20, ...styles.text}}>{item.text}</Text>
</View>
);
}
}
_onDone = () => {
setShowRealApp(true);
_storeData('isPassSlide',true);
props.navigation.navigate('WebView', { url: string.onboarding[language].login_url,splashScreen:false });
}
const slides = [
{
key: 'k1',
title: welcomeSlide.title,
text: welcomeSlide.a,
image: require('../images/my_library_card_white_notext_nopadding.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k2',
title: welcomeSlide.title,
text: welcomeSlide.b,
image: require('../images/my_account_white_notext_nopadding.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k3',
title: welcomeSlide.title,
text: welcomeSlide.c,
image: require('../images/library_catalog_white_notext_nopadding.png'),
backgroundColor:'#a0c83a',
},
{
key: 'k4',
title: welcomeSlide.title,
text_4_a: welcomeSlide.d_a,
text_4_b: welcomeSlide.d_b,
text_4_c: welcomeSlide.d_c,
text_4_d: welcomeSlide.d_d,
icon: require('../images/icon-hand-right.png'),
backgroundColor: '#a0c83a',
},
{
key: 'k5',
text_5: welcomeSlide.e,
text_5_btn1: welcomeSlide.e_btn1,
text_5_btn2: welcomeSlide.e_btn2,
backgroundColor:'#a0c83a',
},
];
return(
<AppIntroSlider
renderItem={_renderItem}
prevLabel={string.back[language]}
nextLabel={string.next[language]}
doneLabel={string.next[language]}
showPrevButton={true}
slides={slides}
onDone={()=>props.onDone()}/>
)
}
const styles = StyleSheet.create({
slide : {
flex: 1,
paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
paddingBottom: 80,
backgroundColor : '#a0c83a',
alignItems: 'center',
},
title: {
fontSize: 24,
color: '#fff',
fontWeight: 'bold',
textAlign: 'center',
marginTop : 30,
},
text: {
fontSize : 20,
color: '#fff',
textAlign: 'left',
},
image: {
width: 200,
height: 200,
resizeMode: 'contain',
flex:1,
},
icon: {
top: 10,
width: 25,
height: 15,
width: 25,
marginTop: -3,
},
content: {
paddingHorizontal: 20,
},
button: {
borderRadius: 8,
paddingVertical: 12,
paddingHorizontal: 12,
color: 'white',
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
marginHorizontal: 40,
backgroundColor: '#e46825',
shadowColor: '#000',
shadowOffset: { width: 0, height: 1 },
shadowOpacity: 0.8,
shadowRadius: 2,
elevation: 5,
},
});
and then this is the console log
testing bro function onDone() {
console.log('test bro');
_this2.setState({
WelcomeSlidePageModal: false
});
} b11b05fa-4e76-41da-9d58-218edc178e45:157683:15
testing bro undefined
please help me guys, thanks

Related

How to list items with the same id in Async Storage in React Native

I'm new to React native, I'm creating a online store app my problem is : when the person selects a repeated item it does not appear in the cart it just updates , I would like it to include and list in the cart this repeated item ... as I said I'm new to react native, but I believe the problem is in the listing and not in the register ...
Function add in cart in AddCart.js
const addToCart = async (id) => {
let itemArray = await AsyncStorage.getItem('cartItems');
itemArray = JSON.parse(itemArray);
if (itemArray) {
let array = itemArray;
array.push(id);
try {
await AsyncStorage.setItem('cartItems', JSON.stringify(array));
ToastAndroid.show(
'Item Added Successfully to cart',
ToastAndroid.SHORT,
);
navigation.navigate('Home');
} catch (error) {
return error;
}
} else {
let array = [];
array.push(id);
try {
await AsyncStorage.setItem('cartItems', JSON.stringify(array));
ToastAndroid.show(
'Item Added Successfully to cart',
ToastAndroid.SHORT,
);
navigation.navigate('Home');
} catch (error) {
return error;
}
}
};
MyCart.js
import React, {useState, useEffect} from 'react';
import {
View,
Text,
TouchableOpacity,
Image,
Alert
} from 'react-native';
import AsyncStorage from '#react-native-async-storage/async-storage';
const MyCart = ({navigation}) => {
const [product, setProduct] = useState();
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
getDataFromDB();
});
return unsubscribe;
}, [navigation]);
const getDataFromDB = async id =>{
let items = await AsyncStorage.getItem('cartItems');
items = JSON.parse(items);
if(items.length===0){
Alert.alert(
"Ops",
"The cart is empty",
[
{
text: "Ok",
onPress: () => navigation.navigate('Home'),
style: "cancel"
}
]
);
}else{
let productData = [];
if (items) {
Items.forEach(data => {
if (items.includes(data.id)) {
productData.push(data);
return;
}
});
setProduct(productData);
getTotal(productData);
} else {
setProduct(false);
getTotal(false);
}
}
};
const renderProducts = (data, index) => {
return (
<TouchableOpacity
key={data.key}
onPress={() => navigation.navigate('ProductInfo', {productID: data.id})}
style={{
width: '100%',
height: 100,
marginVertical: 6,
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={{
width: '30%',
height: 100,
padding: 14,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLOURS.backgroundLight,
borderRadius: 10,
marginRight: 22,
}}>
<Image
source={data.productImage}
style={{
width: '100%',
height: '100%',
resizeMode: 'contain',
}}
/>
</View>
<View
style={{
flex: 1,
height: '100%',
justifyContent: 'space-around',
}}>
<View style={{}}>
<Text
style={{
fontSize: 14,
maxWidth: '100%',
color: COLOURS.black,
fontWeight: '600',
letterSpacing: 1,
}}>
{data.productName},
</Text>
<View
style={{
marginTop: 4,
flexDirection: 'row',
alignItems: 'center',
opacity: 0.6,
}}>
<Text
style={{
fontSize: 14,
fontWeight: '400',
maxWidth: '85%',
marginRight: 4,
}}>
R$ {data.productPrice2}.00 , {data.id}
</Text>
<Text>
</Text>
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
}}>
<View
style={{
borderRadius: 100,
marginRight: 20,
padding: 4,
borderWidth: 1,
borderColor: COLOURS.backgroundMedium,
opacity: 0.5,
}}>
<MaterialCommunityIcons
name="minus"
style={{
fontSize: 16,
color: COLOURS.backgroundDark,
}}
/>
</View>
<Text>1</Text>
<View
style={{
borderRadius: 100,
marginLeft: 20,
padding: 4,
borderWidth: 1,
borderColor: COLOURS.backgroundMedium,
opacity: 0.5,
}}>
<MaterialCommunityIcons
name="plus"
style={{
fontSize: 16,
color: COLOURS.backgroundDark,
}}
/>
</View>
</View>
<TouchableOpacity onPress={() => removeItemFromCart(data.id)}>
<MaterialCommunityIcons
name="delete-outline"
style={{
fontSize: 16,
color: COLOURS.backgroundDark,
backgroundColor: COLOURS.backgroundLight,
padding: 8,
borderRadius: 100,
}}
/>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
);
};
return (
<View> {product ? product.map(renderProducts) : null} </View>
);
};
export default MyCart;
I would be grateful to help me

Is there any other way I can call the verify function to makeWithdraw

Good day guys, I've been stuck with react native, I have a withdrawal screen that navigates to transactionPin screen, I have a not so wonderful custom onScreen keyboard, that only accepts maximum of 4 input. I am checking if length equals 4, the verify function will trigger and perform any of the transfer or makeWithdraw, but it results in Maximum depth... looping, how do I rewrite this, please. Below is my code. I appreciate any help greatly.
withdrawScreen.js
import React, { Component } from "react";
import { Text, View, StyleSheet, SafeAreaView, StatusBar, Image, TouchableOpacity, ScrollView, TextInput, ActivityIndicator } from "react-native";
import { withNavigation } from "react-navigation";
import * as Yup from 'yup';
import { Colors, Sizes } from "../../constant/styles";
import { MaterialIcons, MaterialCommunityIcons, Feather } from '#expo/vector-icons';
import Swipeable from 'react-native-gesture-handler/Swipeable';
import AppForm from "../../component/appForm";
import AppFormField from "../../component/appFormField";
import AppButton from "../../component/appButton";
import dashApi from "../../api/dashApi";
import Loader from "../../component/Loader";
import TransactionPinScreen from "./transactionPinScreen";
const validationSchema = Yup.object().shape({
withdrawal_method: Yup.object().required('Select withdrawal method'),
authorization_mode: Yup.object().required('Select verification type')
});
const initialState = {
initialState: 0,
text: '',
withdrawalMethod: [{ label: 'Select withdrawal method', value: '-', disabled: true }],
authorizationMode: [{ label: 'Select authorization mode', value: '-', disabled: true }],
initialLoading: false,
withdrawMethodDesc: '',
verification: '',
withdrawalWindow: {},
}
class WithdrawScreen extends Component {
componentDidMount() {
this.getWithdrawalData();
}
componentWillUnmount() {
this.setState(initialState);
}
constructor(props) {
super(props);
this.state = initialState;
// this.makeWithdraw = this.makeWithdraw.bind(this);
};
getWithdrawalData = async () => {
this.setState({ initialLoading: true });
const result = await dashApi.withdrawalData();
if (result.status == 200) {
let withdrawalMethod = [];
let authorizationMode = [];
result.data.withdrawal_method.map(e => withdrawalMethod.push({ label: e.name, value: e.name, ...e }));
result.data.authorization_mode.map(e => authorizationMode.push({ label: e.text, ...e }));
this.setState({ initialLoading: false });
this.setState({ withdrawalMethod: [...this.state.withdrawalMethod, ...withdrawalMethod] });
this.setState({ authorizationMode: [...this.state.authorizationMode, ...authorizationMode] });
this.setState({ withdrawalWindow: result.data.withdrawal_window })
}
else if (result.status == 401) {
this.setState({ errorText: result.data.message });
this.setState({ initialLoading: false });
}
else {
this.setState({ initialLoading: false });
this.setState({ errorText: 'Network Error' })
}
};
onPress1 = () => {
this.setState({ text: this.state.text + '1' })
}
onPress2 = () => {
this.setState({ text: this.state.text + '2' })
}
onPress3 = () => {
this.setState({ text: this.state.text + '3' })
}
onPress4 = () => {
this.setState({ text: this.state.text + '4' })
}
onPress5 = () => {
this.setState({ text: this.state.text + '5' })
}
onPress6 = () => {
this.setState({ text: this.state.text + '6' })
}
onPress7 = () => {
this.setState({ text: this.state.text + '7' })
}
onPress8 = () => {
this.setState({ text: this.state.text + '8' })
}
onPress9 = () => {
this.setState({ text: this.state.text + '9' })
}
onPress0 = () => {
this.setState({ text: this.state.text + '0' })
}
onPressDecimal = () => {
this.setState({ text: this.state.text + '.' })
}
onPressBackspace = () => {
let text = this.state.text.slice(0, this.state.text.length - 1);
this.setState({ text: text })
}
render() {
return (
<SafeAreaView style={styles.screenContainer}>
<StatusBar backgroundColor={Colors.backgroundColor} barStyle="dark-content" />
<View>
{this.header()}
<ScrollView showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false} style={{ marginBottom: 50 }}>
{this.state.initialState == 0 ?
<View>
{this.withdrawalMethod()}
<Loader loading={this.state.initialLoading} />
</View>
:
<View>
{this.transferDetCard()}
{this.inputAmountLine()}
{this.buttonKeyboardMode()}
{this.swiper()}
</View>
}
</ScrollView>
</View>
</SafeAreaView>
)
}
header() {
return (
<View>
<View style={[styles.flex, { alignItems: 'center' }]}>
<TouchableOpacity style={[styles.flex, { justifyContent: 'center', alignItems: 'center' }]} onPress={() => this.props.navigation.goBack()}>
<MaterialIcons name="keyboard-arrow-left" size={35} color="black" />
<Text style={styles.textStyle}>Withdraw</Text>
</TouchableOpacity>
</View>
</View>
)
}
transferDetCard() {
return (
<View style={[styles.trnsferDetCard, styles.flex]}>
<View style={styles.flex}>
<Image source={require('../../assets/images/dashboard/avatar.jpg')} style={styles.userImage} />
<View style={{ paddingHorizontal: 15, alignSelf: 'center' }}>
<Text style={{ fontWeight: '700', fontSize: 20, lineHeight: 24 }}>Ann</Text>
<View style={[styles.flex, { alignItems: 'center' }]}>
<Feather name="credit-card" size={24} color="black" />
<View style={[styles.flex, { alignItems: 'center', paddingHorizontal: 7 }]}>
<Image source={require('../../assets/images/dashboard/ellipsisFour.png')} style={{ tintColor: 'black' }} />
<Text style={{ paddingHorizontal: 7 }}>
6301
</Text>
</View>
</View>
</View>
</View>
<View style={{ alignSelf: 'center' }}>
<MaterialIcons name="keyboard-arrow-down" size={35} color="black" />
</View>
</View>
)
}
inputAmountLine() {
return (
<View style={styles.inputAmount}>
<Text style={this.state.text != '' ? [{ left: 5 }, styles.inputIcon] : [{ left: 110 }, styles.inputIcon]}>₦</Text>
<TextInput
style={this.state.text != '' ? [styles.input, { width: '90%' }] : [{ width: '100%' }, styles.input]}
placeholder="0.00"
value={this.state.text}
underlineColorAndroid="transparent"
placeholderTextColor={'#E5E5E5'}
showSoftInputOnFocus={false}
autoFocus
caretHidden={true}
/>
</View>
)
}
buttonKeyboardMode() {
return (
<View style={{ padding: 20 }}>
<View style={[styles.flex, { marginBottom: 15 }]}>
<TouchableOpacity style={styles.keys} onPress={this.onPress1}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress2}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>2</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress3}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>3</Text>
</TouchableOpacity>
</View>
<View style={[styles.flex, { marginBottom: 15 }]}>
<TouchableOpacity style={styles.keys} onPress={this.onPress4}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>4</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress5}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>5</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress6}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>6</Text>
</TouchableOpacity>
</View>
<View style={[styles.flex, { marginBottom: 15 }]} onPress={this.onPress7}>
<TouchableOpacity style={styles.keys} onPress={this.onPress7}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>7</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress8}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>8</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress9}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>9</Text>
</TouchableOpacity>
</View>
<View style={[styles.flex, { marginBottom: 15 }]}>
<TouchableOpacity style={styles.keys} onPress={this.onPressDecimal}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>.</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress0}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>0</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPressBackspace}>
<Feather name="delete" size={24} color="black" />
</TouchableOpacity>
</View>
</View>
)
}
swiper() {
const LeftSwipeActions = () => {
return (
<View
style={{
flex: 1, backgroundColor: '#fff7da',
borderRadius: 35, justifyContent: 'center'
}}
>
</View>
);
};
const swipeFromLeftOpen = () => {
this.props.navigation.navigate('TransactionPin', { withdraw_method: this.state.withdrawMethodDesc.id, verification: this.state.verification.value, amount: this.state.text, window_status: this.state.withdrawalWindow.status, type: "withdraw" });
this.setState({ initialState: false });
};
let color = '';
return (
<Swipeable
renderLeftActions={LeftSwipeActions}
onSwipeableLeftWillOpen={swipeFromLeftOpen}
>
<View
style={{
backgroundColor: color == '' ? '#fff7da' : color,
borderRadius: 35,
flex: 0,
flexDirection: 'row',
alignItems: 'center'
}}
>
<View style={[styles.flex, styles.yellowSwiper]}>
<Image source={require('../../assets/images/dashboard/Rectangle431.png')} />
<Image source={require('../../assets/images/dashboard/Rectangle432.png')} />
<Image source={require('../../assets/images/dashboard/Rectangle433.png')} />
</View>
<Text style={{ fontSize: 20, fontWeight: 'bold', textTransform: 'uppercase', left: 50 }}>
Swipe to pay
</Text>
</View>
</Swipeable>
)
}
withdrawalMethod() {
return (
<View style={{ flex: 0, height: 570.40, backgroundColor: Colors.backgroundColor, margin: Sizes.fixPadding * 1.0, borderRadius: 20 }}>
<View style={{ padding: Sizes.fixPadding * 6.0 }}>
<Text style={styles.title}>
Select a Withdrawal Method
</Text>
</View>
<View>
<AppForm initialValues={{ withdrawal_method: '', authorization_mode: '' }} onSubmit={() => this.setState({ initialState: 1 })} validationSchema={validationSchema}>
<AppFormField dropDown={true} textValue={'Withdrawal Method'} name="withdrawal_method"
items={this.state.withdrawalMethod}
defaultValue={'-'}
disabled={this.state.initialLoading ? true : false}
onChange={(e) => this.setState({ withdrawMethodDesc: e })}
containerStyle={{ height: 60 }}
style={{ backgroundColor: Colors.backgroundColor, borderColor: '#adadad' }}
itemStyle={{
justifyContent: 'flex-start'
}}
dropDownStyle={{ backgroundColor: '#fafafa' }}
/>
{
this.state.withdrawMethodDesc != '' ?
<Text style={styles.methodDescription}>
Withdrawal Limit: {this.state.withdrawMethodDesc.min_limit} - {this.state.withdrawMethodDesc.max_limit} NGN,{'\n'}
Charge: {this.state.withdrawMethodDesc.charge} NGN
</Text>
:
null
}
<AppFormField dropDown={true} textValue={'Authorization mode'} name="authorization_mode"
items={this.state.authorizationMode}
defaultValue={'-'}
disabled={this.state.initialLoading ? true : false}
onChange={(e) => this.setState({ verification: e })}
containerStyle={{ height: 60 }}
style={{ backgroundColor: Colors.backgroundColor, borderColor: '#adadad' }}
itemStyle={{
justifyContent: 'flex-start'
}}
dropDownStyle={{ backgroundColor: '#fafafa' }}
/>
<AppButton text={'proceed'} />
</AppForm>
</View>
</View>
)
}
}
WithdrawScreen.navigationOptions = () => {
return {
header: () => null
}
}
export default withNavigation(WithdrawScreen);
const styles = StyleSheet.create({
flex: {
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between'
},
trnsferDetCard: {
justifyContent: 'center',
backgroundColor: '#f4f2f6',
borderRadius: 20,
paddingVertical: 10,
paddingHorizontal: 20,
width: '100%',
height: 100,
marginVertical: 10,
},
screenContainer: {
flex: 1,
padding: 5,
backgroundColor: 'white'
},
textStyle: {
fontSize: 34,
fontWeight: 'bold',
color: '#476355'
},
userImage: { height: 70, width: 70, borderRadius: 27 },
inputAmount: {
flex: 0,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
inputIcon: {
color: "#E5E5E5",
fontSize: 45,
fontWeight: '600',
zIndex: 1
},
input:
{
height: 70,
borderBottomWidth: 1,
borderBottomColor: '#E5E5E5',
textAlign: 'center',
fontSize: 50,
fontWeight: '700',
textDecorationLine: 'none'
}
,
yellowSwiper: { width: 70, height: 70, borderRadius: 70, backgroundColor: '#fdd544', lineHeight: 70, alignItems: 'center', justifyContent: 'space-around', padding: 10 },
keys: { height: 71, width: 71, borderRadius: 71, borderWidth: 1, justifyContent: 'center', alignItems: 'center', borderColor: '#f4f6f5' },
title: { fontSize: 16, fontWeight: '500' },
methodDescription: {
color: Colors.dangerColor,
marginTop: -25,
paddingHorizontal: 20,
marginBottom: 35,
lineHeight: 25,
}
});
And this is the transactionPin screen
transactionPinScreen.js
import React, { Component } from "react";
import { Image, Text, View, StyleSheet, SafeAreaView, StatusBar, TouchableOpacity, TextInput, Dimensions, BackHandler } from "react-native";
import { withNavigation } from "react-navigation";
import { MaterialIcons, Feather } from '#expo/vector-icons';
import { Colors, Fonts, Sizes } from "../../constant/styles";
import TransferComplete from "../../component/transferComplete";
import dashApi from "../../api/dashApi";
import toast from "../../component/toaster";
import Loader from "../../component/Loader";
const { height, width } = Dimensions.get('screen');
let processing = false;
class TransactionPinScreen extends Component {
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.handleBackButton.bind(this));
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton.bind(this));
}
componentDidUpdate(prevProps) {
if (this.state.text.length == 4) {
(this.state.text)
? this.verify()
: console.log("Focused");
}
}
handleBackButton = () => {
this.props.navigation.pop();
return true;
};
onPress1 = () => {
this.pin('1')
}
onPress2 = () => {
this.pin('2')
}
onPress3 = () => {
this.pin('3')
}
onPress4 = () => {
this.pin('4')
}
onPress5 = () => {
this.pin('5')
}
onPress6 = () => {
this.pin('6')
}
onPress7 = () => {
this.pin('7')
}
onPress8 = () => {
this.pin('8')
}
onPress9 = () => {
this.pin('9')
}
onPress0 = () => {
this.pin('0')
}
onPressBackspace = () => {
let text = this.state.text.slice(0, this.state.text.length - 1);
this.setState({ text: text })
}
pin(val) {
this.state.text.length != 4 ? this.setState({ text: this.state.text + val }) : null;
}
constructor(props) {
super(props)
this.state = {
text: '',
completeScreen: false,
processing: processing ?? false,
};
this.verify = this.verify.bind(this)
}
verify = () => {
// For Withdrawal code is 2, Transfer is 1;
var pinLenght = this.state.text.length;
// console.log(pinLenght, this.state.text, this.props.navigation.state.params);
if (pinLenght == 4) {
console.log(this.state.text);
const data = {
...this.props.navigation.state.params ?? null,
pin: this.state.text,
}
data.type == 'withdraw' ? this.makeWithdraw(data)
: this.transfer(data);
}
}
makeWithdraw = async (data) => {
console.log('prod');
this.setState({ processing: true });
const result = await dashApi.withdrawal(data);
if (result.status == 200) {
this.setState({ processing: false });
this.setState({ completeScreen: 1 });
}
else if (result.status == 401 || result.data.data == null) {
// this.setState({ errorText: result.data.message });
toast('red', result.data.message);
this.setState({ processing: false });
}
else {
this.setState({ processing: false });
// this.setState({ errorText: 'Network Error' })
}
console.log(result);
}
transfer = async (data) => {
// this.setState({ processing: true });
const result = await dashApi.transfer(data);
let output;
if (result.status == 200) {
// output = {success: 200};
this.setState({ processing: false });
this.setState({ completeScreen: 1 });
}
else if (result.status == 401) {
// output = {error: result.data.message};
this.setState({ outputText: { error: result.data.message } });
this.setState({ processing: false });
}
else if (result.status == 422) {
// output = {error: result.data.message}
this.setState({ outputText: 'Network output' })
}
let finale = { output: output }
console.log(finale, result);
return finale;
}
render() {
return (
<View>
<SafeAreaView style={this.state.completeScreen == true ? [{ backgroundColor: 'white', flex: 1, alignSelf: "center", alignItems: 'center' }] : styles.screenContainer}>
<StatusBar backgroundColor={Colors.backgroundColor} barStyle="dark-content" />
{
this.state.completeScreen == false ?
<View>
{this.iconText()}
{this.buttonKeyboardMode()}
</View>
:
<View>
<TransferComplete showing={true} onPress={() => this.props.navigation.navigate('Dashboard')} buttonText="Done" subtitle="Your transaction is processing. Payment is usually completed within a minute." />
</View>
}
</SafeAreaView>
</View>
)
}
iconText() {
return (
<View style={{ justifyContent: 'center', alignItems: 'center', paddingTop: 50 }}>
<Image source={require('../../assets/images/dashboard/fingerPrint.png')} style={styles.fingerTip} />
<Text>enter pin code or use fingerprint</Text>
<Loader loading={this.state.processing} />
<View style={styles.searchSection}>
<TouchableOpacity style={styles.searchIcon} onPress={() => this.onPressBackspace()} >
<MaterialIcons name="backspace" size={24} color="black" />
</TouchableOpacity>
<TextInput
style={styles.input}
value={this.state.text}
secureTextEntry
// onChange={() => this.verify()}
maxLength={4}
underlineColorAndroid="transparent"
showSoftInputOnFocus={false}
autoFocus
caretHidden={true}
/>
</View>
</View>
)
}
buttonKeyboardMode() {
return (
<View style={{ paddingHorizontal: 40, paddingTop: 20, paddingBottom: 50 }}>
<View style={[styles.flex, { marginBottom: 15 }]}>
<TouchableOpacity style={styles.keys} onPress={this.onPress1}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>1</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress2}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>2</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress3}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>3</Text>
</TouchableOpacity>
</View>
<View style={[styles.flex, { marginBottom: 15 }]}>
<TouchableOpacity style={styles.keys} onPress={this.onPress4}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>4</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress5}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>5</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress6}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>6</Text>
</TouchableOpacity>
</View>
<View style={[styles.flex, { marginBottom: 15 }]} >
<TouchableOpacity style={styles.keys} onPress={this.onPress7}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>7</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress8}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>8</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.keys} onPress={this.onPress9}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>9</Text>
</TouchableOpacity>
</View>
<View style={[styles.flex, { marginBottom: 15, alignSelf: 'center' }]}>
<TouchableOpacity style={styles.keys} onPress={this.onPress0}>
<Text style={{ fontSize: 30, fontWeight: 'bold' }}>0</Text>
</TouchableOpacity>
</View>
</View>
)
}
completeScreen() {
// console.log(height, width);
return (
<View style={[styles.flex, { justifyContent: 'center', top: 250 }]}>
<View style={{ width: 100, height: 100, borderRadius: 100, backgroundColor: 'yellow', justifyContent: 'center', alignItems: 'center' }}>
<MaterialIcons name="check" size={80} color="white" />
</View>
</View>
)
}
export default withNavigation(TransactionPinScreen);
const styles = StyleSheet.create({
flex: {
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between'
},
screenContainer: {
flex: 0,
padding: 5,
backgroundColor: 'white',
},
fingerTip: { tintColor: '#83968c', width: 58.37, height: 56.73, marginBottom: 45.7 },
searchSection: {
flex: 0,
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#fff',
marginVertical: 20,
},
searchIcon: {
position: 'absolute',
left: 240,
zIndex: 1
},
input:
{ width: 284, borderRadius: 10, backgroundColor: '#f7f7f7', textAlign: 'center', fontSize: 50, fontWeight: '700' }
,
keys: { height: 71, width: 71, borderRadius: 71, borderWidth: 1, justifyContent: 'center', alignItems: 'center', borderColor: '#f4f6f5' },
});

Camera not displaying after reloading app or running npx react-native start for the 2nd time

I have implemented tensor-flow camera functionalities for pose detection on a website and then hosted it on netlify. Link: https://uactivsite-mobile.netlify.app/.Also github link of the same: https://github.com/viveksgonal/uactivsite/blob/main/src/App.js
I am using this as webview on react-native app. The first time the app builds perfectly and the camera starts. But whenever I try to reload it or run npx react-native start the second time, the camera never opens.
If anyone knows where I'm going wrong, it would be pleasure if you provide the solution. Thank you.
Code is attached below for the react-native app part:
/* eslint-disable react-native/no-inline-styles */
import React, { useRef, useState } from 'react';
const exercises = [
{
name: 'High Knees',
total: 20,
index: 0
},
{
name: 'Jumping Jacks',
total: 25,
index: 1
},
{
name: 'Squats',
total: 20,
index: 2
},
]
import WebView from 'react-native-webview'
import {
View,
StyleSheet,
Text,
Image,
TouchableWithoutFeedback,
Modal
} from 'react-native';
import { useNavigation } from '#react-navigation/native';
const ExerciseCamera = () => {
const webviewRef = useRef(null)
const navigation = useNavigation();
const [speed, setSpeed] = useState(0)
const [reps, setReps] = useState(0)
const ex = 1
function getInjectableJSMessage(message) {
return `
(function() {
window.dispatchEvent(new MessageEvent('message', {
data: ${JSON.stringify(message)}
}));
})();
`;
}
function onMessage(data) {
let val = JSON.parse(data.nativeEvent.data)
if (val.type === 'reps') {
setReps(val.data.rep)
if (val.data.speed !== 0) {
setSpeed(val.data.speed)
}
}
else if (val.type === 'completed') {
navigation.navigate('dashboard', {
screen: 'completeddailyexercise',
});
}
else {
console.log(val.data.rep)
}
}
function sendDataToWebView(msg) {
webviewRef.current.injectJavaScript(
getInjectableJSMessage(msg)
);
}
return (
<View style={styles.container}>
<Modal
transparent={true}
visible={true}
>
<View style={styles.top_container}>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate('dashboard', {
screen: 'completeddailyexercise',
});
}}>
<Image
style={styles.icons_container}
source={require('../../Assets/play.png')}
/>
</TouchableWithoutFeedback>
<View style={styles.exercise_name_container}>
<Text style={styles.exercise_name}>Side lunges</Text>
</View>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate('dashboard', { screen: 'dailychallange' });
}}>
<View style={styles.icons_container}>
<Image
style={styles.icon}
source={require('../../Assets/close.png')}
/>
</View>
</TouchableWithoutFeedback>
</View>
<View style={styles.bottom_container}>
<View style={styles.timer_container}>
<Text style={styles.timer_text}>02:47</Text>
</View>
{reps > 0 ? (
<View
style={[
styles.number_container,
{ justifyContent: speed > 0 ? 'space-between' : 'center' },
]}>
{speed > 0 ? <Text style={styles.number}>{speed} RS</Text> : null}
<Text style={styles.number}>{reps}/{exercises[ex].total}</Text>
</View>
) : null}
</View>
</Modal>
<WebView
ref={webviewRef}
mediaPlaybackRequiresUserAction={false}
source={{ uri: 'https://uactivsite-mobile.netlify.app/' }}
scalesPageToFit={false}
mixedContentMode="compatibility"
onMessage={onMessage}
onLoad={event => {
sendDataToWebView({
data: exercises[ex],
type: 'exercise'
})
}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: { flex: 1 },
preview: {
flex: 1,
},
top_container: {
zIndex: 1,
position: 'absolute',
top: 43,
paddingHorizontal: 20,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: '100%',
},
bottom_container: {
zIndex: 1,
position: 'absolute',
bottom: 0,
width: '100%',
},
number: { color: 'white', fontSize: 28 },
exercise_name_container: {
height: 40,
width: 155,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: 'rgba(255,255,255,0.2)',
},
number_container: {
height: 62,
backgroundColor: 'black',
width: '100%',
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 19,
},
timer_container: {
width: '100%',
height: 78,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
backgroundColor: 'rgba(255,255,255,0.45)',
alignItems: 'center',
},
timer_text: { color: 'black', fontSize: 48, fontFamily: 'Poppins-Bold' },
icons_container: {
height: 40,
width: 40,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 50,
backgroundColor: 'rgba(255,255,255,0.8)',
},
icon: { width: 16, height: 16, resizeMode: 'contain' },
exercise_name: { color: 'black', fontFamily: 'Poppins-SemiBold', fontSize: 23 },
});
export default ExerciseCamera;

Map a child property of an object in an array in React Native

I try to list items that are loaded using the google places API. I receive the standard values without difficulty and are neatly read in the 'folder' function such as item.name, but I also want to use the photos. if in my 'componentWillMount' console.log (this.state.drinks [0] .photos [0] .photo_reference); ' output I get the right value. However, I cannot do this in the folder function. there I get the eroor: 'TypeError: undefined is not an object (evaluating' items.photos [0] ')'
My question is whether anyone knows how to manage a child of an object in the map function? I have to have the property 'Photos' in the object the property 'photo_reference'.
my code:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, Button, ScrollView, ImageBackground, Dimensions} from 'react-native';
import { Avatar, ListItem,Tile } from 'react-native-elements';
import firebase from 'react-native-firebase';
import Icon from 'react-native-vector-icons/FontAwesome';
import Slideshow from 'react-native-image-slider-show';
const initialLayout = { width: Dimensions.get('window').width };
class horecaScreen extends Component {
constructor(props){
super(props);
this.state = {
position: 1,
interval: null,
dataSource: [
{
title: 'Restaurant Rijk Van Margraten',
caption: 'Bemelerweg 99, Cadier en Keer',
url: 'https://firebasestorage.googleapis.com/v0/b/adventure-time-21e7c.appspot.com/o/dummy-eijsden.jpg?alt=media&token=87534c11-1280-4f54-a273-9f23225f9ab7',
}, {
title: 'Golfbaan het Rijk van Margraten',
caption: 'Bemelerweg 99, Cadier en Keer',
url: 'https://firebasestorage.googleapis.com/v0/b/adventure-time-21e7c.appspot.com/o/golfbaan-eijsden-margraten.jpg?alt=media&token=1cf1d9bf-5b63-4b51-8f68-1dd3df870af4',
}, {
title: 'Restaurant Rijk Van Margraten',
caption: 'Bemelerweg 99, Cadier en Keer',
url: 'https://firebasestorage.googleapis.com/v0/b/adventure-time-21e7c.appspot.com/o/dummy-eijsden.jpg?alt=media&token=87534c11-1280-4f54-a273-9f23225f9ab7',
},
],
drinks: [],
}
}
getUserData = (user) => {
console.log(user);
let ref = firebase.database().ref('Users/' + user);
ref.on('value' , snapshot =>{
var state = snapshot.val();
this.setState({
index: 0,
routes:[
{key: 'first', title: 'First'},
{key: 'second', title: 'Second'}
]
})
})
}
photosPlaces = [];
drinksPlaces = [];
componentWillMount(){
let user = firebase.auth().currentUser;
console.log(user);
this.getUserData(user.uid);
let url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=50.97648620605469,5.780409336090088&radius=2000&type=bar&key=<API KEY>';
fetch(url)
.then((response) => response.json())
.then((JsonResponse) => {
// console.error(JsonResponse)
console.log(JsonResponse.results)
this.setState({
drinks: JsonResponse.results,
})
//console.log(this.state.drinks[0].photos[0].photo_reference);
})
.catch((error) => {
alert('error')
});
}
render() {
return (
<ScrollView style={styles.container}>
<Slideshow
dataSource={this.state.dataSource}
position={this.state.position}
onPositionChanged={position => this.setState({ position })}
titleStyle={{color: 'white', fontWeight: 'bold'}}
captionStyle={{color: 'white'}}
arrowSize={0}
onPress={({ index }) => this.props.navigation.navigate('HorecaDetail', {indexID: index})}
/>
<View style={styles.Tiles}>
<View style={styles.activity}>
<Text style={styles.activityText}>Iets drinken in de buurt?</Text>
<ScrollView horizontal={true}>
{
this.state.drinks.length > 0 && this.state.drinks.map((item, i) =>(
<View style={styles.listRow}>
<ImageBackground source={{uri:'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=' + item.photos[0].photo_reference + '&key=<API KEY>'}} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10, borderRadius: 250 }}>
<Text style={styles.insideText}>{item.name}</Text>
</ImageBackground>
</View>
))
}
</ScrollView>
</View>
</View>
<View style={styles.Tiles}>
<View style={styles.activity}>
<Text style={styles.activityText}>Iets eten in de buurt?</Text>
<ScrollView horizontal={true}>
<View style={styles.listRow}>
<View style={styles.LeftColumn}>
<ImageBackground source={require('../assets/images/all/dummy-location.png')} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10, borderRadius: 250 }}>
<Text style={styles.insideText}>Bedrijf A</Text>
</ImageBackground>
</View>
<View style={styles.RightColumn}>
<ImageBackground source={require('../assets/images/all/dummy-location.png')} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10 , marginLeft: 5,}}>
<Text style={styles.insideText}>Bedrijf B</Text>
</ImageBackground>
</View>
</View>
<View style={styles.listRow}>
<View style={styles.LeftColumn}>
<ImageBackground source={require('../assets/images/all/dummy-location.png')} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10, borderRadius: 250 }}>
<Text style={styles.insideText}>Bedrijf A</Text>
</ImageBackground>
</View>
<View style={styles.RightColumn}>
<ImageBackground source={require('../assets/images/all/dummy-location.png')} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10 , marginLeft: 5,}}>
<Text style={styles.insideText}>Bedrijf B</Text>
</ImageBackground>
</View>
</View>
</ScrollView>
</View>
</View>
<View style={styles.bottomSpace}>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
profileName:{
fontWeight: 'bold',
fontSize: 22,
marginTop: 20,
},
list:{
marginTop: 40,
width: '100%'
},
scene: {
flex: 1,
},
listRow:{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
alignItems: 'flex-start',
paddingTop: 10,
marginTop: -20,
marginRight: 10
},
LeftColumn:{
width: '50%',
borderRadius: 250
},
RightColumn:{
width: '50%',
},
Tiles:{
padding: 10,
marginTop: 20
},
insideText:{
color: 'white',
bottom: 0,
alignContent: 'flex-end',
fontWeight: 'bold'
},
bottomSpace:{
padding: 10,
marginTop: 30
},
Slideshow:{
color: 'white'
},
activityText:{
fontWeight: 'bold',
fontSize: 18,
marginBottom: 10,
},
iconOverview:{
fontSize: 15,
paddingRight: 120
}
})
export default horecaScreen;
the output from the fetch:

ComponentWillMount() lifecycle method is deprecated and is unsafe to use.
Use ComponentDidMount() instead.
Coming to your error:
'TypeError: undefined is not an object (evaluating' items.photos [0] ')'
Try doing:
{
this.state.drinks.length > 0 && this.state.drinks.map((item, i) =>(
<View style={styles.listRow}>
<ImageBackground source={{uri:'https://maps.googleapis.com/maps/api/place/photo?maxwidth=400&photoreference=' + item.photos[0].photo_reference + '&key=MY_API_KEY'}} style={{width: 140, height: 200, justifyContent: 'flex-end',paddingBottom: 10, paddingLeft: 10, borderRadius: 250 }}>
<Text style={styles.insideText}>{item.name}</Text>
</ImageBackground>
</View>
))
}

Unable to navigate to a different component on button click - React-Native Navigator

var
{Text,View,TextInput,TouchableWithoutFeedback,Image,ToastAndroid,Platform,NavigatorIOS,Navigator} = React;
var MainActivity = require('./MainActivity');
class LoginScreen extends React.Component {
Login(){
return <Navigator
initialRoute={{name: 'MainActivity', component: MainActivity, index: 0}}
renderScene={(route, navigator) => {
return React.createElement(<MainActivity />);
}} />
}
I am trying to make this work. After clicking on login button, it should go to the main activity. So LoginScreen.js onClick MainActivity.js.
My github project for you to check for more reference. Please help.

I just looked at your code. It looks like you need to set up your initial route as a navigator component. I've fixed it and am pasting the code below. The two files that need to be fixed are index.ios.js, and LoginScreen.js.:
index.ios.js
'use strict';
var React = require('react-native');
var {Text,View,TextInput,Navigator, Navigator} = React;
var LoginScreen = require('./LoginScreen');
var MainActivity = require('./MainActivity');
class Trabble extends React.Component {
render() {
return (
<Navigator
style={{flex:1}}
initialRoute={{name: 'LoginScreen', component: LoginScreen, index: 0}}
renderScene={(route, navigator) => {
return React.createElement(route.component, {navigator});
}} />
)
}
}
var Styles = React.StyleSheet.create({
loginText: {
fontSize: 50,
color: "blue",
marginTop: 100,
alignSelf: "center"
},
usernameText: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginTop: 10
},
passwordText: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginTop: 10
}
});
React.AppRegistry.registerComponent('Trabble', function() { return Trabble });
LoginScreen.js:
'use strict';
var React = require('react-native');
var {Text,View,TextInput,TouchableWithoutFeedback,Image,ToastAndroid,Platform,NavigatorIOS,Navigator} = React;
var MainActivity = require('./MainActivity');
class LoginScreen extends React.Component {
login() {
this.props.navigator.push({
component: MainActivity
})
}
render() {
return(
<View style={styles.loginView}>
<Image style={styles.image} source={require('./Ionic.png')}/>
<Text style={styles.loginText}>Chat System</Text>
<TextInput style={styles.usernameText} placeholder="username" placeholderTextColor="black"></TextInput>
<TextInput style={styles.passwordText} placeholder="password" placeholderTextColor="black" secureTextEntry></TextInput>
<TouchableWithoutFeedback onPress={ () => this.login() }>
<View style={styles.loginButton}>
<Text style={styles.loginButtonText}>Smit is smart</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback>
<View style={styles.signUpButton}>
<Text style={styles.signUpButtonText}>Sign Up</Text>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={ () => this.login() }>
<View>
<Text style={styles.forgetPasswordText}>Forgot password?</Text>
</View>
</TouchableWithoutFeedback>
</View>)
}
}
var styles = React.StyleSheet.create({
image:{
height: 150,
alignSelf: "center",
marginTop: 50,
opacity: 1
},
loginView:{
backgroundColor: "#FA8A3A",
flex: 1
},
loginText: {
fontSize: 50,
color: "white",
marginTop: 10,
alignSelf: "center"
},
usernameText: {
height: 40,
color: 'black',
borderColor: 'gray',
borderWidth: 1,
marginTop: 10
},
passwordText: {
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginTop: 10
},
loginButtonText:{
alignSelf: 'center',
fontSize: 20,
color: 'white'
},
loginButton:{
marginTop: 10,
height: 30,
backgroundColor: 'blue'
},
signUpButtonText:{
alignSelf: 'center',
fontSize: 20,
color: 'white'
},
signUpButton:{
marginTop: 10,
height: 30,
backgroundColor: 'grey'
},
forgetPasswordText:{
fontSize: 10,
alignSelf: 'center',
marginTop: 10
}
});
module.exports = LoginScreen;
I've also submitted a pull request to you with the fixed code.

Develop Reference

JavaScript is the programming language of the Web.

React functional bases props is not defined - javascript

Related

How to list items with the same id in Async Storage in React Native

Is there any other way I can call the verify function to makeWithdraw

Camera not displaying after reloading app or running npx react-native start for the 2nd time

Map a child property of an object in an array in React Native

Unable to navigate to a different component on button click - React-Native Navigator

Categories

Resources