Performant React Native Image Component

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

Download Details:

Author: DylanVann

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/DylanVann/react-native-fast-image

License: MIT

You Might Be Interested In:

Add Comment