Can't load spinner after upgrading to 0.26

[bfarrgaynor]

Hi,

I just upgraded my React project to 0.26.3 and after removing and re-adding the latest package I can no longer get this project to run.

What I'm running

  "dependencies": {
    "@exponent/react-native-navigator": "^0.4.7",
    "@remobile/react-native-splashscreen": "^1.0.3",
    "react": "^15.0.2",
    "react-native": "^0.26.3",
    "react-native-button": "^1.6.0",
    "react-native-checkbox": "^1.0.8",
    "react-native-date-time-picker": "0.0.4",
    "react-native-loading-spinner-overlay": "^0.1.2",
    "react-native-maps": "^0.6.0",
    "react-native-message-bar": "^1.6.0",
    "react-native-progress": "^2.2.0",
    "react-native-vector-icons": "^1.0.4",
    "react-timer-mixin": "^0.13.3",
    "react-native-swipeout": "git+https://github.com/magrinj/react-native-swipeout"
  }
}

Usage in my component:

'use strict';

var React = require('react');
var ReactNative = require('react-native');

var CheckBox = require('react-native-checkbox');
var global = require('../globals.js');
var cpAPI = require('../cpAPI.js');
var cpAPIAuth = require('../cpAPIAuth.js');
var gStyles = require('../styles/globalStyles.js');
var Button = require('react-native-button');

var {
  View,
  Platform,
  TouchableHighlight,
  TouchableNativeFeedback,
  ScrollView,
  StyleSheet,
  Image,
  TouchableOpacity,
  Switch,
  TextInput,
  AsyncStorage,
  Alert,
  Text
} = ReactNative;

var Icon = require('react-native-vector-icons/MaterialIcons');

import Spinner from 'react-native-loading-spinner-overlay';

var CPRouter = require('../router.js');

var Login = React.createClass({

  getInitialState: function() {

        return {
          attemptingLogin: false,
          rememberMeBool: false,
          rememberMeString: "no",
          username: '',
          password: '',
        };

  },

  componentDidMount: function() {

       var rememberMeBool = this.state.rememberMeBool;
       var rememberMeString = this.state.rememberMeString;
       var username = this.state.username;
       var password = this.state.password;

         global.liveObjects.loginView = this;

       //get the username and password (this could be a multi fetch)
       var result = AsyncStorage.getItem("rememberMe").then(function(value) {

            console.log("Async Remember Me Is: " + value);

            if(value) {

                   rememberMeString = value;
                   if(rememberMeString == "yes") {
                        rememberMeBool = true;
                    }

                    AsyncStorage.getItem("username").then(function(value) {

                        console.log("Async username Is: " + value);

                           if(value) {

                                username = value;

                                AsyncStorage.getItem("password").then(function(value) {

                                       if(value) {

                                            password = value;

                                              console.log("Async password Is: " + value);

                                               if(rememberMeBool) {
                                                    global.liveObjects.loginView.setState({
                                                        rememberMeBool:true,
                                                        rememberMeString:"yes",
                                                        username:username,
                                                        password:password,

                                                    });   

                                                } else {

                                                 global.liveObjects.loginView.setState({
                                                        rememberMeBool:false,
                                                        rememberMeString:"no",
                                                        username:'',
                                                        password:'',

                                                    });   

                                                }

                                       }

                                }); 
                           }

                    }); 

               }

        }); 

   },

   setRememberMeItems: function() {

        console.log("You are setting remember me to: " + this.state.rememberMeString);
        AsyncStorage.setItem("rememberMe", this.state.rememberMeString); 

        if(this.state.rememberMeBool) {
            console.log("Saving user data to persistient storage. Username: " + this.state.username + " Password: " + this.state.password);
            AsyncStorage.setItem("username", this.state.username); 
            AsyncStorage.setItem("password", this.state.password); 
        } else {
             console.log("Wiping user data from persistient storage");
            AsyncStorage.removeItem("username").then(function() {
                     AsyncStorage.removeItem("password"); 
            }); 

        }

    },

   rememberMe: function(value) {

       var rememberMe;

       rememberMe = "no";  
       if(value) {
            rememberMe = "yes";  
       }
       this.setState({rememberMeBool:value, rememberMeString:rememberMe});

   },

   loginButtonClick: async function() {

      console.log(global);

       this.setRememberMeItems();

       this.setState({attemptingLogin: true});

         var response = await cpAPIAuth.login(this.state.username, this.state.password, false);
        //abroome EIT#33
         console.log("Server finished.");

          this.setState({attemptingLogin: false});

         if(response) {   
            //Alert.alert('Good',"It worked",); 
            this.props.rootView.setState({showLogin: false});

         } else {

            this.props.rootView.setState({showLogin: true});
         }

         // this.setState({attemptingLogin: true}).then({   Alert.alert('Good',"It worked",); }).then({  this.setState({attemptingLogin: false}); }).done();
        console.log(global);

    },

   render: function() {

    var TouchableElement = TouchableHighlight;
    if (Platform.OS === 'android') {
     TouchableElement = TouchableNativeFeedback;
    }

         //if(true) {
         if (this.state.attemptingLogin) {
             var loginLogo = <View></View>;

            if (Platform.OS === 'ios') {
            var loginForm = <View style={gStyles.loginActivity}>
             <Spinner color={'white'} visible={true} />
                            </View>;

            } else {
                var loginForm = <View><Spinner color={'white'} visible={true} /></View>;
            }
         } else {
           var loginLogo =  

           <View style={gStyles.cpLoginLogoWrapper}>
                <Image resizeMode={'contain'} source={require('../images/login/collegepro_logo_white.png')} style={gStyles.cpLoginLogo} />
            </View>;
            var loginForm =

            <View style={gStyles.login}>

                <View style={gStyles.loginUsernameField}>
                    <View style={gStyles.loginUsernameIcon}>
                        <Icon name="assignment-ind" size={28} color="#CCCCCC" />
                    </View>
                    <TextInput
                    style={gStyles.loginField} autoCorrect={false} autoCapitalize={'none'} underlineColorAndroid={'white'} placeholder={'Username'} placeholderTextColor="#CCCCCC"
                    onChangeText={(username) => this.setState({username})}
                    value={this.state.username.toString()}
                  />
                </View>
                <View style={gStyles.loginPasswordField}>
                    <View style={gStyles.loginPasswordIcon}>
                        <Icon name="lock-outline" size={28} color="#CCCCCC" />
                    </View>
                    <TextInput
                    style={gStyles.loginField} placeholder={'Password'} secureTextEntry={true} placeholderTextColor="#CCCCCC"
                    onChangeText={(password) => this.setState({password})}
                    value={this.state.password.toString()}
                  />
                </View>

                <View style={gStyles.loginRememberMe}>
                    <Switch
                    onValueChange={(value) => this.rememberMe(value)}
                    value={this.state.rememberMeBool}  
                    onTintColor="#468EE5"
                    style={gStyles.loginRememberMeSwitch}
                    thumbTintColor="white"
                    tintColor="#468EE5" />

                    <Text style={gStyles.loginRememberMeLabel}>Remember me</Text>
                </View>

                <TouchableOpacity onPress={() => {   this.props.rootView.setState({showForgotPassword: true}); }}>
                        <Text style={gStyles.loginForgotPasswordButton}>
                            Forgot password?
                        </Text>
                </TouchableOpacity>

                <TouchableOpacity onPress={() => {  this.loginButtonClick(); }}>
                        <Text style={gStyles.loginButton}>
                            Sign In
                        </Text>
                </TouchableOpacity>
            </View>;

        }     

        var whatToReturn = 
        <ScrollView scrollEnabled={false} contentContainerStyle={gStyles.loginMasterContainer}>

            <View style={gStyles.loginBGImageWrapper}>
                <Image source={require('../images/login/login_bg_android.png')} style={gStyles.loginBGImage} />
            </View>
            { loginLogo }

            { loginForm }

        </ScrollView>
           ;

     return (whatToReturn);

  }
});

module.exports = Login;

[niftylettuce]

@bfarrgaynor Can you try using npm install react-native-loading-spinner-overlay@0.1.1?

[bfarrgaynor]

This seems to have been fixed by upgrading to 0.28. Calling this closed.

[niftylettuce]

See https://github.com/niftylettuce/react-native-loading-spinner-overlay/issues/20#issuecomment-231388519 @bfarrgaynor