The example bellow runs via Snack created by Expo, it shows how you can layout a list in react native which consists of an internal grid where 1.) a icon appears from the left, 2.) a text in the middle consisting of a title and a short description, and 3.) a badge that appears at the end. Additionally I’ve include a title that says “Notifications” and a example of icons with badges.
Basically, to build the grid, you need to create a element with a flexDirection: ‘row’ then for the 1st and 3rd box you set a width. As for the middle box, we stretched the container by adding a flexGrow: 1 but this pushes the 3rd box off the grid, so we should include a flexShrink: 1 so that it wraps the text within the block. For longer text, we added numberOfLines={1} to the <Text> element to achieve a ellipsis effect, you may change its value to whatever number of lines you want to output before the ellipsis takes effect.
The icons used in the example are built to expo, so no need to add an external library for icons.
