Atom Lab logo

An easy way to create a bullet list in React Native

Tired of reinventing the wheel?

I'm building a React Native component library - built with Tailwind CSS - designed to help developers build awesome apps in record time.

Find out more

Introduction

Something you will commonly find yourself needing to do in React Native is create a bulleted list, but it isn't as straightforward as you might think. Unlike in HTML and CSS, there is no unordered list tag that will add the bullets for us - instead we need to use unicode to add them.

For code examples you can simply copy and paste, built with Tailwind CSS - check out our List components page.

How to create a bulleted list in React Native with unicode

First, let's use the FlatList component to create a simple list that we can then style. Here is the basic structure of our component:

import React from 'react'; import { Text, View, SafeAreaView, FlatList } from 'react-native'; export default function App() { return ( <SafeAreaView style={{ flex: 1 }}> <View style={{ padding: 20 }}> <FlatList data={[ { key: 'Tokyo' }, { key: 'Delhi' }, { key: 'Shanghai' }, { key: 'Sao Paolo' }, { key: 'Mexico City' }, { key: 'Cairo' }, { key: 'Dhaka' }, { key: 'Mumbai' }, { key: 'Beijing' }, { key: 'Osaka' }, ]} renderItem={({ item }) => { return ( <View style={{ marginBottom: 10 }}> <Text style={{ fontSize: 20 }}>{item.key}</Text> </View> ); }} /> </View> </SafeAreaView> ); }

In our renderItem component, let's add some unicode to create a bullet effect. We're going to use the u2022 unicode characer which is a simple bullet icon. We use javascript template literals to insert it into our text component alongside whatever value we want to display:

Note: remember to add a backslash in front of your unicode entity, otherwise it will just print the id!

<View style={{ marginBottom: 10 }}> <Text style={{ fontSize: 20 }}>{`\u2022 ${item.key}`}</Text> </View>

Now we have our very simple bullet list:

Adding a simple bullet list with React Native

If you want to use larger bullet points, you can use the u25CF character instead:

<Text style={{ fontSize: 20 }}>{`\u25CF ${item.key}`}</Text>
Making our bullet points larger

These work for most use cases - but you can use whatever unicode entity you want to style your bullet list however you like. Keep reading for some other examples.

How to create a hyphenated bullet list in React Native

You can use a hyphenated bullet by using the u2043 unicode:

<Text style={{ fontSize: 20 }}>{`\u2043 ${item.key}`}</Text>
Adding a hyphenated bullet list with React Native

How to create a square bullet list in React Native

You can use a hyphenated bullet by using the u25AA unicode:

<Text style={{ fontSize: 20 }}>{`\u25AA ${item.key}`}</Text>
Adding a square bullet list with React Native

Circled bullet

You can use a circled bullet by using the u29BF unicode:

<Text style={{ fontSize: 20 }}>{`\u29BF ${item.key}`}</Text>
Adding a circled bullet list with React Native

Triangle bullet

You can use a hyphenated bullet by using the u2023 unicode:

<Text style={{ fontSize: 20 }}>{`\u2023 ${item.key}`}</Text>
Adding a triangle bullet list with React Native

Copyright 2024 - Atom Lab | Privacy Policy | Terms and Conditions