[Android] When the keyboard is opening inside modal the previous screen is getting visible for fraction of second while opening keyboard

[deekshabhatt]

RN version : 0.60.5

IssueVideo:

https://drive.google.com/file/d/1fk-4u7LDNfUM--uNDXx8lAMQiQ_8wu30/view?usp=sharing

App.js:
import React, {useState} from 'react';
import {
Alert,
Modal,
StyleSheet,
Text,
Pressable,
View,
TextInput,
Platform,
KeyboardAvoidingView,
Dimensions,
} from 'react-native';

const App = () => {
const [modalVisible, setModalVisible] = useState(false);
return (

<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
setModalVisible(!modalVisible);
}}>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.container}>







<Pressable
style={[styles.button, styles.buttonOpen]}
onPress={() => setModalVisible(true)}>
Show Modal


);
};

const styles = StyleSheet.create({
centeredView: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
modalView: {
backgroundColor: 'white',
alignItems: 'center',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 4,
elevation: 5,
height: '100%',
width: '100%',
borderColor: 'red',
borderWidth: 10,
},
button: {
borderRadius: 20,
padding: 10,
elevation: 2,
},
buttonOpen: {
backgroundColor: '#F194FF',
},
buttonClose: {
backgroundColor: '#2196F3',
},
textStyle: {
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
},
modalText: {
marginBottom: 15,
textAlign: 'center',
},
input: {
height: 40,
margin: 12,
width: '100%',
borderWidth: 1,
},
container: {
flex: 1,
},
});

export default App;

AndroidManifest:

<uses-permission android:name="android.permission.INTERNET" />

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustPan">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
</application>

Style.xml:

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:textColor">#000000</item>
</style>

[williamtorres1]

hey @deekshabhatt, could you put a gif/video of your issue? The google drive link is unavailable

[Choyeongdeok]

+1

[cortinico]

Closed as invalid (not following the issue template)