React Native synced list component for horizontal and vertical navigation between items.
Basic usage:
1. Install and import the component.
# Yarn
$ yarn add @georstat/react-native-synced-list
# NPM
$ npm i @georstat/react-native-synced-list
import { SyncedList } from ‘@georstat/react-native-synced-list’;
2. Add the component to the app.
const MySyncedList = () => { return ( <View style={{ flex: 1 }}> <SyncedList data={listData} /> </View> ); };
3. Define your list data.
const listData: Item[] = [ { id: 1, title: 'JavaScript', data: ['React', 'Vue', 'Angular', 'jQuery'], }, { id: 2, title: 'HTML', data: ['HTML5', 'XML', 'XHTML'], }, // more list items here ];
4. Possible component props.
- data: List data
- horizontalListContainerStyle: Styles of the container of the horizontal list
- verticalListContainerStyle: Styles of the container of the vertical list
- initialId: Id of the initial list item
- renderHorizontalItem: A function to render a custom item on the horizontal list
- renderVerticalItem: A function to render a custom item on the vertical list
- renderSectionHeader: A function to render a custom header on each section
- horizontalListProps: Props for the horizontal list
- verticalListProps: Props for the vertical list
Preview:
Download Details:
Author: georstat
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/georstat/react-native-synced-list
License: MIT