Thank you for react-native-spinkit

If I use it with react-native 0.28, all that gets produced is a red square border. The size can be changed with the size parameter, but nothing gets displayed beyond that.

I am using your module for my project

/**

• Created by hero on 2016-07-02.
  */

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity
} from 'react-native';

var Spinner = require('react-native-spinkit');

var MainPage = React.createClass({

render()
{
    return(
        <View style={styles.container}>
            <Spinner isVisible={true} size={120} type="Pulse" color="#00ff00"/>
        </View>
    );
}

});

var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff'
}
});
export default MainPage;

But when I display this page I get only rectangle with red border.
Can you please tell me what's wrong in my project?

Hi!

I use type ThreeBounce and it works fine until I press the power button. When I turn the screen on again the animation is stopped. The spinner looks "frozen". Pressing a button or something makes it work again.

always get 0.1.5 installed even forcibly install by npm install [email protected] --save

node version 5.12.0
npm version 3.8.6
react-native version 0.40

Hi, i am new to RN and am facing this issue when i packaged my android project APK (Running on debug works fine)

During runtime, i get a com.facebook.react.modules.core.JavascriptException: Requiring unknown module "react-native-spinkit",

I am using the latest ReactNative 0.23.1

Is there any advice in facing this issue?

Full stack trace below

E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
com.facebook.react.modules.core.JavascriptException: Requiring unknown module "react-native-spinkit", stack:
        t@2:387
i@2:177
<unknown>@720:131
t@2:511
i@2:177
<unknown>@710:297
t@2:511
i@2:177
<unknown>@645:278
t@2:511
i@2:177
<unknown>@640:387
t@2:511
i@2:177
<unknown>@638:180
t@2:511
i@2:177
<unknown>@637:83
t@2:511
i@2:177
<unknown>@636:1490
t@2:511
i@2:177
<unknown>@635:131
t@2:511
i@2:177
<unknown>@371:345
t@2:511
i@2:177
<unknown>@11:80
t@2:511
t@2:240
i@2:177
<unknown>@871:9

at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:90)
at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:78)
at java.lang.reflect.Method.invoke(Native Method)
at com.facebook.react.bridge.BaseJavaModule$JavaMethod.invoke(BaseJavaModule.java:266)
at com.facebook.react.bridge.NativeModuleRegistry$ModuleDefinition.call(NativeModuleRegistry.java:183)
at com.facebook.react.bridge.NativeModuleRegistry.call(NativeModuleRegistry.java:62)
at com.facebook.react.bridge.CatalystInstanceImpl$NativeModulesReactCallback.call(CatalystInstanceImpl.java:421)
at com.facebook.react.bridge.queue.NativeRunnableDeprecated.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
at android.os.Looper.loop(Looper.java:148)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:187)
at java.lang.Thread.run(Thread.java:818)

Can someone explain how to add spinner as a overlay?

i tried to use ThreeBounce but the more size i go the more top padding i get. and it's not possible to handle it from the design

ex. https://ibb.co/mX86kF
<Spinner type="ThreeBounce" size={ 60 } />

i figure out this is because of the circle.frame it gives the Y value as the hight / 2
i guess the Y value needs to be 0 so the spinner start from the begging and doesn't force the upper empty space

After the Manual linking - IOS when performing a build gives me the following error. Can you help me? Thank you!
RN: 0.39
Xcode: 8.2

I am getting this error when running npm install on example folder.

Downloads/react-native-spinkit-master/Example 
-MacBook-Pro:Example rahan$ npm install
npm WARN deprecated [email protected]: use uuid module instead
npm ERR! Darwin 16.3.0
npm ERR! argv "/usr/local/Cellar/node/7.4.0/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v7.4.0
npm ERR! npm  v4.0.5
npm ERR! code ETARGET

npm ERR! notarget No compatible version found: [email protected]
npm ERR! notarget Valid install targets:
npm ERR! notarget 1.0.1, 1.0.0, 0.1.5, 0.1.4, 0.1.3, 0.1.2, 0.1.1, 0.1.0, 0.0.11, 0.0.10, 0.0.9, 0.0.8, 0.0.7, 0.0.6, 0.0.5, 0.0.4, 0.0.3, 0.0.2, 0.0.1
npm ERR! notarget 
npm ERR! notarget This is most likely not a problem with npm itself.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget 
npm ERR! notarget It was specified as a dependency of 'Example'
npm ERR! notarget 

react-native: 0.45.1
react: 16.0.0.alpha-12
react-native-spinkit: 1.0.3 (upgraded from 1.0.2 recently)

Spinner usage on Android triggers error?

usage:

<Spinner isVisible={true} size={80} type={'Wave'} color={'#ffffff'}/>

When building this project for Android it fails with the following error:

failed to find Build Tools revision 23.0.3

Would it be a good idea to replace your version with the same as Facebook uses for React Native? That should not introduce a problem and solves it for people that only have Build Tools revision 23.0.1 installed.
https://github.com/facebook/react-native/blob/master/ReactAndroid/build.gradle#L219

I have verified that this change solves the problem for me.

First page no play...

        <ViewPagerAndroid style={{flex: 1}}>
          <View style={styles.commonChildContainer}>
            <ProgressBarAndroid />   <-- normal
            <Spinner                 <-- no play
              size={45}
              type="ChasingDots" />
            <Text style={styles.tipsText}>
              loading_1...
            </Text>
          </View>
          <View style={styles.commonChildContainer}>
            <ProgressBarAndroid />  <-- normal
            <Spinner                <-- normal
              size={45}
              type="ChasingDots" />
            <Text style={styles.tipsText}>
              loading_2...
            </Text>
          </View>
        </ViewPagerAndroid>

        .... style
         commonChildContainer: {
           flex: 1,
           alignItems: 'center',
           justifyContent: 'center',
         }

CocoaPods is a centralized package manager for Objective-C and Swift projects.
https://cocoapods.org/

Here is the guide how to submit
https://guides.cocoapods.org/making/index.html

How can I add multiple color into a spinner, or dynamic color while spin?

@maxs15

When there are multiple spinners visible in an app, only the last spinner animates.

The project is using RN 0.32 and react-native-spinkit 0.1.3

Tested on Moto X emulator (Android 4.4.4) and OnePlus 3 (Android 6.0.1)

Currently, if we display a spinner, there is no way to determine whether or not we want the user interaction to be blocked. It would be nice to have that option

I made a prototype of the Spinner working and was considering using this for a project but, as there was no license attached, I am sadly not going to be able to use the library.

Do you have plans to include a LICENSE file?

"react": "~15.4.1",
"react-native": "0.42.0",
"react-native-spinkit": "^1.0.2"

• react-native link (done)

Testing use Example react-native-spinkit.

Tested on Ios => OK
Tested on android => can show but not animate (run on device lenovo with android version 6.0.1)

Awesome package by the looks of it. When I tried to get it working, I ran into this error:

[node-haste] Encountered an error while persisting cache:

SyntaxError: /Users/AlexMac/Projects/PalateCleanser/node_modules/react-native-spinkit/scripts/rnpm-prelink.js: 'return' outside of function (42:0)
// etc, can post if full log is helpful

I install via npm, linked up with rnpm, and my test code is very simple:

import Spinner from 'react-native-spinkit';
// (in render)
<Spinner isVisible={true} size={24} type={"Circle"} color="#000000"/>

On screen, the loading spinner does not show up and a thin red box of the appropriate size appears instead.

Thanks much for any help!

I think it is worth mentionning in the docs that manual linking is required if a module such as react-native-navigation is used

Awsome project!
React native for android released. support android?

hare

I'm sorry. I'm really newbie about android build system. I can't found any information to solve this.

I get the next log when I try to build my app.

* What went wrong:
A problem occurred configuring project ':app'.
> A problem occurred configuring project ':react-native-spinkit'.
   > Could not resolve all dependencies for configuration ':react-native-spinkit:_debugCompile'.
      > Could not resolve com.github.ybq:Android-SpinKit:1.0.4.
        Required by:
            AppPzj:react-native-spinkit:unspecified
         > Could not resolve com.github.ybq:Android-SpinKit:1.0.4.
            > Could not get resource 'https://jitpack.io/com/github/ybq/Android-SpinKit/1.0.4/Android-SpinKit-1.0.4.pom'.
               > Could not GET 'https://jitpack.io/com/github/ybq/Android-SpinKit/1.0.4/Android-SpinKit-1.0.4.pom'.
                  > peer not authenticated
         > Could not resolve com.github.ybq:Android-SpinKit:1.0.4.
            > Could not get resource 'https://jitpack.io/com/github/ybq/Android-SpinKit/1.0.4/Android-SpinKit-1.0.4.pom'.
               > Could not GET 'https://jitpack.io/com/github/ybq/Android-SpinKit/1.0.4/Android-SpinKit-1.0.4.pom'.
                  > peer not authenticated

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

Hey RN users !

As you imagine, one of the most wanted feature for this component was the support of Android..
Well I'm happy to announce that the new version 0.0.6 introduce the support of Android !!! 🎉 🎉 🎉
But for now only one type of spinner is available 👉 ThreeBounce

Our goal is of course to release the 14 types currently available for IOS !
But it takes time.. and I really think creating a spinner is a great exercise for any developers interested in creating animations for React Native using the Animated library.

If you're interested, please let me know by replying to this issue, the more contributors we are the faster we will reach our goal to provide the most complete component to handle loading indicators in React Native !

Everything is already set up to integrate a new spinner and it's super easy:
1/ Add the spinner type you've created in the types object available here
2/ Create your spinner file in the spinner folder and be sure to use the same naming convention (Example: circle-flip.jsfor the CircleFliptype)
3/ There is no more steps, you're ready to submit your PR ! 👍

Thanks :)

You should be able to set duration or speed on the component

Everything is working fine for iOS but for Android i have this warning and instead of spinner i see red square

React and Component should now be imported from react instead of react-native

If 0.1.4 is stable it should be pushed to npm right?

the spinet don't show,and don't animate,
I use it like this

We ran these commands and copy/paste your code (https://github.com/maxs15/react-native-spinkit/blob/master/Example/index.ios.js) but could not get it to work. The emulator is showing a red square above the text menu. It threw a warning in the emulator that it could not find the Spinner component but the warning goes away when I switch from using require to import. However the animation runs fine with the same code when deploying to the emulator from xcode. Let us know if there's something else we can try. THANKS!

npm install react-native-spinkit@latest --save
rnpm link react-native-spinkit

Developing an app, I noticed that the color prop in iOS only works if inserted the full hex value of the color. Example: #fff(white) would not work, only #FFFFFF(white).

I am getting these three warning after upgraded to rn v46.

Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead. (https://fb.me/migrating-from-react-proptypes)

Warning: React.createClass is no longer supported. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

Warning: View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead.

React-Native v0.30
react-native-spinkit v1.2.0 and v1.3.0

With rnpm link, it shows red square. After that, I tried manual installation, then spinkit doesnt animate.

I encountered the following issue when linking the module for Android in my current project:

react-native link react-native-spinkit
RNSpinkit checking app version ..
RNSpinkit patching MainApplication.java ..

<PROJECT_PATH>/node_modules/react-native-spinkit/scripts/rnpm-prelink.js:71
    throw 'RNSpinkit could not link Android automatically, MainApplication.java not found in path : ' + APPLICATION_MAIN
    ^
RNSpinkit could not link Android automatically, MainApplication.java not found in path : <PROJECT_PATH>/android/app/src/main/java/com/<PACKAGE_NAME>/MainApplication.java
<PROJECT_PATH>/node_modules/react-native/local-cli/core/makeCommand.js:19
        throw new Error(`Error occured during executing "${ command }" command`);
        ^

Error: Error occured during executing "node ./node_modules/react-native-spinkit/scripts/rnpm-prelink.js" command
    at ChildProcess.prelink (<PROJECT_PATH>/node_modules/react-native/local-cli/core/makeCommand.js:19:15)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:852:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)

It turns out that the problem was that the script assumes that your project name is the same as the package name, which wasn't the case in my project (the package name had a suffix, -mobile) in the package name to avoid package naming collisions.

code used:
<Spinner style={{style}} isVisible size={80} type={'ThreeBounce'} color={'white'} />

the color comes up black :(
I also tried using
color={'#fff'}

Any ideas??

Hi, I run "rnpm link" but failed to link react-native-spinkit's iOS dependencies.
I am still investigating why, because I am not familiar with RNPM yet.

Could not find com.github.ybq:Android-SpinKit:1.1.0.
Searched in the following locations:
https://jcenter.bintray.com/com/github/ybq/Android-SpinKit/1.1.0/Android-SpinKit-1.1.0.pom
https://jcenter.bintray.com/com/github/ybq/Android-SpinKit/1.1.0/Android-SpinKit-1.1.0.jar
file:/Users/....../pagalo_asi/node_modules/react-native/android/com/github/ybq/Android-SpinKit/1.1.0/Android-SpinKit-1.1.0.pom
file:/Users/......./pagalo_asi/node_modules/react-native/android/com/github/ybq/Android-SpinKit/1.1.0/Android-SpinKit-1.1.0.jar
file:/Users/.../Library/Android/sdk/extras/android/m2repository/com/github/ybq/Android-SpinKit/1.1.0/Android-SpinKit-1.1.0.pom
file:/Users/.../Library/Android/sdk/extras/android/m2repository/com/github/ybq/Android-SpinKit/1.1.0/Android-SpinKit-1.1.0.jar
file:/Users/.../Library/Android/sdk/extras/google/m2repository/com/github/ybq/Android-SpinKit/1.1.0/Android-SpinKit-1.1.0.pom
file:/Users/.../Library/Android/sdk/extras/google/m2repository/com/github/ybq/Android-SpinKit/1.1.0/Android-SpinKit-1.1.0.jar
Required by:
Project:app:unspecified > Project:react-native-spinkit:unspecified

React.PropTypes is deprecated as of React v15.5, Convert this to import PropTypes from 'prop-types'; click here more detail.

Hi,

I user spinkit in ios without any error.
But when migrate to Android, its just show a Red Square like this:

I have try auto link & manual link, but still no hope to get it working.
I follow this guide too but the same result, not working #26

this is my system info:

• react-native-cli: 1.0.0
• react-native: 0.30.0

Please help!

When I use a number for the size it works fine, but using a variable causes errors.

When I run it on Android I get this error:
"Error while updating property 'size' of a view managed by: RNSpinkit"

Here is the relative code:

var deviceWidth = Dimensions.get('window').width;
var deviceHeight = Dimensions.get('window').height;

var smallSpinner = deviceWidth/2;
var largeSpinner = deviceWidth/1.75;

<Spinner type='Bounce' color='#ffffff' size={largeSpinner}/>
<Spinner type='Bounce' color='#ffffff' size={smallSpinner}/>

The same happens when using states:

getInitialState() {
        return {
            smallSpinner: deviceWidth/2,
            largeSpinner: deviceWidth/1.75
        }
    },

<Spinner type='Bounce' color='#ffffff' size={this.state.largeSpinner}/>
<Spinner type='Bounce' color='#ffffff' size={this.state.smallSpinner}/>

This works fine on iOS.

"react": "^15.3.1",
"react-native": "^0.40.0",
"react-native-spinkit": "1.0.2",

主要配置是这样的，但在Android 酷派手机上面不显示这个动画，andorid 酷派Coolpad 8675 系统是4.4

I just upgraded to react native 0.29 and when try to compile, getting this error:

A problem occurred configuring project ':app'.
> A problem occurred configuring project ':react-native-spinkit'.
   > Could not resolve all dependencies for configuration ':react-native-spinkit:_debugCompile'.
      > Could not find com.android.support:support-v4:23.2.1.
        Searched in the following locations:
            https://jitpack.io/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            https://jitpack.io/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            file:/Users/shidhin/.m2/repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            file:/Users/shidhin/.m2/repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            https://jcenter.bintray.com/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            https://jcenter.bintray.com/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            file:/Users/shidhin/Dropbox/code_playground/swag/node_modules/react-native/android/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            file:/Users/shidhin/Dropbox/code_playground/swag/node_modules/react-native/android/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            https://repo1.maven.org/maven2/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            https://repo1.maven.org/maven2/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            file:/usr/local/opt/android-sdk/extras/android/m2repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            file:/usr/local/opt/android-sdk/extras/android/m2repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
        Required by:
            namshi.app:react-native-spinkit:unspecified > com.facebook.react:react-native:0.29.0 > com.android.support:recyclerview-v7:23.0.1
            namshi.app:react-native-spinkit:unspecified > com.facebook.react:react-native:0.29.0 > com.android.support:appcompat-v7:23.0.1
      > Could not find com.android.support:support-v4:23.2.1.
        Searched in the following locations:
            https://jitpack.io/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            https://jitpack.io/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            file:/Users/shidhin/.m2/repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            file:/Users/shidhin/.m2/repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            https://jcenter.bintray.com/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            https://jcenter.bintray.com/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            file:/Users/shidhin/Dropbox/code_playground/swag/node_modules/react-native/android/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            file:/Users/shidhin/Dropbox/code_playground/swag/node_modules/react-native/android/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            https://repo1.maven.org/maven2/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            https://repo1.maven.org/maven2/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
            file:/usr/local/opt/android-sdk/extras/android/m2repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.pom
            file:/usr/local/opt/android-sdk/extras/android/m2repository/com/android/support/support-v4/23.2.1/support-v4-23.2.1.jar
        Required by:
            namshi.app:react-native-spinkit:unspecified > com.facebook.react:react-native:0.29.0 > com.facebook.fresco:imagepipeline-okhttp3:0.11.0 > com.facebook.fresco:imagepipeline:0.11.0
            namshi.app:react-native-spinkit:unspecified > com.facebook.react:react-native:0.29.0 > com.facebook.fresco:fresco:0.11.0 > com.facebook.fresco:drawee:0.11.0
            namshi.app:react-native-spinkit:unspecified > com.facebook.react:react-native:0.29.0 > com.facebook.fresco:imagepipeline-okhttp3:0.11.0 > com.facebook.fresco:imagepipeline:0.11.0 > com.facebook.fresco:imagepipeline-base:0.11.0

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

Any leads ?

RN v0.45
Spinkit v1.0.2
Android 7.0

After upgrading to RN v0.45 and build tools 25.0.2 and compileSdk to 25 in build.grandle

The following error started to appear on android:

`Spinkit` has no propType for native prop `RNSpinkit.nativeID` of native type `String`
If you haven't changed this prop yourself, this usually means that your versions of the native code and JavaScript code are out of sync. Updating both should make this error go away.
verifyPropTypes
    verifyPropTypes.js:67:22
requireNativeComponent
    requireNativeComponent.js:108:6
<unknown>
    index.js:54:35
loadModuleImplementation
    require.js:174:12
guardedLoadModule
    require.js:126:36
_require
    require.js:110:24
<unknown>
    index.js:86:22
loadModuleImplementation
    require.js:174:12
guardedLoadModule
    require.js:126:36
_require
    require.js:110:24
<unknown>
    Navigator.js:29
loadModuleImplementation
    require.js:174:12
guardedLoadModule
    require.js:126:36
_require
    require.js:110:24
<unknown>
    NavigatorView.js:5
loadModuleImplementation
    require.js:174:12
guardedLoadModule
    require.js:126:36
_require
    require.js:110:24
<unknown>
    NavigatorViewContainer.js:2
loadModuleImplementation
    require.js:174:12
guardedLoadModule
    require.js:126:36
_require
    require.js:110:24
<unknown>
    index.js:13
loadModuleImplementation
    require.js:174:12
guardedLoadModule
    require.js:126:36
_require
    require.js:110:24
<unknown>
    index.android.js:10
loadModuleImplementation
    require.js:174:12
guardedLoadModule
    require.js:119:45
_require
    require.js:110:24
global code
    

Here is the screenshot:

Seems the problem is only on the android platform.

Thank you in advance!

Hello, i have problem with Spinkit in iOS.
I do follow the installation part npm install react-native-spinkit@latest --save or npm install [email protected] --save and then react-native link but still red square will appear in the screen

here my package.json

"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-native-spinkit": "^0.1.5",

I followed the example and I got this : https://puu.sh/qaxut/98de9b9ccd.png

Do you have an idea of what is the cause ?

Thanks !

Which version I need to use for RN 0.4 ?