Performant React Native Image Component

Description:

A performant React Native image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built-in caching behavior you’d have in a browser.

Installation:

# Yarn
$ yarn add react-native-fast-image
# NPM
$ npm install react-native-fast-image --save

Usage:

import React from 'react'
import { TabNavigator, TabBarBottom } from 'react-navigation'
import FastImageExample from './FastImageExample'
import FastImageGrid from './FastImageGrid'
import DefaultImageGrid from './DefaultImageGrid'
const App = TabNavigator(
  {
    fastImageExample: {
      screen: FastImageExample,
    },
    image: {
      screen: DefaultImageGrid,
    },
    fastImage: {
      screen: FastImageGrid,
    },
  },
  {
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    tabBarOptions: {
      style: {
        backgroundColor: 'white',
      },
    },
  },
)
export default App

Preview:

Performant React Native Image Component

Add Comment