Skele Components

Skele's components package is a library of custom components that aid in building React and React Native apps.

Available Components

Viewport Tracker

Tracks the position and size of a ScrollView, FlatList or SectionList viewport. Communicates it to all viewport aware child components.

Usage

import { Viewport } from '@skele/components'

render() {
  return (
    <Viewport.Tracker>
      <ScrollView scrollEventThrottle={16}>
        { this.props.children }
      </ScrollView>
    </Viewport.Tracker>
  )
}

Viewport Aware

A higher-order component that processes the information communicated by the viewport tracker. Determines whether the wrapped component is in or outside the viewport. Updates the inViewport property of the wrapped component accordingly. Invokes onViewportEnter and onViewportLeave when the component enters or leaves the viewport. Note that handling updates of inViewport is the preferred way of reacting to visibility changes.

Usage

import { Image } from 'react-native'
import { Viewport } from '@skele/components'
const ViewportAwareImage = Viewport.Aware(Image)

render() {
  return (
    <ViewportAwareImage
      source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }}
      preTriggerRatio={0.5}
      onViewportEnter={() => console.log('Entered!')}
      onViewportLeave={() => console.log('Left!')}
      innerRef={ref => (this._ref = ref)} />
  )
}

Properties

| Prop | Description | Default | |---|---|---| |preTriggerRatio| Determines pre-triggering of inViewport. Useful for rendering components beforehand to improve user experience. A ratio of 0.5 means that the effective viewport will be twice the size of the real viewport. | 0 | |onViewportEnter| Invoked when the component enters the viewport. | null | |onViewportLeave| Invoked when the component leaves the viewport. | null | |innerRef| Allows access to the reference of the wrapped component. | null |

With Placeholder

A higher-order component that can be used to display a placeholder while the wrapped component is not in the viewport. This can improve user experience since it can serve as a mechanism for lazy loading.

Usage

import { Image, View } from 'react-native'
import { Viewport } from '@skele/components'

const Placeholder = () =>
  <View style={{ width: 50, height: 50, backgroundColor: 'darkgrey' }} />

const VAImgWithPlaceholder =
  Viewport.Aware(
    Viewport.WithPlaceholder(Image, Placeholder)
  )

render() {
  return (
    <VAImgWithPlaceholder
      // placeholder={Placeholder} // passing down a placeholder at render time
      source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }}
      preTriggerRatio={0.5}
      retainOnceInViewport={true}
      style={{ width: 50, height: 50 }} />
  )
}

Properties

| Prop | Description | Default | |---|---|---| |placeholder| Useful for passing down a placeholder at render time. | null | |retainOnceInViewport| Whether to keep the wrapped component displayed once it enters the viewport. | false |