React Native + Tailwind CSS List

A selection of React Native List components built with Tailwind CSS

These examples require the Tailwind React Native Classnames package.

Bullet List

import { View, Text, FlatList } from 'react-native';
import tailwind from 'twrnc';

export const BulletList = () => {
  return (
    <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={tailwind`mb-2`}>
            <Text style={tailwind`text-lg`}>{`\u2022 ${item.key}`}</Text>
          </View>
        );
      }}
    />
  );
};