Pressables in react-native app wont't work

Question

I have two very simple components and the pressables I have in my Start component just won't work, not the navigation or the console.log(), I can't even inspect them with the element inspector... I am using ImageBackground of react native for the first time so i don't know if this has something to do with it? Although, i did try removing it and i still couldn't press anything... Here is my code for the Start component:

import React from 'react';
import {ImageBackground, Pressable, StyleSheet, Text, View} from 'react-native';
import { normalize } from '../../utils/helper';
import { colors } from '../../utils/styles';

const image = require('../../assets/images/start-page/start-page-background.png');

export default function Start({navigation}) {
    const handleStartPress = () => {
        console.log('hi');
        navigation.navigate('Home');

    };

  return (
    <View style={styles.container}>
      <ImageBackground source={image} style={styles.image}>
        <Pressable style={styles.startButton} onPress={() => handleStartPress()}>
            <Text style={styles.startText}>Έναρξη</Text>
        </Pressable>
        <View style={styles.footer}>
            <Pressable style={[styles.footerPressable, styles.conditions]}><Text style={styles.footerText}>blah</Text></Pressable>
            <Text style={styles.code}>blah</Text>
            <Pressable style={[styles.footerPressable, styles.policy]} onPress={() => console.log('policy')}><Text style={styles.footerText}>blah</Text></Pressable>
        </View>
      </ImageBackground>
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        flex: 1,
    },
    startButton: {
        backgroundColor: colors.main.blue,
        borderRadius: normalize(10),
        paddingHorizontal: normalize(40),
        paddingVertical: normalize(12),
        alignSelf: 'center',
        position: 'absolute',
        bottom: normalize(180),
    },
    startText: {
        color: 'white',
        fontSize: normalize(30),
    },
    footer: {
        paddingVertical: normalize(10),
        position: 'absolute',
        bottom: normalize(15),
    },
    conditions: {
        borderRightColor: 'black',
        borderRightWidth: normalize(1),
        paddingLeft: normalize(10),
        paddingRight: normalize(10),
    },
    policy: {
        paddingLeft: normalize(10),
        //zIndex: 999,
    },
    footerText: {
        fontSize: normalize(16),
        lineHeight: normalize(16),
        color: 'black',
    },
    code: {
        color: colors.main.blue,
        fontWeight: '700',
        fontSize: normalize(16),
        lineHeight: normalize(16),
        borderRightColor: 'black',
        borderRightWidth: normalize(1),
        paddingHorizontal: normalize(10),
    },
  });

Answer 1

I ran your code and it works fine. But I don't have any more information on your project (such as your RN version), so I can only make some educated guess.

The non-responsiveness can be caused by the other parts of your application that block your JS thread and prevent the event loop from passing message from the queue to the stack.

To debug this, you can toggle the perfMonitor to see if the JS thread frame rate has dropped to 0. You can also try not to render other elements (e.g. render solely this button in your App.tsx) in your app to see if the issue is gone.