react-native-keyboard-aware-scroll-view icon indicating copy to clipboard operation
react-native-keyboard-aware-scroll-view copied to clipboard

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

Open ShahilMangroliya opened this issue 3 years ago • 5 comments

import {Modal} from "react-native"

{ textinput component }

"react-native": "0.67.0", "react-native-keyboard-aware-scroll-view": "^0.9.5",

ShahilMangroliya avatar Feb 04 '22 11:02 ShahilMangroliya

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 [email protected]
  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 (
    <SafeAreaView style={styles.backgroundColor}>
      <Text> Repro </Text>
      <Modal style={styles.modal} statusBarTranslucent={true} transparent={true}>
        <View style={styles.content}>
          <KeyboardAwareScrollView
            keyboardShouldPersistTaps="handled"
            enableAutomaticScroll={false}>
            <Text>Modal</Text>
            <TextInput
              testID="input_comment"
              value={''}
              placeholder={'text'}
              multiline
              style={styles.text_input}
            />
          </KeyboardAwareScrollView>
        </View>
      </Modal>
    </SafeAreaView>
  );
};

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;
  1. run on Android
  2. Click inside text input

Context (Environment)

    "react": "17.0.2",
    "react-native": "0.68.0",
    "react-native-keyboard-aware-scroll-view": "0.9.5"

HarNys avatar Mar 31 '22 14:03 HarNys

Up

AlixH avatar Feb 08 '23 14:02 AlixH

Same problem, any update?

Anyamborogass avatar Mar 05 '24 16:03 Anyamborogass