I am using multiple overlays in my react native component. It is working great in android but in iOS my second overlay doesn't open when it is under my first overlay. When I move my second overlay over my first overlay my second overlay opens but first doesn't. How can I make it so that my second overlay opens irrespective of the first overlay? I am facing this issue only in iOS.
<Overlay isVisible={clientdeetsoverlay} overlayStyle={{height:'100%'}} fullScreen={true} animationType="slide">
<SafeAreaView>
<TO style={{alignSelf:'flex-end'}} onPress={()=>{setClientdeetsoverlay(false)}}>
<Icon name="times" color="#140F79" size={50} />
</TO>
{
isclientdeetloading?
<View>
<ActivityIndicator size="large" color="red" />
</View>
:
<Address ValidateDetails={ConfirmDetails.bind(this)} editClientData={editClientData.bind(this)} clientdata={clientdata} />
}
</SafeAreaView>
</Overlay>
<Overlay animationType="slide" isVisible={addressoverlay} overlayStyle={{height:'50%',width:'90%',borderRadius:20,padding:20}} onBackdropPress={toggleOverlay}>
{
!addressesloading?
<View>
<Text style={{fontSize:20,fontFamily:'Montserrat-Bold'}}>
Select or add an address
</Text>
<ScrollView horizontal={true} contentContainerStyle={{flexGrow:1,marginTop:20,alignItems: 'center',justifyContent: 'center',alignSelf:'center'}}>
<TouchableWithoutFeedback key="new" onPress={()=>{ValidateDetails("New")}}>
<View style={{margin:10,height:200,width:200,borderWidth:1,borderColor:'black',borderRadius:1,borderStyle:'dotted',alignItems:'center',justifyContent: 'space-evenly',}}>
<Image source={require("../Assets/mail.jpg")} style={{height:150,width:150,resizeMode:'contain'}} />
<Text style={{fontSize:15,fontFamily:'Montserrat-Regular'}}>Add new address</Text>
</View>
</TouchableWithoutFeedback>
{
addresses.map((item)=>{
return(
<TouchableWithoutFeedback key={item.id} onPress={()=>{selectaddress(item)}}>
<View style={selectedaddress.id==item.id?styles.selectedAddressStyle:styles.notselectedaddress}>
{
selectedaddress.id==item.id?
<Icon name="check-square" color="#4B53F2" size={30} style={{position:'absolute',right:1}} />
:
null
}
<Text style={{flex:1,fontFamily:'Montserrat-Bold'}}>Address {item.index}</Text>
<Text style={{flex:3,fontFamily:'Montserrat-Regular'}}>{item.data.add}</Text>
<Text style={{flex:1,fontFamily:'Montserrat-Regular'}}>Phone : {item.data.Phone}</Text>
<View style={{flex:1,alignItems:'flex-start',justifyContent:'space-between',flexDirection:'row',width:'100%'}}>
<TO style={styles.controlbuttonContainerStyle} onPress={()=>ValidateDetails(item.id)}>
<Icon name="edit" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Edit</Text>
</TO>
<TO onPress={()=>{removeAddress(item.id)}} style={styles.controlbuttonContainerStyle}>
<Icon name="trash-alt" size={15} color="#4B53F2" />
<Text style={styles.controltextStyle}>Remove</Text>
</TO>
</View>
</View>
</TouchableWithoutFeedback>
)
})
}
</ScrollView>
<TO onPress={()=>{PlaceOrder()}} style={{alignItems: 'center',justifyContent: 'center',width:'80%',height:40,backgroundColor:'#4B53F2',marginVertical:10,alignSelf:'center'}}>
<Text style={{color:'white',fontFamily:'Montserrat-Bold',fontSize:15}}>Place Order</Text>
</TO>
</View>
:
<View style={{flex:1,backgroundColor:'white',alignItems: 'center',justifyContent: 'center',}}>
<ActivityIndicator size={15} color="red" />
</View>
}
</Overlay>
The easiest way to do it is to nest them. Then it should work properly, just don't close the first one just open the second one above it.
<Overlay isVisible={open} overlayStyle={{height:'50%'}}>
<SafeAreaView>
</SafeAreaView>
//second overlay inside the first one
<Overlay isVisible={open1} overlayStyle={{height:'60%'}}>
<SafeAreaView>
</SafeAreaView>
</Overlay>
</Overlay>
import {Avatar, ListItem} from 'react-native-elements';
<View style={{flex: 3}}>
<ListItem
key="live-jobs"
title="Live Jobs"
textStyle={{color: 'orange'}}
leftIcon={
<Icon name="access-point" size={25} style={{color: '#4BC6FF'}} />
}
onPress={() =>
this.checkPermissions(LIVE_JOB_END_POINT, 'liveJobs')
}
/>
<Text>Hiiii</Text>
<ListItem
key="notifications"
title="Notifications"
leftIcon={
<Icon name="bell-ring" size={25} style={{color: '#4BC6FF'}} />
}
onPress={() => Actions.userManagement()}
/>
</View>
My React-native version is 0.64.2 ,React native elements version 3.4.2 Why does the content inside the ListItem Not display anything?
<ListItem key="live-jobs" bottomDivider>
<Avatar source={{uri: l.avatar_url}} />
<ListItem.Content>
<ListItem.Title>Live Jobs</ListItem.Title>
<ListItem.Subtitle>Subtitle</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
I am using a ScrollView in my react-native app. The App work fine in my iOS simulator but when I test in my Android emulator the ScrollView does not work.
Here is what my React Components returns
<SafeAreaView style={styles.container}>
<Image
source={require('../assets/images/logo.png')}
style={styles.logo}
/>
<Androw style={styles.shadow}>
<Text style={[styles.logoText, styles.shadow]}>{NAME}</Text>
</Androw>
<Text style={styles.title}>Welcome Back</Text>
<View style={styles.subContainer}>
<ScrollView showsVerticalScrollIndicator={false}>
<Text style={styles.loginText}>Login</Text>
<View style={styles.textBox}>
<Input
// icon="email"
placeholder="Email or username"
autoCapitalize="none"
autoCompleteType="email"
value={this.state.email}
onChangeText={(txt) => this.setState({email: txt})}
/>
<View style={styles.textInput}>
<Input
// icon="pass"
placeholder="Password"
autoCapitalize="none"
autoCompleteType="password"
value={this.state.password}
onChangeText={(txt) => this.setState({password: txt})}
/>
</View>
</View>
<TouchableOpacity>
<Text style={styles.forgotPasswordText}>
Don't remember your password?
</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.button}
onPress={() => console.log(this.state)}>
<Button text="Login" />
</TouchableOpacity>
<Text style={styles.noAccountText}>
Don't have an account?{' '}
<Text style={styles.signupText}>Signup</Text>
</Text>
</ScrollView>
</View>
</SafeAreaView>
you should wrap your child views inside like
<ScrollView>
<View>
.....
</View>
</ScrollView>
Top <View> must have style flex:1. Alternate try doing like this
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
...
</ScrollView>
SafeAreaView that does not require flex: 1. Also try removing it from ScrollView too if it is there.
This is what i assume. Would be more helpful if you share your stylesheet also.
When I remove TouchableWithoutFeedback then Input text is responding otherwise not.
I tried lots but I am not getting any solution there.
<TouchableWithoutFeedback
onPress={() => {
Keyboard.dismiss();
}}
>
<View style={styles.screen}>
<Text style={styles.title}>The a New Game !</Text>
<Card style={styles.inputContainer}>
<Text>Select a Number</Text>
<Input
style={styles.input}
blurOnSubmit
autoCapitalize="none"
autoCorrect={false}
keyboardType="number-pad"
maxLength={2}
onChange={numberInputHandler}
value={enteredValue}
/>
<View style={styles.buttonContainer}>
<View>
<Button style={styles.button} title="Reset" onPress={() => {}} color={Color.accent} />
</View>
<View>
<Button
style={styles.button}
title="Confirm"
onPress={() => {}}
color={Color.primary}
/>
</View>
</View>
</Card>
</View>
</TouchableWithoutFeedback>
);
};
Try using zIndex( style={{zIndex: 20}} ) on both TextInput and TouchableWithoutFeedback, and make sure you give a greater value to the TextInput.
This is my code:
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<Text style={styles.title}>Login</Text>
<ActivityIndicator size="large" color="#0000ff" animating={this.state.isProcessing} />
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
keyboardType="email-address"
textContentType="emailAddress"
placeholder="Email"
editable={!this.state.isProcessing}
/>
</View>
<View style={styles.inputContainer}>
<TextInput
style={styles.textInput}
onChangeText={(password) => this.setState({ password })}
value={this.state.password}
secureTextEntry={true}
placeholder="Password"
editable={!this.state.isProcessing}
/>
</View>
<View style={styles.inputContainer}>
<TouchableOpacity
style={styles.button}
onPress={this.logIn.bind(this)}
disabled={this.state.isProcessing}
>
<Text style={{ color: '#fefffe' }}>Login</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</TouchableWithoutFeedback>
Keyboard.dismiss can work properly, but KeyboardAvoidingView does not work completely.
If I touch the TextInput, KeyboardAvoidingView will not adjust position based on the position of the keyboard.
Why does this happened?
Please help me. Thanks a lot.