sources.select doesn't work in React Native elements

[italonascimento]

When I try to add a listener to a React Native element, nothing happens.

In my update:

sources.select('Button').addListener('onPress')
  .reducer(...)

In my view:

<Button title="Go" />

It seems like recycle cannot select the Button element. Tried to figure it out, but can't find the reason.

[edunuzzi]

I am having the same issue here. Also, i don't think it is React Native related, cuz i am using regular React. Wondering if it has something to do with #24

PS: Maybe it's better to rename the issue and make it more generic @italonascimento

[domagojk]

Could someone please make a simple repo (or just a snippet) where I can reproduce the issue?

I've tried selecting button using "simple example" and it seems to work as expected...

[edunuzzi]

I created a repo with a simplified version of my issue: https://github.com/edunuzzi/recycle-snippet

By some reason, recycle can't seem to select '#login-input'

[italonascimento]

Thanks @edunuzzi! I guess there's no way a React Native repo would be any simple.

[italonascimento]

Maybe it has something to do with React 16?

[domagojk]

@edunuzzi You should define your jsx views as functions.

so instead of

view: () => loginPageView

export const loginPageView =
    <div>
        <form id='form'>
            <input id='login-input' placeholder="email ou CPF"/>
            <input id='login-password' type="password" placeholder="senha"/>
            <button type="submit">Entrar</button>
        </form>
    </div>

try using

view: loginPageView

export const loginPageView = () =>
    <div>
        <form id='form'>
            <input id='login-input' placeholder="email ou CPF"/>
            <input id='login-password' type="password" placeholder="senha"/>
            <button type="submit">Entrar</button>
        </form>
    </div>

and let me know if it works?

[domagojk]

@italonascimento can you paste a snippet of a complete (or stripped) recycle component you are using and I will try to reproduce the issue in react native

[edunuzzi]

Oh, that actually solved my problem! That was subtle! Thanks a lot 👍 @domagojk

[edunuzzi]

@italonascimento Have you figured it out yet?

[domagojk]

I'm not very experienced in React native, but as I can see, there is no native Button component so you can't listen to onPress on it.

This is done by TouchableHighlight https://facebook.github.io/react-native/docs/touchablehighlight.html on which you can listen for press events:

sources.select(TouchableHighlight).addListener('onPress')

If that doesn't fix your problem, can you try to write your component without recycle? If in that case onPress event is working fine, we would know for sure there's a bug in Recycle and not in your code.