Document updates not working when using react-native FlatList

[amirmcs]

I have a strange issue.. When I add/remove document in firebase the page automatically gets refresh and shows the correct docs. But if there is a field update it doesn't refresh. How can I ensure it updates if a field value is updated.

When I debug I see it logs an event whenever a field is changed at the backend. But React-Native view doesn't get re-render.

Collection (projects/RFYD-0635/Members) - onSnapshot

[IjzerenHein]

It sounds like you haven't wrapped your detail component with observer. Could that be the case?

[amirmcs]

I wrapped the component in observer and also tried decorator.

here is the gist. Please see if something wrong.

https://gist.github.com/amirmcs/c716483eb2a972dd02156b5a555e9b2c

Thanks,

[IjzerenHein]

Ah okay, the problem here is with <FlatList> which accesses the data asynchronously, which doesn't play nicely with the mobx-react observer pattern. For FlatList is recommend this pattern:

<FlatList
   data={this.colRef.docs.slice(0)}
    renderItem={({ item }) => <MyItemComponent item={item} /> }
    ...
    />

And then create a separate Component which is wrapped with observer.

// MyItemComponent.js
export default observer((item) => (
  <Block
                row
                center
                shadow
                space="between"
                style={styles.card}
                // key={props.title}
              >
                <Block flex>
                  <Text
                    size={theme.SIZES.BASE}
                    style={{ paddingHorizontal: 20 }}
                  >
                    {item.id}
                  </Text>
                  {/* <Text size={BASE_SIZE * 0.875} muted>
                Sub Title
              </Text> */}
                </Block>

                <Button style={styles.right}>
                  <Text size={theme.SIZES.BASE} color={COLOR_GREY}>
                    {item.data.score}
                  </Text>
                </Button>
              </Block>
));

[amirmcs]

It worked nicely. Thank you for the wonderful library.

[IjzerenHein]

Great, glad it worked! Cheers!