react-native-focus-list

A React Native component that gets a list and highlights a selected item and shows the items that are near.

Installation

npm install --save react-native-focus-list

Usage

import React, { Component } from 'react';
import FocusList from 'react-native-focus-list';

export default class App extends Component {
    render() {
        return <FocusList dataArray={[1, 2, 3, 4, 5]} marginFirst={20}/>
    }
}

Properties

Name	Type	Default	Description
dataArray	array<any>	REQUIRED	The data array
marginFirst	number	20	Margin for the first item in the array
itemComponent	element	Item from Item.js	Custom wrapper component for list item
startNumber	number	0	The initial index that will be highlighted

Methods

Name	Description
moveForward()	Moves forward in the lst
moveBack()	Moves backward in the list

Full demo