Simple Settings List in React Native

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 react-native-async-storage.

The SectionList

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.

The Section Item and Header

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.

React Native Mobile Developer