Nonchalant Programming Master

    react-native-animated-spinkit
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.2 • Public • Published

    React Native Animated SpinKit

    Stable Release license

    A pure JavaScript port of SpinKit for React Native.

    Why Another Port?

    The previous port of SpinKit for React Native (react-native-spinkit) is a native module so it requires extra native dependencies and can't be used in Expo projects without ejecting.

    This library is a pure JavaScript port of SpinKit implemented with the Animated API, which means you can use it in any React Native project and the spinners will look identical on Android and iOS.

    Installation

    yarn add react-native-animated-spinkit

    or

    npm install react-native-animated-spinkit

    Usage

    import { Plane } from 'react-native-animated-spinkit'
    
    function App() {
      return (
        <View style={styles.container}>
          <Plane size={48} color="#FFF">
        </View>
      )
    }

    Props

    Inherits View Props

    size

    number | defaults to 48

    Width and height of the spinner.

    color

    string | defaults to #000

    Color of the spinner.

    animating

    boolean | defaults to true

    Whether to show the indicator or hide it.

    hidesWhenStopped

    boolean | defaults to true

    Whether the indicator should hide when not animating.

    Spinners

    All the spinners from SpinKit have been ported.

    • <Plane />
    • <Chase />
    • <Bounce />
    • <Wave />
    • <Pulse />
    • <Flow />
    • <Swing />
    • <Circle />
    • <CircleFade />
    • <Grid />
    • <Fold />
    • <Wander />

    Example

    To run the example project, follow these steps:

    • Clone the repo
    • Run these commands
    yarn
    cd example
    yarn && yarn start

    Install

    npm i react-native-animated-spinkit

    DownloadsWeekly Downloads

    2,050

    Version

    1.5.2

    License

    MIT

    Unpacked Size

    270 kB

    Total Files

    99

    Last publish

    Collaborators

    • tienphaw