Synced Horizontal and Vertical List For React Native

Live Demo Download Source Code

Description:

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