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

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>
);
}}
/>
);
};

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