A Cupertino/iOS list for React Native.
Currently only tested on iOS.
- High-reduction iOS system design style (Cupertino)
- Dark mode support
- Easily customize icons based on react-native-vector-image
- Based on SectionList, supports all SectionList's own features (such as List header support, Pull to Refresh...)
npm
npm install react-native-cupertino-list
yarn
yarn add react-native-cupertino-list
You also need to install react-native-vector-image to display the icons.
import {CupertinoSectionList} from 'react-native-cupertino-list';
export function HomeScreen() {
return (
<CupertinoSectionList
sections={[
{
title: 'Settings',
data: [
{
title: 'All Items',
icon: 'bulb-outline',
forward: {}
}
],
},
]}
/>
);
}
Property | Description | Type | Default |
---|---|---|---|
title | Title of this row | string | - |
icon | Customized row icon (left) | CupertinoCellIcon | - |
forward | The element on the right in this row | ForwardType | - |
onPress | Callback executed when select one row | function(event) | - |
type: string | { name?: string; color?: ColorValue } | JSX.Element
- string - render by react-native-vector-icons (Ionicons)
{
"icon": "bulb-outline"
}
- if you want to customize the color
{
"icon": {
"name": "bulb-outline"
"color": "#000"
}
}
- If you want to fully customize
{
"icon": (
<View>...</View>
)
}
type: { title?: string; icon?: CupertinoCellIcon; arrowHidden?: boolean; }
Property | Description | Type | Default |
---|---|---|---|
title | Text displayed to the right of the current row | string | - |
icon | Icon displayed to the right of the current row | CupertinoCellIcon | ">" - ios-chevron-forward |
arrowHidden | hide the icon on the right | boolean | false |
example:
{
"title": "22",
"icon": "ios-chevron-forward"
}
You can find the icon you need at react-native-vector-icons directory, fill the icon name into the data.icon
field, note that only Ionicons are currently supported.
Inspired by Evan Bacon, Tanks.