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.

import React from 'react';
import { FlatList, StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingTop: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{'\u2B24' + ' '}{item.key}</Text>}
      />
    </View>
  );
}

export default FlatListBasics;

Output

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

Thanks for reading…

Output#

Output