Home » React-native » React native scrolling is not working to the bottom

React native scrolling is not working to the bottom

Pro Level React-native
React Native scroll not working

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

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *