Android avoidOffset cover Input
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
- [x] 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;
Expected behavior
Like IOS is correct
Reproduction
https://github.com/mateusz1913/react-native-avoid-softinput/blob/main/packages/expo-example/src/screens/FormExample.tsx