1.0.1 • Published 11 months ago

futurebit-image-react-native v1.0.1

Weekly downloads
-
License
ISC
Repository
github
Last release
11 months ago

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

PropsDescriptionTypeRequiredDefault
Image props ...It accepts all the Image props---
thumbnailSourceThe source of the thumbnail image. Should be a low resolution version of the image used in source.ImageSourcePropTypeNo-
withIndicatorDisplaying ActivityIndicator component while the image is still loading.booleanNotrue
fastImageuses the FastImage component (react-native-fast-image) to handle image caching.booleanNofalse
resizeModeDetermines how to resize the image when the frame doesn't match the raw image dimensions. Defaults to cover.ResizeModeNocover

Contributing

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