9

Synced Horizontal and Vertical List For React Native

 3 years ago
source link: https://reactnativeexample.com/synced-horizontal-and-vertical-list-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 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:

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK