There are many libraries that provide a way to create a settings screen or list for your React Native app. I show a simple way to achieve this with basic or no dependencies.
You can find the source code here. In essence, we use the React Native
SectionList for a structured or sectioned partition of the list. Alternatively, you could use a
FlatList or even
ScrollView if you have a small amount of items to put in your list. For imaging, you would use
react-native-svg or alternatively the React Native
Image. Persistence, if needed for things like a dark mode switch, could be achieved by
The most interesting feature about the SectionList is its sectioned data handling. You can pass the data via
sections, its function to render items via
renderItem and its function to render the section header via
Structured data is required for the Section List. Each section has a header and a bunch of items. You can define this structure for yourself. This means, you could also add elements like a header icon, as you can see in the orange box.
When you put this data in the
SectionList, when using TypeScript, types for the rendering function should be automatically inferred. This makes writing these functions much easier. It also prevents possible errors by enforcing types on
sections, for example to require an array type.
When looking closely, you may have also noticed that the Section Item has rounded borders, if they are first or last in the list. This can be achieved by comparing the current render index against the
sections data that you put into the
The Section Header is also a rather simple component. It needs to render the title and icon that you specified.
Originally published at https://mariusreimer.com on December 15, 2020.