React Native Synced Horizontal and Vertical List

Features

• Synced list component for horizontal and vertical navigation between items
• Written in Typescript

Preview:

Installation

yarn:

yarn add @georstat/react-native-synced-list

npm:

npm i @georstat/react-native-synced-list

Usage

Just to get started:

import { SyncedList } from '@georstat/react-native-synced-list';

const listData: Item[] = [
  {
    id: 1,
    title: 'Breakfast',
    data: ['Eggs', 'Bacon', 'Milk', 'Coffee', 'Fresh fruits'],
  },
  {
    id: 2,
    title: 'Lunch',
    data: [
      'Fish',
      'Chicken with vegetables',
      'Beans',
      'Wine',
      'Pork with fried potatoes',
    ],
  },
  // Add more items here
];

const MySyncedList = () => {
  return (
    <View style={{ flex: 1 }}>
      <SyncedList data={listData} />
    </View>
  );
};

Custom List example:

For more info check example

import { SyncedList } from '@georstat/react-native-synced-list';

const MySyncedList = () => {
  const renderHorizontalItem = (
    index: number,
    isSelected: boolean,
    item: any
  ) => {
    return (
      <View style={{ borderRadius: 7, overflow: 'hidden' }}>
        <View
          style={
            isSelected
              ? [styles.itemContainer, styles.itemContainerSelected]
              : styles.itemContainer
          }
        >
          <Text>{item.title}</Text>
        </View>
      </View>
    );
  };

  const renderVerticalItem = (item: any) => {
    return (
      <View style={styles.verticalItemContainer}>
        <Text>{item}</Text>
      </View>
    );
  };

  const renderSectionHeader = (section: any) => {
    return (
      <View style={styles.headerContainer}>
        <View style={styles.innerHeaderContainer}>
          <Text style={styles.header}>{section.title}</Text>
        </View>
      </View>
    );
  };

  return (
    <View style={{ flex: 1 }}>
      <SyncedList
        data={listData}
        horizontalListContainerStyle={styles.horizontalListContainerStyle}
        renderHorizontalItem={renderHorizontalItem}
        renderSectionHeader={renderSectionHeader}
        renderVerticalItem={renderVerticalItem}
      />
    </View>
  );
};

Be careful

By default the horizontal list will render 30 items and the vertical list 40. (initialNumToRender). This is fine for most cases and devices. If you need the maximum performance reduce this number and pass the getItemLayoutProp for the horizontal view.

Props

SyncedList accepts the following props:

| Properties | PropType | Description | | ------------------------------ | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | data | Array | (Required) Each element in the array must have an id, a title (section title) and a data array (data of each section) | | initialId | Number | id of the initial item to scroll | | horizontalListContainerStyle | Object | Style for the content container of the horizontal list | | verticalListContainerStyle | Object | Style for the content container of the Vertical list | | renderHorizontalItem | Func | Function to render a custom item on the horizontal list. Accepts the item , current index and if it is selected eg. (index:number, isSelected:boolean, item:Item,) => ... | | renderSectionHeader | Func | Function to render a custom header on each section. Accepts the section eg. (section:Section ) => ... | | renderVerticalItem | Func | Function to render a custom item on the vertical list. Accepts the item eg. (item:Item) => ... | | verticalListProps | Object | Extra props of the vertical section list | | horizontalListProps | Object | Extra props of the horizontal flat list |

Authors:

• Efstathios Ntonas
• George Bakogiannis
• George Kallinikos