Navigate back to the homepage

How to show bullets in react native?

Infinitbility
React Native
January 7th, 2022 · 1 min read
How to show bullets in react native?

Hello Friends 👋,

Welcome To Infinitbility! ❤️

React Native does not provide <ol> and <ul> like tags which auto handle bullet and counts now we have to handle both <ol> and <ul> in React Native FlatList.

For <ol>, we can easily show using index value but for <ul> we have to use some Unicode to handle it.

As per Unicode when we use \u2B24 code to make round bullet code.

let’s understand with an example.

1import React from 'react';
2import { FlatList, StyleSheet, Text, View } from 'react-native';
3
4const styles = StyleSheet.create({
5 container: {
6 flex: 1,
7 paddingTop: 22
8 },
9 item: {
10 padding: 10,
11 fontSize: 18,
12 height: 44,
13 },
14});
15
16const FlatListBasics = () => {
17 return (
18 <View style={styles.container}>
19 <FlatList
20 data={[
21 {key: 'Devin'},
22 {key: 'Dan'},
23 {key: 'Dominic'},
24 {key: 'Jackson'},
25 {key: 'James'},
26 {key: 'Joel'},
27 {key: 'John'},
28 {key: 'Jillian'},
29 {key: 'Jimmy'},
30 {key: 'Julie'},
31 ]}
32 renderItem={({item}) => <Text style={styles.item}>{'\u2B24' + ' '}{item.key}</Text>}
33 />
34 </View>
35 );
36}
37
38export default FlatListBasics;

Output

React native datepicker unordered list example
React native datepicker unordered list example
  • Try it yourself

Here, some secrets when copying emoji and pasting in react native code it’s also renders the same check below output.

React native datepicker emoji list example
React native datepicker emoji list example

Thanks for reading…

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

React native detox example

React native detox example

React native, Guide end to end testing using detox.

January 6th, 2022 · 2 min read
React hoverable menu example using CSS

React hoverable menu example using CSS

Show sub menus on hover in react using css.

January 5th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]