ScrollView can not scroll to the bottom when keyboard is open in react-native.[IOS]

Question

Scrollview is working fine when keyboard is closed. But when the keyboard is open, it's not scrolling to the bottom. It's working fine in Android, though. The issue is only with iOS.

If I use react-native-keyboard-aware-scroll-view, then the issue resolved, but I don't want to use this package.

My working environment :-

expo sdk :- 40

Platform :- IOS

import React from "react";
import {
  ScrollView,
  TextInput,
  SafeAreaView,
  TouchableOpacity,
  Text,
} from "react-native";

function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView style={{ flex: 1 }}>
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TextInput style={{ borderWidth: 2, height: 50, marginVertical: 10 }} />
        <TouchableOpacity
          style={{ height: 50, backgroundColor: "red", marginVertical: 10 }}
        >
          <Text>Button</Text>
        </TouchableOpacity>
      </ScrollView>
    </SafeAreaView>
  );
}

export default App;

score 5 · Answer 1 · answered Feb 01 '21 at 07:12

You could use KeyboardAwareScrollView instead like this:

<KeyboardAwareScrollView  keyboardShouldPersistTaps={'always'}
        style={{flex:1}}
        showsVerticalScrollIndicator={false}>
    {/* Your code goes here*/}
</KeyboardAwareScrollView>

and also something extra you could do I use style sheets instead of adding the styles of the text inputs every time here is an example:

import {StyleSheet} from 'react-native

function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
      <TextInput style={styles.textInput} />
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  textInput: {
    borderWidth: 2, 
    height: 50, 
    marginVertical: 10
});

if you want to know more about KeyboardAwareScrollView you could go here: https://github.com/APSL/react-native-keyboard-aware-scroll-view

and more about style sheets here: https://reactnative.dev/docs/stylesheet

score 1 · Answer 2 · answered Mar 03 '23 at 06:20

1

If ScrollView working fine on Android and creating issue on IOS, then simply use scroll view property automaticallyAdjustKeyboardInsets= {true}

answered Mar 03 '23 at 06:20

Shahzaib Younus

11
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 11 '23 at 01:02

score 0 · Answer 3 · answered Jan 25 '22 at 05:43

0

You can use KeyboardAvoidingView, see the doc

for example:

<KeyboardAvoidingView
   style={styles.container}
   behavior="padding"
/>

answered Jan 25 '22 at 05:43

Alauddin Ahmed

1,128
2
14
34

ScrollView can not scroll to the bottom when keyboard is open in react-native.[IOS]

3 Answers3