Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Compatible with Expo? #27

Closed
annie-elequin opened this issue Sep 5, 2020 · 5 comments
Closed

Compatible with Expo? #27

annie-elequin opened this issue Sep 5, 2020 · 5 comments

Comments

@annie-elequin
Copy link

Is there any reason this library wouldn't work with Expo?

I'm using useObservableState a lot in an NPM package I made, and recently made it compatible with Expo. Doing a simple example though, the component doesn't update even though I'm logging the observable I'm looking at and it DOES change in the logs.

Here's the snippet:

export default function Rooms() {
  const rooms = useObservableState(matrix.getRooms$())
  console.log('rooms', rooms)
  return (
    <>
      <Header />
      <View style={{flex: 1}}>
        {rooms?.map(r => (
          <TouchableOpacity style={{ backgroundColor: 'blue', height: 50, width: 100}}>
            <Text>item</Text>
          </TouchableOpacity>
        ))}
      </View>
    </>
  )
}

"rooms" is initially an empty array until it's loaded with rooms shortly after. Those loaded rooms show in the logs, but the mapped list never populates.

@crimx
Copy link
Owner

crimx commented Sep 5, 2020

If it shows in the logs then it means the hook is working as expected.

I tested this in snack and it worked on both web and my mobile device.

@crimx
Copy link
Owner

crimx commented Sep 5, 2020

Could it be a layout issue? The rooms are hidden or outside of viewport.

@annie-elequin
Copy link
Author

Okay, thank you for the quick response, and the example too!!

I moved the hook up one level and just passed the data down, and it was working... so not sure exactly what was happening but all is well, for now. glad to know I'm not crazy, I love using these hooks so I'm happy its functioning as expected

@annie-elequin
Copy link
Author

Could it be a layout issue? The rooms are hidden or outside of viewport.

I have since discovered it's partly because I'm a potato and I included react and react native in the NPM package I created 🙃 I've gotten the values to show up!

however a mystery I haven't solved is it seems the flatlist is loading things one at a time, with like half a second between each one? (and the whole list doesn't update in the view until each one has finished. I know the timing because I dropped a log inside the render function) very odd indeed. not sure why yet. regardless, I don't think it's related to observable-hooks, so that's cool

@crimx
Copy link
Owner

crimx commented Sep 5, 2020

I have since discovered it's partly because I'm a potato and I included react and react native in the NPM package I created 🙃 I've gotten the values to show up!

Didn't expect that😂. Glad to know it's working now.

however a mystery I haven't solved is it seems the flatlist is loading things one at a time, with like half a second between each one? (and the whole list doesn't update in the view until each one has finished. I know the timing because I dropped a log inside the render function) very odd indeed. not sure why yet. regardless, I don't think it's related to observable-hooks, so that's cool

Sounds like a lagging issue to me. Note that Expo runs significantly slower on development mode. Also check for any unexpected component update on rendering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants