24 March 2024

In React Native, standard list components are not available by default. This code snippet showcases a custom bullet list component designed to fill this gap. With custom styles and a simple yet effective structure, the component renders a list of items with bullet points. Each item is composed of a bold bullet and corresponding text.

Source code viewer
  1. import React from 'react';
  2. import { View, Text, StyleSheet } from 'react-native';
  3.  
  4. const BulletList = () => {
  5.   const bulletList = [
  6.     "List item 1.",
  7.     "List item 2."
  8.   ];
  9.  
  10.   return (
  11.     <View style={styles.ul}>
  12.       {bulletList.map((item, index) => (
  13.         <View style={styles.li} key={index}>
  14.           <Text style={styles.liBullet}>• </Text>
  15.           <Text style={styles.liText}>{item}</Text>
  16.         </View>
  17.       ))}
  18.     </View>
  19.   );
  20. };
  21.  
  22. const styles = StyleSheet.create({
  23.   ul: {
  24.     flexDirection: 'column',
  25.     alignItems: 'flex-start',
  26.   },
  27.   li: {
  28.     flexDirection: 'row',
  29.     alignItems: 'flex-start',
  30.   },
  31.   liBullet: {
  32.     fontWeight: 'bold',
  33.     fontSize: 24,
  34.   },
  35.   liText: {
  36.     fontSize: 18,
  37.   },
  38. });
  39.  
  40. export default BulletList;
Programming Language: ECMAScript