Skip to content

Android avoidOffset cover Input #245

@phongnguyenmaster

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

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