React Native KeyboardAvoidingView Didn't work if wrapped with ImageBackground

Question

Hello guys I'm currently learning about react native. I want to use some Image as a background but when I use BackgroundImage instead of View my KeyboardAvoidingView and TouchableOcapity tag become untouchable. (Previously when i use View tag instead of Background image it work perfectly fine). Can someone help me please?

const Home = () => {
    return (
        <ImageBackground style={styles.homeBackground} source={require('../assets/background.png')}>
            <View style={styles.homeWrapper}>
                <Image style={styles.homeLogo} source={require('../assets/logo.png')}/>
                <Text style={styles.homeText}>Hello, Welcome Back!</Text>

                <View style={styles.taskItem}>
                    <Task text={'Interview for Work'} />
                    <Task text={'Attend Meeting'} />
                    <Task text={'Go to the Gym !!!!'} />
                    <Task text={'Prepare for a Date <3'} />
                </View>

                <KeyboardAvoidingView 
                    behavior={Platform.OS === "Android" ? "padding" : "height"}
                    style = {styles.writeTaskContainer}
                >
                    <TextInput
                        style={styles.input}
                        placeholder={'Write your task'}
                    />

                    <TouchableOpacity >
                        <View style={styles.ButtonWrapper}>
                            <Text style={styles.addText}>+</Text>
                        </View>
                    </TouchableOpacity>

                </KeyboardAvoidingView>
            </View>
        </ImageBackground>
    )
}

My Styles

const styles = StyleSheet.create({
    homeBackground: {
        zIndex: 1,
        width: '100%',
        height: '60%',
    },

    homeWrapper:{
        zIndex: 3,
    },
}

Answer 1

From my experience, you can fix the issue by adding a view with higher zIndex to enclose the elements which are covered by other elements.

Hence please change the following block:

 <KeyboardAvoidingView 
                    behavior={Platform.OS === "Android" ? "padding" : "height"}
                    style = {styles.writeTaskContainer}
                >
                    <TextInput
                        style={styles.input}
                        placeholder={'Write your task'}
                    />

                    <TouchableOpacity >
                        <View style={styles.ButtonWrapper}>
                            <Text style={styles.addText}>+</Text>
                        </View>
                    </TouchableOpacity>

                </KeyboardAvoidingView>

to

<View style={{zIndex:10000}}>
 <KeyboardAvoidingView 
                    behavior={Platform.OS === "Android" ? "padding" : "height"}
                    style = {styles.writeTaskContainer}
                >
                    <TextInput
                        style={styles.input}
                        placeholder={'Write your task'}
                    />

                    <TouchableOpacity >
                        <View style={styles.ButtonWrapper}>
                            <Text style={styles.addText}>+</Text>
                        </View>
                    </TouchableOpacity>

                </KeyboardAvoidingView>
</View>

Please let me know the result. Thanks