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