crimx/observable-hooks

Compatible with Expo?

annie-elequin opened this issue · 5 comments

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 commented

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 commented

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

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

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 commented

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.