onPress event not firing and consequent modal not launching

[dwoodlock]

Hi there, I'm looking forward to using this as I want to show a DatePicker only when the user has selected that field and will launch your Modal view and put it in there.

But I can't get it to work - specially the onPress event never fires (iOS Simulator and my physical device) so the modal doesn't open using your example code. To make this as clean as possible I did the following:

• react-native init App
• npm install react-native-model --save //in the node_modules directory
• overwrote the index.ios.js code with your code from the front of your repo - README.md.
• Ran it. It starts fine, I see the Open Modal text. When I click on it (or 'press' on it on my physical device), nothing happens.

What am I missing?

[MossP]

Can you see that the trigger state has changed (this.state.isModalOpen in the examples).

If you post an example of the offending code it may help for others to debug.

[dwoodlock]

I checked and the trigger state never changes. Specifically I added a console.log(this.state.isModalOpen) to the render() method and it comes through as 'false' the first time and render is never called again. I believe this is because the onPress event is not firing so not calling the method that changes the state.

I did post my code to this repository: https://github.com/dwoodlock/App.git The index.ios.js file contains the code though maybe I mess something else up somewhere else. Thanks for your help.

[MossP]

"Text" doesn't have an onPress event. You need to wrap it in something like a "TouchableOpacity" or "TouchableWithoutFeedback" etc.

e.g.

<TouchableOpacity onPress={() => {this.openModal()}}>
    <Text>
        Open Modal
    </Text>
</TouchableOpacity>

You'll also need ot include this at the top e.g.

var { AppRegistry, StyleSheet, View, Text, TouchableOpacity } = React;

[MossP]

Just noticed the markup was getting hidden. Have updated answer now.

[dwoodlock]

Thanks for the info. I updated my project with your guidance and the onPress event is still not fired. I posted the updated code to that github: https://github.com/dwoodlock/App.git. I don't know if this is a contributing factor, but the Text ("Open Modal") does appear on top of the status bar on the top of the phone's screen. I don't know whether being in that area is confusing something. Any guidance is appreciated.

[MossP]

When you say "It's not firing" have you dropped a console.log() in openModal() to see if it is getting called? Also, is there a reason that your base view is absolutely positioned?

[MossP]

For the sake of testing. Lets change the code a bit and eliminate the plugin as the faulting module. Can you do the following..

swap

<Text>Open Modal</Text>

for

<Text>Open Modal [currentState:{this.state.isModalOpen}]</Text>

and remove the debugger; call for now. (only because I don't use it and I'm not sure how it affects the life cycle of the component)

Does the text change when you click it now? (We're not looking for the modal, just looking for the text to change to reflect the state change).

[brentvatne]

@dwoodlock - did you resolve this issue?

[dwoodlock]

Thanks for your guidance. It was resolved by moving the text off of the status bar on top. Specifically I removed position: 'absolute' from the style and set top: 100 and it works fine now. fyi - the reason I used that style is I copied the example from your readme. You may want to look at changing that. Thanks again.