React Native Scrollview keyboardshouldpersisttaps not working for ios - reactjs

Question

I have a Login screen where I wrap the entire component with ScrollView and apply keyboardshouldpersisttaps prop as always. The prop seems to work fine on android but not on ios, on tapping the textInput, it gets hidden under keyboard.
Below is my code for the login screen
<View>
<ScrollView
style={styles.scrollviewStyle}
keyboardShouldPersistTaps="always">
<View style={styles.topContainerStyle}>
<View style={styles.padding}>
<Text style={styles.skipTextStyle}>SKIP</Text>
<Image source={BlackLogo} style={styles.logoStyle} />
</View>
</View>
<Image source={PreLoginImage} style={styles.preLoginImageStyle} />
<View style={styles.padding}>
<Text style={styles.getStartedTextStyle}>Let's Get started</Text>
<View style={styles.bottomContainer}>
<TextInput
// onChangeText={mobile => this.onMobileEnter(mobile)}
style={{ height: 40, borderColor: 'gray', borderWidth: 1 }}
value={this.state.mobile}
maxLength={10}
onCodeChange={this.onCodeChange}
/>
<TouchableHighlight
disabled={!this.state.mobile ? true : false}
onPress={() => this.onProceedPress()}
style={
!this.state.mobile
? styles.disabledContinueButtonStyles
: styles.continueButtonStyles
}>
<Text
style={{
alignSelf: 'center',
fontFamily: 'Roboto-Medium',
fontSize: 16,
marginTop: 18,
color: '#FFFFFF',
}}>
CONTINUE
</Text>
</TouchableHighlight>
</View>
<Text style={styles.termsStyle}>
By continuing, you agree to Remedico's terms of use and privacy
Policy.
</Text>
</View>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
topContainerStyle: {
backgroundColor: '#F4EBE4',
height: deviceHeight * 0.4,
},
logoStyle: {
width: 139,
height: 45,
resizeMode: 'contain',
top: 123,
},
padding: {
padding: 24,
},
preLoginImageStyle: {
width: 178,
height: 167,
position: 'absolute',
top: deviceHeight * 0.2,
left: deviceWidth * 0.5,
},
getStartedTextStyle: {
paddingTop: 60,
fontFamily: 'Ubuntu-Medium',
fontSize: 20,
},
skipTextStyle: {
left: deviceWidth - 80,
fontFamily: 'Roboto-Medium',
fontSize: 16,
},
bottomContainer: {
paddingTop: 32,
},
continueButtonStyles: {
marginTop: 84.5,
borderRadius: 25,
backgroundColor: '#00ACC1',
height: 55,
},
disabledContinueButtonStyles: {
marginTop: 84.5,
borderRadius: 25,
backgroundColor: '#CCCCCC',
height: 55,
},
termsStyle: {
fontFamily: 'Roboto-Regular',
fontSize: 12,
paddingTop: 32,
color: '#808080',
},
scrollviewStyle: {
backgroundColor: '#FFF',
height: deviceHeight,
},
// activityIndicatorStyle:{
// marginTop: 84.5
// },
});
Please do suggest why is it so, and how will it be working on ios, any suggestion would be a help,thanks in advance.

Answer 1

I don't think keyboardshouldpersisttaps props of ScrollView will solve your problem. This props will only dismiss the keyboard when you press on the container view.
Please check ref: https://reactnative.dev/docs/scrollview#keyboardshouldpersisttaps
I suggest you to use https://github.com/APSL/react-native-keyboard-aware-scroll-view for your problem.
Hope that help. :)