React Native Expo template: problems and solutions

MongoDB Atlas App Services & Realm Realm
#1

I just thought I would share a couple pieces of information about the Expo template, since I know myself and others have encountered some difficulties with it.

There was a problem where the template was installing some incompatible Realm/Expo versions. Since Expo 48 was officially released, I decided to try the template again and bump everything (realm, expo and friends, @realm/react) to latest, and it worked. Previously this had failed for me (using Expo 48 beta). I don’t know if the template was updated and that played a role, but either way good news!

When I started the template app, everything looks like it should, but once you enter a todo, the IntroText disappears but no to-dos show up. I seem to recall this happening in previous attempts to use the template but can’t say for sure. I dug around a bit and the problem is in the TaskList component, it renders a FlatList as such:

<FlatList
  data={tasks}
  keyExtractor={task => task._id.toString()}
  renderItem={({ item }) => (
   <TaskItem
      task={item}
      onToggleStatus={() => onToggleTaskStatus(item)}
      onDelete={() => onDeleteTask(item)}
      // Don't spread the Realm item as such: {...item}
    />
  )}
/>

But the FlatList isn’t even receiving elements to render. If you run Array.isArray(tasks) it’s false, I’m not sure what tasks is, but it’s not an array. I just spread it into an array, eg

<FlatList
  data={[...tasks]}
...
/>

and that fixed it. If you call tasks.toString() it returns [Function bound value], not sure what that indicates.

Thought I would share in case it helps the maintainers and other people trying to figure out how to use Realm.

Cheers,
Brian

#2

Note: the rendering problem I describe is with the nonsync version, although I’m not sure if that effects it.

#3

Update: The same problem with FlatList rendering happens in a sync version as well, so that wasn’t the problem. The useQuery documentation says that the value returned from useQuery can be passed directly to a FlatList’s data prop but this seems to be broken. Easy to fix by spreading it into an array, just trying to point out some sticking points.

#4

@Brian_Luther , are you able to run the project with Expo Go? Could you possibly share a repo or a package.json?

PS: Thank you for going out of your way to inform us of your success with this big problem.

#5

@Brian_Luther There was a restriction on FlatList introduced in React Native 0.71.0. We have brought this to the attention of Meta and they have made FlatList Realm compatible in 0.71.4. You should be able to upgrade the RN dependency to 0.71.4 in your package.json, as the upgrade path from 0.71.3 to 0.71.4 does not require any changes to native code.

@Damian_Danev Realm is not compatible with Expo Go, as it is not included in the base SDK of Expo. One has to compile their own dev-client (similar to a custom Expo Go) either locally or through EAS.

#6

@Andrew_Meyer , do you think there is a chance the Expo team will include Realm in the base SDK of Expo any time soon or at all?

#7

@Damian_Danev They will not. They have even removed react-native-reanimated from the base SDK. My understanding is that they are pushing towards the dev-client if you need any third party library. They are also giving library authors, like us, the ability to provide configurations that can patch native parts, so that expo users can still have a much easier experience using React Native.
It makes sense, as each app has their own set of needs when it comes to what libraries they use. Any library that is adding native code to the app will increase the amount of disc space, so you would want to keep this light anyway.