Update example apps to show Realm integrated with the latest React Native APIs (React Hooks, FlatList, ...)

I created this in stackoverflow: https://stackoverflow.com/questions/55741282/flatlist-not-updating-with-react-hooks-and-realm

Basically, I created a React Hook to access Realm:

/* @flow */

import { useState, useEffect } from 'react';

export default function useRealmResultsHook(query, args): Array {
  const [data, setData] = useState(args ? query(...args) : query());

  useEffect(
    () => {
      function handleChange(newData) {
        setData(newData);
      }

      const dataQuery = args ? query(...args) : query();
      dataQuery.addListener(handleChange);
      return () => {
        dataQuery.removeAllListeners();
      };
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [query, ...args]
  );

  return data;
}

And then I use it:

const MyComponent = (props: Props) => {
  const data = useRealmResultsHook(getDataByType, [props.type]);

  return (
    <View>
      <FlatList
        data={data}
        keyExtractor={keyExtractor}
        renderItem={renderItem}
      />
    </View>
  );
};

Long story short, FlatList does not update because it looks like {{data === newData }} (reference) as Realm mutates the result (not creating a new copy).

Like this works:

setData([...newData]);

But doing so I get a plain JS array, not Realm Results anymore. What is the best way to do this? How to better clone Realm Results? I am afraid that [...newData] might be quite inefficient for big amounts of data.

TBH, it looks to be nothing about the hook but just Realm

• FlatList (FlatList expects always a new array reference in order to update, not a mutated on).

[ferrannp]

This is the workaround I ended up using:

function handleChange() {
  setData({
    data: newData,
    // Realm mutates the array instead of returning a new copy,
    // thus for a FlatList to update, we can use a timestamp as
    // extraData prop
    timestamp: Date.now(),
  });
}

And then in FlatList:

<FlatList
  ...
  extraData={timestamp}
/>

In this way, every time Realm updates, I force FlatList to update.

[zek]

I believe we also need a sample without hooks. It is not clear how to use realmjs with react-native clearly. Examples are deprecated they must be updated