I'm using AppIntroSlider with LottieAnimations and i have troubles with animation launching on IOS.
<View style={styles.slide}>
<View style={styles.titleContainer}>
<Text style={styles.title}>{item.title}</Text>
</View>
{item.key > 1 && (
<LottieView
source={item.lottieAnimation}
autoPlay={true}
loop={true}
speed={0.7}
/>
)}
<Image source={item.image} style={styles.image} />
<Text style={styles.text}>{item.text}</Text>
</View>
It shows only a frist frame and animation doesn't start.
"lottie-react-native": "^5.0.1"
Related
Hi I am trying to open an overlay by clicking on a touchable inside another overlay. While it works perfectly in android it is not working in iOS. When I try and open the same overlay from a touchable on my screen it works again.Has anyone come across something like this? Thanks in advance
Code
<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>
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>
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.
I want to get the textInputs without covering by Keyboard.
I have tried with keyboardAvoidingView but it is only supports in Android.
<KeyboardAvoidingView>
<SafeAreaView keyboardShouldPersistTaps={'handled'}>
<View style={styles.middleView}>
<Text>Login</Text>
<TextInput
placeholder="example#google.com"
placeholderTextColor="#a4b0be"
returnKeyType="go"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
autoFocus={true}
/>
<TouchableOpacity>
<Text style=Login</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
How I can solve this. Is there any other library to do this?
KeyboardAvoidingView behaves differently on iOS and Android. On iOS is it recommended to add the behavior props, and I usually use 'padding' which works fine in most cases:
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
>
Install React Native Keyboard Spacer,
npm install --save react-native-keyboard-spacer
You can use this for iOS Application. KeyboardAoidingView is working perfectly in Android. So apply this library only for iOS platform.
import KeyboardSpacer from 'react-native-keyboard-spacer';
{Platform.OS === 'android' &&
<KeyboardAvoidingView>
<SafeAreaView keyboardShouldPersistTaps={'handled'}>
<View style={styles.middleView}>
<Text>Login</Text>
<TextInput
placeholder="example#google.com"
placeholderTextColor="#a4b0be"
returnKeyType="go"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
autoFocus={true}
/>
<TouchableOpacity>
<Text style=Login</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</KeyboardAvoidingView>
}
{Platform.OS === 'iOS' &&
<SafeAreaView keyboardShouldPersistTaps={'handled'}>
<View style={styles.middleView}>
<Text>Login</Text>
<TextInput
placeholder="example#google.com"
placeholderTextColor="#a4b0be"
returnKeyType="go"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
autoFocus={true}
/>
<TouchableOpacity>
<Text style=Login</Text>
</TouchableOpacity>
</View>
<KeyboardSpacer/>
</SafeAreaView>
}
to solve the keyboard issue in iPhone and Android I recommend you to use the awesome package
https://github.com/APSL/react-native-keyboard-aware-scroll-view
WebView scroll is not working in Android. I have searched a lot and seen a lot of other places, no one was able to help.
This is how I defined the component
<WebView
automaticallyAdjustContentInsets={false}
source={{uri: this.props.url}}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
scalesPageToFit={isAndroid ? false : true}
/>
This seems a react native bug (which is out there forever), but there should be a workaround.
-- UPDATE --
I figured out that this is not the WebView problem and it's happening because I have it in a Modal and TouchableWithoutFeedback is needed to hide the modal and of course not hide when they touch inside the modal.
TouchableWithoutFeedback steals the press event and does not the scroll work.
<Modal
animationType='fade'
onRequestClose={() => { }}
transparent
visible={visible} //its either true or false, if its ture it will be displayed if false, it will hide
>
<TouchableWithoutFeedback onPress={onDecline} >
<View style={containerStyle}>
<Ionicons name="md-close" size={24} color={colors.primary} style={closeIconStyle} />
<TouchableWithoutFeedback onPress={() => { }} >
<View style={popupStyle}>
<View style={styles.textContainer}>
<Text style={textStyle}>
{this.props.title}
</Text>
</View>
<View style={[cardSectionStyle, {
marginTop: 5
}]}>
<View style={{ height: SCREEN_HEIGHT - 300, width: SCREEN_WIDTH - 80 }}>
<WebView
source={{ uri: this.props.url }}
style={contentStyle}
automaticallyAdjustContentInsets={false}
javaScriptEnabled={true}
domStorageEnabled={true}
decelerationRate="normal"
startInLoadingState={true}
/>
</View>
</View>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
Adding "nestedScrollEnabled" property in WebView worked for me
You can add style={flex: 1} in the <Webview /> tag.
If it's still not working, just try this:
<WebView
source={{uri: this.props.url }}
style={{marginTop: 20, flex: 1}}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
/>