onPress isn't working on TouchableWithoutFeedback

Question

I am trying to make it so that if the user taps anywhere on the screen it should call my tap handler function, but so far none of the variations work.

My code:

class Story extends Component {
    constructor(props){
        super(props);
        this.state={
            SCREEN_WIDTH : Dimensions.get("window").width,
            SCREEN_HEIGHT : Dimensions.get("window").height,
            bgHorizontalPos : new Animated.Value(10) 
        };

    }

    handleSceneTap(){
        console.log('scenetap called');
        Animated.timing(
            this.state.bgHorizontalPos,
            {
                toValue: 500,
                duration: 2000,
                easing: Easing.linear
            }
        ).start();
    };

    render() {
        let bgStyle = { ...styles.container, transform: [{ translateX: this.state.bgHorizontalPos }] };
        return (
            <TouchableWithoutFeedback onPress={ ()=>this.handleSceneTap() }>
                <View style={{position:'relative'}}>
                    <Animated.Image source={require('lingo/assets/images/campus.png')} style={bgStyle}></Animated.Image>
                    <Image source={{ uri:'https://place-hold.it/150x200/fdd.png'}} style={styles.character1}></Image>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}

If however I directly trigger the function like

<TouchableWithoutFeedback onPress={ this.handleSceneTap() }>

Then it fires as soon as the scene loads.

Answer 1

Your code does work fine.

The issue is that the view does not take enough space. If you want the view to expand to the entire screen, you can add flex:1

<View style={{position:'relative', flex:1}}>

Here is working example of your code