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

user_15120263 0
Viewed 3892

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;
expo react-native scrollview ios
2 Answers

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

user_144765640

You can use KeyboardAvoidingView, see the doc

for example:

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