APSL / react-native-keyboard-aware-scroll-view

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
MIT License
5.27k stars 646 forks source link

Not working on android when inside modal when statusBarTranslucent applied to modal #525

Open ShahilMangroliya opened 2 years ago

ShahilMangroliya commented 2 years ago

import {Modal} from "react-native"

{ textinput component } "react-native": "0.67.0", "react-native-keyboard-aware-scroll-view": "^0.9.5",
HarNys commented 2 years ago

I have the same issue. Can maybe provide a bit more information if it maybe will be easier to solve this issue.

Expected Behavior

Content inside <KeyboardAwareScrollView /> should scroll, and stay visible even if inside <Modal /> and it has statusBarTranslucent set to true

Current Behavior

When statusBarTranslucent is set to true on a <Modal /> component from react-native <KeyboardAwareScrollView /> inside this modal is not scrolling contents into view when keyboard is opened.

Steps to Reproduce

  1. create new react-native app npx react-native init repro
  2. install react-native-keyboard-aware-scroll-view yarn add react-native-keyboard-aware-scroll-view@0.9.5
  3. change code in App.js:
    
    import React from 'react';
    import { Modal, SafeAreaView, StyleSheet, Text, TextInput, View, } from 'react-native';
    import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';

const App = () => { return (

Repro Modal

); };

const styles = StyleSheet.create({ backgroundColor: { backgroundColor: '#F3F3F3', height: '100%', }, modal: { justifyContent: 'flex-end', margin: 0, }, content: { height: '40%', marginTop: 'auto', backgroundColor: '#AAA', padding: 16, }, text_input: { borderStyle: 'solid', borderWidth: 1, borderColor: '000', }, });

export default App;

4. run on Android
5. Click inside text input

### Context (Environment)
"react": "17.0.2",
"react-native": "0.68.0",
"react-native-keyboard-aware-scroll-view": "0.9.5"
AlixH commented 1 year ago

Up

Anyamborogass commented 7 months ago

Same problem, any update?

Welinton-Hoff commented 3 months ago

Any updates? Facing same problem.

"react": "18.2.0",
"react-native": "0.72.6",
"react-native-keyboard-aware-scroll-view": "0.9.5"
Welinton-Hoff commented 3 months ago

Update.

Adding enableOnAndroid={true} in KeyboardAwareScrollView worked for me!

    <Modal
      ...
      statusBarTranslucent={true} 
    >
       <KeyboardAwareScrollView enableOnAndroid={true}>{children}</KeyboardAwareScrollView>
   </Modal>