Why are the buttons not clickable when ImageBackground is used?

Question

I implemented ImageBackground for my React Native app and when I run the emulator it doesn't allow the buttons to be pressed. The Buttons were tested beforehand and do function normally. I feel like it is to do with the ordering of components but have been unsuccessful when reordering them.

export function TitleScreen({navigation: navigation}) {
    return (
        <ImageBackground source={require('../assets/space_background_reduced_v1.png')} style={globalStyles.background}>
            <Image source = {require('../assets/logo.png')} style={globalStyles.logo}/>
            <View style={globalStyles.Buttons}>

                <Button title={"Random Race"} onPress={() => navigation.navigate('RandomRaceOptionsScreen')}/>
                <Button title={"Create"} onPress={() => navigation.navigate('CreateMenu')}/>
                <Button title={"Race Lore"} onPress={() => navigation.navigate('RaceLoreListScreen')}/>


            </View>

        </ImageBackground>
    );
}

Styles:

export const globalStyles = StyleSheet.create({

    Buttons: {
        zIndex:5,
        width: 120,
        marginLeft: "33%",
        marginTop:90
    },
``

Answer 1

Here is the working example for Button inside the ImageBackground .

import React from 'react';
import {View, Image, Button, StatusBar, ImageBackground} from 'react-native';

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <ImageBackground
        source={require('./assets/ahmed-yaaniu-05A3CzImkhw-unsplash.jpg')}
        style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Image
          source={require('./assets/apple-logo.png')}
          style={{height: 50, width: 50}}
        />
        <View
          style={{
            width: 120,
            marginTop: 90,
          }}>
          <Button title={'Random Race'} onPress={() => {}} />
          <Button title={'Create'} onPress={() => {}} />
          <Button title={'Race Lore'} onPress={() => {}} />
        </View>
      </ImageBackground>
    </>
  );
};

export default App;

Do not directly set your styles. First, check this example and re-design it on this.

Also, I suggest you to use React Navigation Helpers to avoid navigation drilling. I'm the author of this and it works both React Navigation v4, v5 and v6.