Synced Horizontal and Vertical List For React Native

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