assetcrush

A simple react-native library to resize image on fly.

What is assetcrush ?

assetcrush is an image resize service for on the fly dynamic resize. If your users are uploading images of various sizes and then you are consuming those images on different devices then this service is ideal for your use. Since every device has different dimensions our sdk will make sure to get the rightly resized image for you via assetcrush resize service.

Getting started

https://assetcrush.com/en/docs/getting-started

Installation

npm i @assetcrush/react-native-sdk --save

or with yarn

yarn add @assetcrush/react-native-sdk

Usage

import React from "react";
import { StyleSheet } from "react-native";
import { ImageCrush, setKey } from '@assetcrush/react-native-sdk';

// replace test-key with your assetcrush key
setKey("test-key");

export default function App() {
  return (
    <ImageCrush
      source={{
        uri: "https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg"
      }}
      style={styles.image}
    />
  );
}

const styles = StyleSheet.create({
  image: { width: 300, height: 300 },
});

Props

| Prop | Type | Required | Note | | -------- | -------- | -------- | -------------------------------------------- | | source | object | yes | source object should contain uri | | style | object | no | style object | | spinnerIcon | element | no | Custom Reactative element for loading | | reloadIcon | element | no | Custom Reactative element for retry | | spinnerColor | string | no | Custom color for loading | | hideSpinner | bool | no | Show or hide loading | | onError | func | no | If image fails to load | | onLoad | func | no | When image loads successfully | | acEnv | string | no | Envoirment of the compoent |

Any additional props are passed down to underlying <Image /> element.

Run example

git clone https://github.com/assetcrush/react-native-sdk.git
cd react-native-sdk/example
yarn install # or npm install

# to run with npm
npm start

# to run with yarn
yarn start

Seeing issues or any feedback or feature suggest ?

Create an issue with github.