Add RN example app (Multiple Realms) #6136
Conversation
| <FlatList | ||
| data={movieSections} | ||
| initialNumToRender={6} | ||
| keyExtractor={section => section.category} | ||
| renderItem={({item: section}) => ( | ||
| <MovieList | ||
| category={section.category} | ||
| movies={section.movies} | ||
| onItemPress={showMovieInfo} | ||
| /> | ||
| )} | ||
| showsVerticalScrollIndicator={false} | ||
| /> |
There was a problem hiding this comment.
Here we're rendering nested FlatLists. The outer one is the vertical list with each category, and the inner one (rendered by MovieList) contains the horizontal list of movies for 1 category.
This could ideally by swapped for 1 list component (using SectionList) for performance, but SectionList requires Symbol.unscopables to be available on our Results (at least for TypeScript), which we have yet to implement.
There was a problem hiding this comment.
We really need to fix the unscopables issue. I think the nested FlatList is fine though. I used similar strategies before.
There was a problem hiding this comment.
I think I've seen before that nested FlatLists may cause all list items (in the inner list) to render, so not only when they appear on the screen. In our case, this makes useMemo() even more important.
|
Thanks @kneth 🙂 |
|
|
||
| You can either choose to set up your App via a CLI (this has fewer steps and is much faster since all configurations are already provided in the [backend directory](./backend/)), or via the App Services UI (steps provided below). | ||
|
|
||
| #### Via a CLI (recommended) |
There was a problem hiding this comment.
Amazing. This works wonderfully. We should probably adopt this strategy for all our examples. JS people love the terminal ;)
There was a problem hiding this comment.
Yeah I definitely think so too. Was talking to Kenneth about it today. Much better DX, less hassle, and less error prone 👍
examples/rn-multiple-realms/frontend/app/screens/AppInfoScreen.tsx
Outdated
Show resolved
Hide resolved
This is to prevent the following eslint error: Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “RootNavigator” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true. eslintreact/no-unstable-nested-components: https://stackoverflow.com/questions/75493412/react-native-eslint-disable-next-line-react-no-unstable-nested-components
This is to make it easier for users who set up App Services manually rather than via the Realm CLI.
elle-j
force-pushed
the
lj/example-rn-multiple-realms
branch
from
b9d9bd4
to
c91f225
Compare
What, How & Why?
Adds a Netflix-like React Native example app along with the backend App Services App for users who prefer to set it up via the Realm CLI.
For more information and an overview of the project structure, see the README.
Main Files to Review
frontend/app/README.mdThis closes #5821
☑️ ToDos
--