React-native-spinning-image NPM

react-native-spinning-image

About

Simple spinner for any image file or link that is supported within React Native. Perfect for using a custom icon or image in a loading screen.

Usage

First install the package using the following:

npm i react-native-spinning-image

yarn add react-native-spinning-image

Import the package into your React Native file.

import SpinningImage from 'react-native-spinning-image';

Note

If you you are using an http link you can just enter the link into the source property. However, if you are using a static or local asset you must require it first as follows:

const imageSource = require('../PathToImage');

Add the Loader to your component.

<SpinningImage source={imageSource} />

<SpinningImage source='https://link-to-image' />

You can also adjust settings like in the example below:

<SpinningImage
  source={imageSource}
  speed={3000}
  rotations={5}
  height={400}
  width={300}
  direction='counter'
/>

Properties

Property	Default	Description
`source`	None	Image source. Enter as a string if using a web url and use a require variable if using a local image as shown in the above example. A source property is required.
`speed`	5000	Speed of image rotation in milliseconds. A higher number is a slower rotation speed.
`rotations`	null	Set number of rotations for image to spin. It will spin infinitely without an entered property value or a property value of 0
`height`	200	Sets height of image
`width`	200	Sets width of image
`direction`	null	Set to "counter" to make it spin counterclockwise.

Issues

As of now this is written as a class component since React Hooks do not work well with some tools like Expo. Once it becomes stable I will switch this over to a React Hook.

Address any issues or feature requests @

https://github.com/theranbrig/react-native-spinning-image/issues

Author

Theran Brigowatz is a Full-stack Web Developer currently out of Seoul, South Korea, but transitioning back to the US. Check him out at the following:

react-native react-component spinner loader react react native react component spinning loading picture image

@infinitebrahmanuniverse/nolb-react-native-sp @everything-registry/sub-chunk-2592 @zalastax/nolb-react-native-sp

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago