In this article, we are going to solve the most common bug. In React native scrolling is not working to the bottom. basically, If the keyboard is open then the screen is not completely scrolling to the bottom. Generally, this issue will face in the iOS build. I was facing this issue for many months & finally I am able to solve this issue completely using react native core property KeyboardAvoidingView but the main thing is How to use this property in the right way in our code. so let’s see with an example.
Here’s the example screenshot for the output. I am able to scroll completely up to the bottom button.
1. Use of KeyboardAvoidingView
I have created a new project In which I have added form submission and added ScrollView to this form content but In the iOS build, I was not able to scroll the screen to the bottom after opening the keyboard so I have added KeyboardAvoidingView and then added scrollView. Also, I have added style flex 1 to KeyboardAvoidinhView, behavior with Platform condition as I am facing this issue in iOS only. and then added KeyboardVerticalOffset with platform condition and I have passed keyboard height as 90 to it. these are some mandatory properties that need to use with KeyboardAvoidingView.
<KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : null}> <ScrollView> </ScrollView> </KeyboardAvoidingView>
2. Source code
import React, {useState} from 'react'; import {StyleSheet, Text, View, TouchableOpacity, TextInput, KeyboardAvoidingView, Platform, ScrollView} from 'react-native'; export default function Home({ navigation }) { return ( <KeyboardAvoidingView style={{flex: 1}} behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={Platform.OS === 'ios' ? 90 : null}> <ScrollView> <View> <TextInput style={styles.input} value={"India"} placeholder="Select Country*" /> <TextInput style={styles.input} value={"Maharashtra"} placeholder="Select State*" /> <TextInput style={styles.input} value={"Mumbai"} placeholder="Select City*" /> <TextInput style={styles.input} value={"400080"} placeholder="Zipcode" keyboardType="numeric" /> <TouchableOpacity onPress={openCartScreen} style={{ alignItems: 'center', padding: 5, borderColor: 'black', borderWidth: 1, margin: 10, backgroundColor: '#2b65ea', }}> <Text style={{fontSize: 20, color: 'white'}}>Update</Text> </TouchableOpacity> </View> </ScrollView> </KeyboardAvoidingView> ); } const styles = StyleSheet.create({ input: { height: 40, margin: 12, borderWidth: 1, padding: 10, }, });
3. Output
As you can see in the following screenshot we can able to scroll the screen to the bottom button even if the keyboard is open. This is how React native scrolling is not working to the bottom is solved