Skip to content

Android avoidOffset cover Input #245

Description

@phongnguyenmaster

Environment

{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-native/new-app-screen": "0.81.5",
"react": "19.1.0",
"react-native": "0.81.5",
"react-native-avoid-softinput": "^8.0.2",
"react-native-safe-area-context": "^5.5.2"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@babel/preset-env": "^7.25.3",
"@babel/runtime": "^7.25.0",
"@react-native-community/cli": "20.0.0",
"@react-native-community/cli-platform-android": "20.0.0",
"@react-native-community/cli-platform-ios": "20.0.0",
"@react-native/babel-preset": "0.81.5",
"@react-native/eslint-config": "0.81.5",
"@react-native/metro-config": "0.81.5",
"@react-native/typescript-config": "0.81.5",
"@types/jest": "^29.5.13",
"@types/react": "^19.1.0",
"@types/react-test-renderer": "^19.1.0",
"eslint": "^8.19.0",
"jest": "^29.6.3",
"prettier": "2.8.8",
"react-test-renderer": "19.1.0",
"typescript": "^5.8.3"
},
"engines": {
"node": ">=20"
}
}

Affected platforms

  • Android
  • iOS

Current behavior

Android: <AvoidSoftInputView avoidOffset={100}>
I can not see input.

import * as React from "react";
import { Button, Modal, ScrollView, TextInput, View } from "react-native";
import { AvoidSoftInputView } from "react-native-avoid-softinput";

const App: React.FC = () => {
  const [modalVisible, setModalVisible] = React.useState(false);

  function closeModal() {
    setModalVisible(false);
  }

  function openModal() {
    setModalVisible(true);
  }

  return <View style={{ justifyContent: 'center', flex: 1 }}>
    <Button
      onPress={openModal}
      title="Open modal"
    />
    <Modal
      navigationBarTranslucent={true}
      onRequestClose={closeModal}
      statusBarTranslucent={true}
      visible={modalVisible}
    >
      <View style={{ justifyContent: 'center', flex: 1 }}>
        <View>
          <View>
            <Button onPress={closeModal} title="X" />
          </View>
          <AvoidSoftInputView avoidOffset={100}>
            <ScrollView>
              <View>
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="TESTING INPUT" />
                <TextInput placeholder="Multiline" />
                <TextInput placeholder="Single line" />
                <TextInput placeholder="Multiline" />
                <Button
                  onPress={closeModal}
                  title="Submit"
                />
              </View>
            </ScrollView>
          </AvoidSoftInputView>
        </View>
      </View>
    </Modal>
  </View>;
};
export default App;
Image Image

Expected behavior

Like IOS is correct

Reproduction

https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/packages/expo-example/src/screens/FormExample.tsx

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions