onPress isn't working on TouchableWithoutFeedback

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.

asked Nov 25 '18 at 12:43

Sudipta B

132

add a comment |

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.

asked Nov 25 '18 at 12:43

Sudipta B

132

add a comment |

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.

asked Nov 25 '18 at 12:43

Sudipta B

132

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.

react-native

asked Nov 25 '18 at 12:43

Sudipta B

132

asked Nov 25 '18 at 12:43

Sudipta B

132

asked Nov 25 '18 at 12:43

Sudipta B

132

asked Nov 25 '18 at 12:43

Sudipta B

132

asked Nov 25 '18 at 12:43

Sudipta B

132

add a comment |

1 Answer
1

active

oldest

votes

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

answered Nov 25 '18 at 13:05

Kevin Amiranoff

2,96151338

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53467551%2fonpress-isnt-working-on-touchablewithoutfeedback%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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

answered Nov 25 '18 at 13:05

Kevin Amiranoff

2,96151338

add a comment |

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

answered Nov 25 '18 at 13:05

Kevin Amiranoff

2,96151338

add a comment |

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

answered Nov 25 '18 at 13:05

Kevin Amiranoff

2,96151338

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

answered Nov 25 '18 at 13:05

Kevin Amiranoff

2,96151338

answered Nov 25 '18 at 13:05

Kevin Amiranoff

2,96151338

answered Nov 25 '18 at 13:05

Kevin Amiranoff

2,96151338

answered Nov 25 '18 at 13:05

Kevin Amiranoff

2,96151338

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg