react-native-autoplay-scroll-video

A SectionList component that identifies which item is in centre of the screen.

Installation

Installation can be done through npm or yarn:

npm i react-native-autoplay-scroll-video --save

yarn add react-native-autoplay-scroll-video

Example

Working Implementation as seen in GIF above - https://github.com/mikejcooper/React-Native-Autoplay-Infinity-Scroll

Usage

We extend the SectionList component adding two new props: the

• focusWindow = The number of items above and below the centre that will be triggered in the callback.
• renderItemWithInfo = Replaces normal 'renderItem' function. Introduces two booleans, itemInFocus & itemInFocusWindow.

import SectionListInFocus from '@reactly/react-native-autoplay-scroll-video'

<SectionListInFocus
    focusWindow={2}
    renderItemWithInfo={(item: VideoData, itemInFocus: boolean, itemInFocusWindow: boolean) => {
      return (
        <YourListItem
          playContent={itemInFocus}
          loadContent={itemInFocusWindow}
        />
      )
    }}
    {...YourSectionListProps}
/>

API

Props

All the SectionList props will be passed.

| Prop | Type | Description | | --------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------- | | renderItemWithInfo | Function | New renderItem function | | focusWindow | number | Items above and below the centre that will receive itemInFocusWindow as true. |

License

MIT.

Author

Mike Cooper