0.0.8 • Published 2 years ago
@assetcrush/react-native-sdk v0.0.8
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.