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:

Synced Horizontal and Vertical List For React Native

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

You Might Be Interested In:

Add Comment