react-native-modal-dropdown is only displaying 9 values - react-native

react-native-modal dropdown only displays 9 values than when I select any value and open the dropdown again it shows me remaining values I have tried this solution
stackoverflow.com/q/68266570/10619360 but its not working you can check the images
<ModalDropdown
ref={dropdown}
style={{ width: '100%' }}
showsVerticalScrollIndicator={false}
options={["Lottes", "Stelzer", "Puchtler", "Reichel", "Hühnermobil", "Simplebakery", "Ruckdeschel", "Seidel", "Bloß", "Wunderlich", "Edeka", "Harles"]}
onSelect={(index, val) => (setValue(val), setError(null))}
renderRow={(rowData, rowID) => renderDropDownList(rowData)}
dropdownStyle={{
marginTop: 0.5,
width: '75%',
borderRadius: 10,
borderWidth: 0,
elevation: 3,
overflow: 'hidden',
}}
>
<Pressable
onPress={() => dropdown.current?.show()}
style={{ marginTop: 40 }}>
<View style={{
...globalStyles.input,
justifyContent: 'space-between',
padding: 2
}}>
<TextInput
editable={false}
value={value}
placeholder='Lieferant'
style={{
...FONTS.regular,
height: 40
}} />
<View
style={{
height: "100%",
borderRadius: 10,
width: '14%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: COLORS.primary,
}}>
<Image
source={icons.dropdown}
resizeMode="contain"
style={{
height: 15,
width: 12,
tintColor: COLORS.secondary,
}}
/>
</View>
</View>
</Pressable>
</ModalDropdown>
const renderDropDownList = (rowData) => {
return <Text style={{
...FONTS.regular,
fontSize: 14,
padding: 10,
}} >{rowData}</Text>
}

Related

useEffect() not work with a large Component

I have a problem when try to render a large Component, about more than 300 code lines, and the use Effect() function does not work. I use use Effect() to load data, and storage to state. When I remove all the components that use the state , it works again, after that, I add one by one child component, it still works until about 4 components and take error again. damn, I spend 8 hours to fix and fail. there is my code, I rewrote and you can copy paste it to test. Thanks for your help.
import React, { useEffect, useState } from 'react'
import {
View,
Text,
TouchableOpacity,
ScrollView,
Image,
StyleSheet,
} from 'react-native'
import axios from 'axios'
const HomeDetail = () => {
const icon = { uri: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.iconfinder.com%2Ficons%2F211614%2Farrow_b_down_icon&psig=AOvVaw1MEXG4kbEmt_x8DBErEnbI&ust=1617875579779000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCMCKyqvu6-8CFQAAAAAdAAAAABAD' }
const [data, setData] = useState({})
const [showDescription, setShowDescription] = useState(false)
const [showNearbySchools, setShowNearbySchools] = useState(false)
const [titleNameInput, setTitleNameInput] = useState(false)
const [titleEmailInput, setTitleEmailInput] = useState(false)
const [titlePhoneInput, setTitlePhoneInput] = useState(false)
const [showFooterTab, setShowFooterTab] = useState(false)
const [timeOnRealtor, setTimeOnRealtor] = useState()
useEffect(() => {
const getData = () => {
const options = {
method: 'GET',
url: 'https://realtor.p.rapidapi.com/properties/v2/detail',
params: { property_id: 'R4061264803' },
headers: {
'x-rapidapi-key': '7abe4815e1msh8ad18eb0e589c4cp1fc2e5jsn96386487842d',
'x-rapidapi-host': 'realtor.p.rapidapi.com'
}
};
axios.request(options).then(function (response) {
setData(response.data.properties[0])
}).catch(function (error) {
console.error(error);
});
}
getData();
}, [])
const TextLink = (prop) => {
styles = prop.style ? prop.style : {}
textDecorationLine = prop.underLine ? 'underline' : 'none'
return (
<Text
style={[styles,
{
color: prop.color,
fontSize: prop.fontSize,
textDecorationLine: textDecorationLine
}
]}
onPress={prop.onPress}
>
{prop.text}
</Text>
)
}
const ButtonCustom = (prop) => {
colorText = prop.type ? prop.color : 'red';
colorBackground = prop.type ? 'white' : prop.color;
return (
<TouchableOpacity
style={[prop.style,
{
justifyContent: 'center',
alignItems: 'center',
height: 35,
paddingLeft: 10,
paddingRight: 10,
borderWidth: 1,
borderRadius: 30,
borderColor: prop.color,
backgroundColor: colorBackground,
}
]}
onPress={prop.onPress}
>
<Text style={{
color: colorText,
fontSize: prop.fontSize,
// fontWeight: 'bold',
}}
>
{prop.text}
</Text>
</TouchableOpacity>
)
}
return (
<ScrollView>
<View>
<TextLink text='aaaaaa' color='blue'></TextLink>
</View>
{/* <View style={{ paddingRight: 10, paddingLeft: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ fontWeight: 'bold', fontSize: 22 }}>${data.price ? data.price : 5}/mo</Text>
<View style={{ flexDirection: 'row' }}>
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
<Image style={[style.image, { marginLeft: 5 }]} source={icon} />
</View>
</View>
<Text>{data?.address?.line ? data.address?.line : '---'}, {data?.address.city ? data?.address.city : '--'}, {data?.address.state_code ? data.address.state_code : '--'} {data?.address.postal_code ? data.address.postal_code : '--'}</Text>
</View> */}
{/*<View style={{ paddingRight: 10, paddingLeft: 10 }}>
<View style={{
flexDirection: 'row',
width: '100%',
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>{data?.beds}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>beds</Text>
</View>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }} >{data?.baths}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>baths</Text>
</View>
<View style={{ paddingRight: 5, borderRightWidth: 1, borderRightColor: 'gray', marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>{data?.sqft ? data?.sqft : '--'}</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>sqrt</Text>
</View>
<View style={{ paddingRight: 5, marginRight: 5 }}>
<Text style={{ fontWeight: 'bold' }}>
{data?.client_display_flags.allows_cats | data?.client_display_flags.allows_dogs | data?.client_display_flags.allows_dogs_small | data?.client_display_flags.allows_dogs_large ? 'Yes' : 'No'}
</Text>
<Text style={{ fontSize: 12, color: 'gray' }}>pet</Text>
</View>
</View>
<TextLink text='How much home can you afford ?' color='blue' />
<View style={{}}>
{data?.listing_status ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>{data?.listing_status}</Text>
</View>) : null
}
{data?.prop_type | data?.prop_status ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={.icon} />
<Text>{data?.prop_type, data?.prop_status}</Text>
</View>) : null
}
{timeOnRealtor ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>{timeOnRealtor} ons realtor.com®</Text>
</View>) : null
}
{data?.year_built ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>Built in {data?.year_built}</Text>
</View>) : null
}
{1 ?
(<View style={{ flexDirection: 'row', }}>
<Image style={[style.image, { marginRight: 5 }]} source={icon} />
<Text>style
<TextLink text='ASK AGENT' color='blue' />
</Text>
</View>) : null
}
</View>
<TextLink text='MORE DETAILS' color='blue' />
<ButtonCustom text='EMAIL AGENT' color='red' />
</View>
<View style={{ padding: 10, borderColor: 'gray', borderTopWidth: 1, borderBottomWidth: 1 }}>
<TextLink text='SEE MORE ABOUT THIS BUILDING' color='blue' />
</View>
<TouchableOpacity
style={{ padding: 10 }}
onPress={() => setShowDescription(!showDescription)}
>
<Text>Description</Text>
{showDescription ?
(<Text numberOfLines={1} >{data?.description}</Text>) :
(<View>
<Text >{data?.description}</Text>
<TextLink text='MORE' color='blue' />
</View>)
}
<Image style={{
height: 20,
width: 20,
position: 'absolute',
right: 0,
top: showDescription ? 20 : 30,
}}
source={showDescription ? icon : icon}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
padding: 10,
borderBottomColor: 'gray',
borderTopColor: 'gray',
borderWidth: 1,
}}
onPress={() => setShowNearbySchools(!showNearbySchools)}
>
<Text>Nearby Schools</Text>
{showNearbySchools ?
(<Text > Ratings: Elementary {data?.ratings.great_schools_rating} High {data?.ratings.parent_rating}</Text>) :
(<View>
{data?.schools.map((item, index) => {
if (index < 3) {
return (
<View
key={index}
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingTop: 10,
paddingBottom: 10,
borderBottomWidth: index == 3 ? 1 : 0,
borderBottomColor: 'gray'
}}>
<View style={{ flexDirection: 'row' }}>
<View style={{
height: 40,
width: 40,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 3,
borderColor: item.ratings.great_schools_rating ? 'green' : 'gray',
borderRadius: 40,
}}>
{item.ratings.great_schools_rating ?
(<Text style={{ fontWeight: 'bold' }}>{item.ratings.great_schools_rating}
<Text>/10</Text>
</Text>) : (<Text style={{ fontWeight: 'bold' }}>Not Rated</Text>)
}
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>{item.name}</Text>
<Text>{item.funding_type} Grades
<Text style={{ fontWeight: 'bold' }}>{item.grades.range.low} - {item.grades.range.high}</Text>
</Text>
</View>
</View>
<View>
<Text style={{ fontWeight: 'bold' }}>{item.distance_in_miles}</Text>
<Text>mi.</Text>
</View>
</View>
)
}
;
})}
</View>)
}
<Image style={{
height: 20,
width: 20,
position: 'absolute',
right: 0,
top: showNearbySchools ? 20 : 30,
}}
source={showNearbySchools ? icon : icon}
/>
</TouchableOpacity>
<View style={{ paddingRight: 10, paddingLeft: 10 }}>
<Text style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
Additional Info
</Text>
<View style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<Text style={{ fontWeight: 'bold' }}>Presented By</Text>
<TextLink text={data?.agents.name} color='blue' />
</View>
<View style={{
flexDirection: 'row',
alignItems: 'center',
borderBottomWidth: 1,
borderBottomColor: 'gray'
}}>
<Image
style={{ height: 50, width: 100 }}
source={{ uri: data?.office.photo.href }} />
<View style={{
paddingTop: 10,
paddingBottom: 10,
borderBottomColor: 'gray',
borderBottomWidth: 1
}}>
<Text style={{ fontWeight: 'bold' }}>Brokered By</Text>
<TextLink text={data?.office.name} color='blue' />
<TextLink text={data?.office.advantage_phone.display_number} color='blue' />
</View>
<View>
<View style={{ flexDirection: 'row' }}>
<Text>Source {data?.mls.name}</Text>
<Text style={{ backgroundColor: 'gray' }}>property ID {data?.mls.id}</Text>
</View>
</View>
</View>
<View style={{ flexDirection: 'row', padding: 10 }}>
<Image style={{ height: 10, width: 10 }} source={icon} />
<Text>Be aware of scrams. Situations like wire transfers are red flags.
<TextLink text=' Read More' color='blue' />
</Text>
</View>
</View>
{
data.photo ?
(<Image style={{ width: '100%', height: 100 }} source={data.photo[0].href} />)
: null
}
<View style={{ padding: 10 }}>
<Text style={{ fontSize: 20, marginBottom: 10 }}>More about this property</Text>
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
<Image source={icon} />
<TextLink text={data.building_href} color='blue' />
</View>
<View style={{ flexDirection: 'row', marginBottom: 10 }}>
<Text style={{ fontWeight: 'bold', marginRight: 10 }}>Move in</Text>
<Text>2021-04-20</Text>
<Image style={{ height: 10, width: 10, marginLeft: 10 }} source={icon} />
</View>
<View>
{titleNameInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Name</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Name'
onPressIn={() => setTitleNameInput(true)}
onPressOut={() => setTitleNameInput(false)}
/>
</View>
<View>
{titleEmailInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Email</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Email'
onPressIn={() => setTitleEmailInput(true)}
onPressOut={() => setTitleEmailInput(false)}
/>
</View>
<View>
{titlePhoneInput ?
(<Text style={{ fontSize: 12, position: 'absolute', top: -2 }}>Phone</Text>)
: null
}
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
placeholder='Phone'
onPressIn={() => setTitlePhoneInput(true)}
onPressOut={() => setTitlePhoneInput(false)}
/>
</View>
<TextInput style={{
width: '100%',
borderRadius: 3,
borderColor: 'gray',
borderWidth: 1,
paddingLeft: 5,
}}
defaultValue='I am interesting in ...'
/>
<View style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
padding: 10
}}>
<ButtonCustom text='EMAIL AGENT' type={false} />
<Text> or </Text>
<ButtonCustom Text='CALL AGENT' type={false} />
</View>
<Text>by proceeding ...
<TextLink text='More...' color='blue' />
</Text>
</View>
{showFooterTab ?
(<View style={{
justifyContent: 'center',
alignItems: 'center',
padding: 5,
}}>
<ButtonCustom text='EMAIL AGENT' color='red' type={false} />
<View>
<TextLink text='<' />
<Text>1/200</Text>
<TextLink text='>' />
</View>
</View>)
: null
} */}
</ScrollView>
)
}
export default HomeDetail
const style = StyleSheet.create({
image: {
height: 20,
width: 20,
resizeMode: 'cover',
}
})
oh sorry everyone because of this fundamental error, I misunderstood that the useEffect() is run before render function. I did not create a default state, so when it render, it can take a default value and make an error, and the effect function can run to put data to state :) Thank for reading my problem

Keyboard moving view up in react native expo

I am new in react native and I please need help. When the keyboard appears , the whole view is pushed upwards.I do not want that to happen.I saw other answers but none of them is working for me.I do not want the view to be pushed up when the keyboard appears and want to remain where they are.I am using expo and has given the code below with the images.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View, TextInput, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView } from 'react-native';
export default function LoginScreen({ navigation }) {
return (
<View style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
position: 'absolute',
height: 100,
width: 150,
resizeMode: "contain",
top: '3 %'
},
loginInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
},
inputContainer: {
position: 'absolute',
top: '18%',
alignItems: 'center',
},
passwordInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
top: 10
},
loginButtonView: {
position: 'absolute',
height: 46,
width: '70%',
top: '80%'
}
});
I figured out the reason myself.It was happening because i had set my positions based on percentage and the popping of keyboard changed the dimensions resulting in the change of position.
Try to use the component KeyboardAvoidingView like this:
<KeyboardAvoidingView behavior={'height'} enabled style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView >
Try to use different values in the position prop.
If you want less job, you can use the react-native-keyboard-aware-scroll-view. It's a very good lib to work with Keyboard in different layouts.

Remove SafeAreaView from Android

I am trying to set the background image to whole screen area including the notch. This is the default on iPhone but I am not able to achieve it on Android Phone. The Android phone I am using is Samsung Galaxy A-01 and the iPhone is iPhone XS. Attached are the screenshots.
Android Screenshot (Not fine)
iPhone Screenshot (I want to achieve this on Android as well)
UPDATE 1:
Following is the code:
render() {
const { roomId, nickName } = this.state;
return (
<>
<StatusBar barStyle='light-content' translucent />
<ImageBackground
source={require('../../../assets/images/backgroundImage.png')}
style={{ flex: 1, justifyContent: 'center', height: '100%' }}
resizeMode='cover'>
<KeyboardAvoidingView
style={{ flexGrow: 1 }}
enabled
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 1,
flexDirection: 'column',
height: '100%',
}}>
<Image
source={require('../../../assets/images/logo.png')}
style={{ marginBottom: 50 }}
resizeMode='contain'
/>
<SafeAreaView
style={{
height: '50%',
justifyContent: 'flex-end',
width: '100%',
}}>
<View
style={{
width: '100%',
justifyContent: 'flex-end',
marginBottom: 10,
}}>
<TextInput
ref={this.classIdRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 15,
paddingHorizontal: 15,
}}
placeholderTextColor='rgb(218, 218, 218)'
placeholder='Class ID'
value={roomId}
onChangeText={(text) => this.setRoomId({ roomId: text })}
/>
<TextInput
ref={this.nicknameRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 20,
paddingHorizontal: 15,
}}
placeholder='Nickname'
placeholderTextColor='rgb(218, 218, 218)'
value={nickName}
onChangeText={(text) =>
this.setNickName({ nickName: text })
}
/>
<TouchableOpacity
onPress={this.navigateToClassroomHandler}
style={{
backgroundColor: 'rgb(251, 158, 85)',
width: '100%',
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
}}
disabled={roomId === '' || nickName === ''}>
<Text
style={{
fontSize: 18,
color: '#fff',
fontWeight: 'bold',
}}>
Attend Class
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
</KeyboardAvoidingView>
</ImageBackground>
</>
);
}

how to add a reset state when user deletes text from otp text inputs using React native otp input?

I have created an OTP screen using react-native-otp-input as follows:
when I enter the code the continue button turns pink as code state is set to the value like follows
but when I try emptying the code inputs the continue button is still pink as the code state is not refreshed
My code for the otp input view and continue button is as follows:
<View style={{alignItems: 'center'}}>
<OTPInputView
style={{width: '90%', height: 40}}
pinCount={5}
codeInputFieldStyle={{
width: 30,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
borderBottomColor: '#808080',
}}
codeInputHighlightStyle={{
borderBottomColor: '#000',
color: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
codeInputFieldStyle={{
color: '#000',
borderBottomColor: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
onCodeFilled={(code) => {
setCode(code);
}}
/>
</View>
</KeyboardAvoidingView>
<View style={{alignItems: 'center', justifyContent: 'center'}}>
{code == '' ? (
<TouchableOpacity
style={{
backgroundColor: '#C0C0C0',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
disabled={true}>
<Text style={{color: 'white', fontSize: 18}}>Continue</Text>
</TouchableOpacity>
) : otpresponseLoading == true ? (
<ActivityIndicator
size="large"
color="#FE017E"
style={{marginTop: '10%'}}
/>
) : (
<TouchableOpacity
style={{
backgroundColor: '#FF1493',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
onPress={() => onContinueHandlePress()}>
<Text style={{color: 'white', fontSize: 18}}>Continue</Text>
</TouchableOpacity>
)}
</View>
Could anyone please let me know how do I handle the backpress in this dependency? and refresh the state of code when user deletes code?
Any lead would be great, do let me know if anything else is required for better understanding
thank you in advance.
let's try :
<KeyboardAvoidingView>
<View style={{ alignItems: 'center' }}>
<OTPInputView
style={{ width: '90%', height: 40 }}
pinCount={5}
codeInputFieldStyle={{
width: 30,
height: 45,
borderWidth: 0,
borderBottomWidth: 1,
borderBottomColor: '#808080',
}}
codeInputHighlightStyle={{
borderBottomColor: '#000',
color: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
codeInputFieldStyle={{
color: '#000',
borderBottomColor: '#000',
borderBottomWidth: 1,
borderWidth: 0,
}}
onCodeChanged={(code) => {
setCode(code);
}}
/>
</View>
</KeyboardAvoidingView>
<View style={{ alignItems: 'center', justifyContent: 'center' }}>
{code.length !== 5 ? (
<TouchableOpacity
style={{
backgroundColor: '#C0C0C0',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
disabled={true}>
<Text style={{ color: 'white', fontSize: 18 }}>Continue</Text>
</TouchableOpacity>
) : otpresponseLoading == true ? (
<ActivityIndicator
size="large"
color="#FE017E"
style={{ marginTop: '10%' }}
/>
) : (
<TouchableOpacity
style={{
backgroundColor: '#FF1493',
width: 250,
height: 50,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
marginTop: '10%',
}}
onPress={() => onContinueHandlePress()}>
<Text style={{ color: 'white', fontSize: 18 }}>Continue</Text>
</TouchableOpacity>
)}
</View>

how do I make tabs on React-Native in the middle position of the screen

how do I make tabs on React-Native in the middle position of the screen. if I use tabs it means I can only put it on the screen up or down while I want to be in the middle of the screen. I tried using Navigation but it didn't appear. can anyone help me? thank you
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Image, ScrollView,
ImageBackground, Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import IndividuScreen from './src/individu';
import UnitScreen from './src/unit';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
render() {
const Appss = createAppContainer(Apps);
return (
<ScrollView>
<View>
<View style={{ width: '100%', height: 60, backgroundColor: '#ed1c24', flexDirection: 'row' }}>
<Icon name="chevron-left" size={15} color={'white'} style={{ marginTop: 25, marginLeft: '3%' }} />
<Image
style={styles.logo}
source={require('./assets/img/icon.png')}
/>
<Icon name="check-square" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '30%' }} />
<Icon name="bell" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '4%' }} />
<Icon name="ellipsis-v" size={20} color={'white'} style={{ marginTop: 20, marginLeft: '4%' }} />
</View>
<ImageBackground
source={require('./assets/img/gedung.png')}
style={{ width: '100%', height: 300, marginBottom: 0, marginTop: 0 }}>
<View style={{ marginTop: 230 }}>
<ScrollView horizontal={true}>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Beranda</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Training Saya</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Katalog</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>Jadwal</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>XXXXXX</Text>
<Text style={{ fontSize: 20, color: 'white', marginTop: 40, marginRight: 10, marginLeft: 10, height: 30, opacity: 0.8 }}>XXXXXX</Text>
</ScrollView>
</View>
</ImageBackground>
<Appss />
{/* Appss Not Show*/}
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row', marginTop: 20 }}>
<Image source={require('./assets/img/medal.png')} style={{ width: 30, height: 35, marginRight: "5%", }} />
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 20, paddingBottom: 10, fontWeight: 'bold' }}>Point CPD Anda: <Text style={{ color: 'red', fontSize: 30, }}>2</Text></Text>
<Text style={{ fontSize: 14, color: 'red' }}>LIHAT RINCIAN POINT CPD > </Text>
</View>
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<Image source={require('./assets/img/book.png')} style={{ width: 30, height: 30, marginRight: "5%", }} />
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Training Saya</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ marginLeft: "5%", marginRight: "15%", textAlignVertical: 'center' }}>
<Text style={{ height: 60, width: 60, borderWidth: 1.5, borderRadius: 50, fontSize: 30, textAlignVertical: 'center', textAlign: 'center', color: 'maroon', fontWeight: 'bold' }}>07</Text>
</View>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>KALENDER</Text>
<Text style={{ fontSize: 25, color: 'maroon', fontWeight: 'bold' }}>Selasa</Text>
<Text style={{ fontSize: 14 }}>SEPTEMBER 2018</Text>
</View>
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', paddingLeft: 15, paddingTop: 10, flexDirection: 'row' }}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>PRUprime healthcare</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>09:00 - 12:00</Text>
<Text style={{ fontSize: 14 }}>Prudential Learning Academy, Lt. 1</Text>
<Text style={{ fontSize: 14 }}>Jakarta</Text>
</View>
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: '40%' }} />
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', paddingLeft: 15, paddingTop: 10, flexDirection: 'row' }}>
<Text style={{ fontSize: 16, fontWeight: 'bold' }}>PRUfast Start</Text>
</View>
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<View style={{ flexDirection: 'column' }}>
<Text style={{ fontSize: 14 }}>14:00 - 17:30</Text>
<Text style={{ fontSize: 14 }}>Prudential Learning Academy, Lt. 1</Text>
<Text style={{ fontSize: 14 }}>Jakarta</Text>
</View>
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: '40%' }} />
</View>
<View style={{ borderBottomColor: 'black', borderBottomWidth: 1, }} />
<View style={{ textAlign: 'left', padding: 15, flexDirection: 'row' }}>
<Image source={require('./assets/img/book.png')} style={{ width: 30, height: 30, marginRight: "5%", }} />
<Text style={{ fontSize: 20, fontWeight: 'bold' }}>Status Belajar</Text>
</View>
<View style={{ textAlign: 'left', paddingLeft: 15 }}>
<Text>TECHNICAL SKILLS</Text>
<View style={{ flexDirection: 'row', marginTop: 10 }}>
<Text style={{ fontWeight: 'bold' }}>Syariah Basic Training</Text>
<Text style={{ marginLeft: 15, backgroundColor: 'orange', paddingLeft: 4, paddingRight: 4, color: 'white', fontStyle: 'italic' }}>e-learning</Text>
</View>
</View>
<View style={{ marginTop: 20, flexDirection: 'row' }}>
<Image source={require('./assets/img/progress4.png')} style={{ width: '100%', height: 60, }} />
<Icon name="angle-right" size={30} style={{ textAlignVertical: "center", marginLeft: 10 }} />
</View>
</View >
</ScrollView>
);
}
}
const Apps = createStackNavigator({
Individu: {
screen: IndividuScreen,
navigationOptions: {
header: null
}
}, Unit: {
screen: UnitScreen,
navigationOptions: {
header: null
}
}
});
const styles = StyleSheet.create({
logo: {
width: '35%',
height: 40,
marginTop: 10,
marginLeft: '3%',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
for IndividuScreen and UnitScreen which will be displayed on the App but not displayed. if I only return Apps for Individuals and Units to appear. but if I enter it into TAG IndividuScreen and UnitScreen does not appear. maybe you have a way to show two screens in one component. thank you