Modal content not showing when opening after focusing and dismissing TextInput (Expo + KeyboardAwareScrollView)

[daviddapid]

Describe the bug
When using react-native-keyboard-controller with KeyboardAwareScrollView, opening a React Native Modal after focusing and dismissing a TextInput causes the modal to appear without its content (invisible).
If the modal is opened without focusing an input first, it works fine.

Packages Used

"react-native-keyboard-controller": "^1.18.5",
"expo": "~52.0.47",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.9",
"expo-status-bar": "~2.0.1",
...

Code snippet (ready to use)
app/_layout.tsx

import { KeyboardProvider } from 'react-native-keyboard-controller'
import { Stack } from 'expo-router'
import { StatusBar } from 'expo-status-bar'

function RootLayout() {
    return (
        <>
            <KeyboardProvider>
                <Stack
                    screenOptions={{
                        headerStyle: { backgroundColor: 'black' },
                        headerTintColor: 'white',
                        headerShadowVisible: false,
                        navigationBarColor: 'black',
                    }}
                >
                    <Stack.Screen name="index" options={{ headerShown: false }} />
                </Stack>
            </KeyboardProvider>
            <StatusBar style="light" backgroundColor={'transparent'} />
        </>
    )
}

app/index.tsx

import { useState } from 'react'
import { Button, Modal, StyleSheet, Text, TextInput, View } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-controller'
import { SafeAreaView } from 'react-native-safe-area-context'

export default function IndexPage() {
    const [isShowModal, setIsShowModal] = useState(false)

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={styles.container}>
                <KeyboardAwareScrollView
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={{
                        flexGrow: 1,
                        justifyContent: 'space-between',
                    }}
                >
                    <View style={styles.inpustWrapper}>
                        <TextInput style={styles.input} placeholder="input1" />
                        <TextInput style={styles.input} placeholder="input2" />
                        <TextInput style={styles.input} placeholder="input3" />
                        <TextInput style={styles.input} placeholder="input4" />
                        <TextInput style={styles.input} placeholder="input5" />
                    </View>
                    <Button onPress={() => setIsShowModal(true)} title="Open modal" />
                </KeyboardAwareScrollView>
            </View>
            <Modal visible={isShowModal}>
                <View style={styles.modal}>
                    <Text>This text and button should appear</Text>
                    <Button title="close modal" onPress={() => setIsShowModal(false)} />
                </View>
            </Modal>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: { paddingHorizontal: 20, flex: 1 },
    inpustWrapper: { gap: 16, marginBottom: 20, flex: 1 },
    input: { borderWidth: 1, borderColor: 'black', height: 35, paddingHorizontal: 8 },
    modal: {
        backgroundColor: 'rgba(0,0,0,0.2)',
        justifyContent: 'center',
        alignItems: 'center',
        flex: 1,
        gap: 10,
    },
})

To Reproduce

1. Tap Open Modal button → modal works fine, content is visible.
2. Tap on any TextInput → keyboard opens.
3. Dismiss the keyboard.
4. Tap Open Modal button again → modal appears, but content is gone / invisible.

Expected behavior
Modal content should always render correctly, even if it is opened after focusing and dismissing a TextInput.

Smartphone (please complete the following information):

• Desktop OS: Windows 11
• Device: Xiaomi Redmi Note 9
• OS: MIUI 12.5.5
• RN version: 0.76.9
• RN architecture: new/fabric
• JS engine: Hermes
• Library version: 1.18.5

Additional context
This issue only happens when using KeyboardAwareScrollView from react-native-keyboard-controller.
Using a plain ScrollView or opening modal without focusing input works fine.

[kirillzyusko]

Hey @daviddapid

Sorry for a long response - don't you mind to try to use version 1.21.2 and see if the issue is reproducible there? In 1.21.2 I significantly re-worked internals of KeyboardAwareScrollView so maybe it started to work now as expected?