Futurebit-image-react-native NPM

Futurebit Image React Native

A React Native component for progressive image loading

Installation

Run in your root project directory

using NPM

$ npm install futurebit-image-react-native

or using yarn

$ yarn add futurebit-image-react-native

or using bun

$ bun add futurebit-image-react-native

Usage

import React, { Component } from 'react';
import { View } from 'react-native';
import ImageBlurLoading from 'futurebit-image-react-native'

// ...
const MyComponent = () => {
  return (
    <View style={{ flex: 1 }}>
      <ImageBlurLoading
        thumbnailSource={{ uri: 'https://picsum.photos/id/1/50/50' }}
        source={{ uri: 'https://picsum.photos/id/1/1000/1000' }}
        style={{ flex: 1, width: 'auto', height: 'auto', resizeMode: 'contain' }}
      />
    </View>
  )
}

Properties

Props	Description	Type	Required	Default
Image props ...	It accepts all the Image props	-	-	-
`thumbnailSource`	The source of the thumbnail image. Should be a low resolution version of the image used in `source`.	ImageSourcePropType	No	-
`withIndicator`	Displaying `ActivityIndicator` component while the image is still loading.	boolean	No	`true`
`fastImage`	uses the FastImage component (react-native-fast-image) to handle image caching.	boolean	No	`false`
`resizeMode`	Determines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to `cover`.	ResizeMode	No	`cover`

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

react-native react-native-component react native ios android ui image progressive loading image loading progressive image loading progressive-image-loading futurebit-image-react-native

react-native-fast-image react react-native expo

1.0.1

11 months ago

1.0.0

11 months ago