CODEWITHSUNDEEP
iosreact-nativeexposcrollview
Binit Chandra Jha
Binit Chandra Jha

Reputation: 291

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

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;

Upvotes: 12

Views: 12046

Answers (3)

Shahzaib Younus
Shahzaib Younus

Reputation: 51

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

Upvotes: 5

Alauddin Ahmed
Alauddin Ahmed

Reputation: 1185

You can use KeyboardAvoidingView, see the doc

for example:

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

Upvotes: -1

YamiAtem
YamiAtem

Reputation: 152

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

Upvotes: 5

Related Questions