react-native-alpha-scroll-flat-list-haptic v1.0.5

react-native-alpha-scroll-flat-list-haptic

This package provides an alphabetical scrolling capable FlatList and haptic IOS effect. It supports thousands of items and runs smoothly on phones.

You can find this component on npm:

npm install react-native-alpha-scroll-flat-list-haptic  --save  

example

Usage

The most basic way to use this component is as follows:

import FlatListHaptic  from 'react-native-alpha-scroll-flat-list-haptic';

// inside your render function
<FlatListHaptic
  bottomDividerColor={'#333433'}
  backgroundColor={'black'}
  ReactNativeHaptic={ () => ReactNativeHaptic.generate('impactMedium')}
  titleStyle={{ color: '#fff', fontSize: 20 }}
  sectionHeaderBackgroundColor={'black'}
  sectionHeaderTitleColor={'#006fff'}
  renderItem={(item, key) => (
      <ListItem
        containerStyle={{
          backgroundColor: 'black',
          padding: 10,
          marginLeft: 20,
          marginRight: 20,
          borderColor: '#333433',
        }}
        titleStyle={ { color: '#fff', fontSize: 20 }}
        key={key + item.title}
        title={item.title || 'No Name'}
        bottomDivider
      />
    )}
  list={[
    {title: 'A', section: 0, data: [{title: 'Allan'}, {title: 'Alison'}]},
    {title: 'B', section: 1, data: [{title: 'Bruno'}, {title: 'Bia'}]},
    {title: 'C', section: 2, data: [{title: 'Camila'}, {title: 'Carlos'}]},
    {title: 'D', section: 3, data: [{title: 'Damm'}, {title: 'Dammi'}]},
    {title: 'E', section: 4, data: [{title: 'Einn'}, {title: 'Einni'}]},
    {title: 'F', section: 5, data: [{title: 'Finn'}, {title: 'Finni'}]},
    {title: 'G', section: 6, data: [{title: 'Ginn'}, {title: 'Ginni'}]},
    {title: 'H', section: 7, data: [{title: 'Hnn'}, {title: 'Hnni'}]},
    {title: 'I', section: 8, data: [{title: 'Inn'}, {title: 'Inni'}]},
    {title: 'J', section: 9, data: [{title: 'Junn'}, {title: 'Junni'}]},
    {title: 'K', section: 10, data: [{title: 'Kunn'}, {title: 'Kunni'}]},
    {title: 'L', section: 11, data: [{title: 'Lunn'}, {title: 'Lunni'}]},
    {title: 'M', section: 12, data: [{title: 'Munn'}, {title: 'Munni'}]},
    {title: 'N', section: 13, data: [{title: 'Camila'}, {title: 'Carlos'}]},
    {title: 'Z', section: 14, data: [{title: 'Zunn'}, {title: 'Zinn'}]},
    {title: '#', section: 14, data: [{title: ''}, {title: ''}]},
  ]}
/>