- Synced list component for horizontal and vertical navigation between items
- Written in
Typescript
yarn add @georstat/react-native-synced-listnpm i @georstat/react-native-synced-listimport{SyncedList}from'@georstat/react-native-synced-list';constlistData: 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];constMySyncedList=()=>{return(<Viewstyle={{flex: 1}}><SyncedListdata={listData}/></View>);};For more info check example
import{SyncedList}from'@georstat/react-native-synced-list';constMySyncedList=()=>{constrenderHorizontalItem=(index: number,isSelected: boolean,item: any)=>{return(<Viewstyle={{borderRadius: 7,overflow: 'hidden'}}><Viewstyle={isSelected
? [styles.itemContainer,styles.itemContainerSelected]
: styles.itemContainer}><Text>{item.title}</Text></View></View>);};constrenderVerticalItem=(item: any)=>{return(<Viewstyle={styles.verticalItemContainer}><Text>{item}</Text></View>);};constrenderSectionHeader=(section: any)=>{return(<Viewstyle={styles.headerContainer}><Viewstyle={styles.innerHeaderContainer}><Textstyle={styles.header}>{section.title}</Text></View></View>);};return(<Viewstyle={{flex: 1}}><SyncedListdata={listData}horizontalListContainerStyle={styles.horizontalListContainerStyle}renderHorizontalItem={renderHorizontalItem}renderSectionHeader={renderSectionHeader}renderVerticalItem={renderVerticalItem}/></View>);};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.
| 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 |