ladjs / react-native-loading-spinner-overlay Goto Github PK

❯ npm install --save [email protected]
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "--save" "[email protected]"
npm ERR! node v5.0.0
npm ERR! npm  v3.10.3

npm ERR! No compatible version found: [email protected]
npm ERR! Valid install targets:
npm ERR! 0.3.0, 0.2.3, 0.2.2, 0.1.1, 0.1.0, 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!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

  "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"
  }
}

'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;

renderScene () {
    return (
        <View flex = {1}>
            <Component>
            {this.renderSpinner()}
        </View>
    )        
}

    renderSpinner : function () {
        const spinValue = this.spinValue.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '350deg']
        })

        const { width, height } = this.state
        if (this.state.spinnerIsVisible === true) {
            return (
                <Spinner visible={this.state.spinnerIsVisible}
                    cancelable = {false}
                    textContent = {'Φόρτωση'}
                    textStyle={{color: '#FFF'}}
                    overlayColor = {'rgba(0, 0, 0, 0.85)'}>
                    <View style = {{flex:1,flexDirection:"column"}}>
                        <Animated.View style ={{transform: [{rotate: spinValue}],top:this.state.height/2-30, left : this.state.width/2-30, width:60, height:60}}>
                            <Image source = {require('./Assets/spinner.png')} onLoad = {() => this.initiateSpinner()}  style={{width: 60, height: 60}}></Image>
                        </Animated.View>
                        <Text style = {{alignSelf:'center',color:'white', top:height/2, fontSize:18, fontWeight:'bold'}}>{this.state.spinnerInfo}</Text>
                    </View>
                    </Spinner>
                )
        } else {
            return null
        }
    },

spinnerRotation :function () {
        console.log("will i spin?");
        this.animation.start(e => {
          if (e.finished == true) {
            this.spinValue.setValue(0);
            this.spinnerRotation();
          } else {
            this.spinValue.setValue(0);
          }
        });
    },

 this.animation = Animated.timing(this.spinValue, {
          toValue: 1,
          duration: 1000,
          easing: Easing.linear,
        })

/opt/jenkins/workspace/RMS Mobile/node_modules/promise/lib/done.js:10
      throw err;
      ^
SyntaxError: /opt/jenkins/workspace/RMS Mobile/node_modules/react-native-loading-spinner-overlay/src/index.js: Unexpected token (52:0)
  50 | const SIZES = ['small', 'normal', 'large'];
  51 | 
> 52 | @autobind
     | ^
  53 | export default class Spinner extends React.Component {
  54 | 
  55 |   constructor(props) {
    at Parser.pp.raise (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseDecorator (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/parser/statement.js:195:10)
    at Parser.pp.parseDecorators (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/parser/statement.js:181:37)
    at Parser.pp.parseStatement (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/parser/statement.js:76:10)
    at Parser.parseStatement (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/plugins/flow.js:30:22)
    at Parser.pp.parseBlockBody (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/parser/statement.js:529:21)
    at Parser.pp.parseTopLevel (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/parser/statement.js:36:8)
    at Parser.parse (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/parser/index.js:129:19)
    at parse (/opt/jenkins/workspace/RMS Mobile/node_modules/babylon/lib/index.js:47:47)
    at File.parse (/opt/jenkins/workspace/RMS Mobile/node_modules/babel-core/lib/transformation/file/index.js:517:34)
    at File.parseCode (/opt/jenkins/workspace/RMS Mobile/node_modules/babel-core/lib/transformation/file/index.js:603:20)
:app:bundleReleaseJsAndAssets FAILED

this.state = {
  index:this.props.data,
  urls:null,
  visible:true,

spinner time(0.4.0) = 4 to 5 second, 
ActivityIndicator time (RN docs)= 2 to 3 seconds

const result = await API...;
if (result.code !== 0) {
       alert('error');
       Logger.error(result);
} else {
       alert('Success');
}

this.setState({
        visible: false
});

ValidatePromoCode() {
    if (this.state.email != '') {
      this.setState({
        visible: true,
        spinnerText: 'Validating email address'
      });

      //Make the API call
      StudentApi.SetupBuyOnline(this.state.email, DeviceInfo.getUniqueID(), DeviceInfo.getSystemName())
        .then((responseData) => {
          this.setState({
            visible: false,
            spinnerText: ''
          });

          alert(data);
    }
    else {
      this.props.navigation.navigate('GetRegisteredScreen')
    }
  }

$ npm install react-native-loading-spinner-overlay
$ ls node_modules/react-native-loading-spinner-overlay
LICENSE      Readme.md    package.json

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] (git+https://github.com/lwansbrough/react-native-camera.git#fb3b12b4f1a2ed8d1b20cc21a9b52117878b2c35)
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

render() {
    return (
        <Container>
            <View style={{flex: 1}}>
                <StatusBar barStyle={'light-content'} />
                <Router
                    scenes={require('../scenes')}
                    navigationBarStyle={styles.topBar}
                    titleStyle={styles.title} />
                <Spinner
                    visible={this.state.showSpinner}
                    ref={(c) => this._loadingSpinner = c}
                    overlayColor={'rgba(0, 0, 0, 0.75)'}
                    textContent={'Loading...'}
                    textStyle={{color: '#FFF'}} />
            </View>
        </Container>
    );
}

bundling: Error: Cannot find module 'AccessibilityInfo' (While processing preset: "C:\\Users\\moein\\Desktop\\wishList\\node_modules\\react-native\\Libraries\\react-native\\react-native-implementation.js")
    at Function.Module._resolveFilename (module.js:485:15)
    at Function.Module._load (module.js:437:25)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.get AccessibilityInfo [as AccessibilityInfo] (C:\Users\moein\Desktop\wishList\node_modules\react-native\Libraries\react-native\react-native-implementation.js:19:36)
    at C:\Users\moein\Desktop\wishList\node_modules\lodash\_baseClone.js:145:23
    at arrayEach (C:\Users\moein\Desktop\wishList\node_modules\lodash\_arrayEach.js:15:9)
    at baseClone (C:\Users\moein\Desktop\wishList\node_modules\lodash\_baseClone.js:142:3)
    at cloneDeepWith (C:\Users\moein\Desktop\wishList\node_modules\lodash\cloneDeepWith.js:37:10)
TransformError: C:\Users\moein\Desktop\wishList\index.android.js: Cannot find module 'AccessibilityInfo' (While processing preset: "C:\\Users\\moein\\Desktop\\wishList\\node_modules\\react-native\\Libraries\\react-native\\re
act-native-implementation.js")
Bundling `index.android.js`  0.0(0/1), failed.