ladjs / react-native-loading-spinner-overlay Goto Github PK
View Code? Open in Web Editor NEW:barber: React Native loading spinner overlay
License: MIT License
:barber: React Native loading spinner overlay
License: MIT License
/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
Using react native 0.28.0 spinner overlay 0.2.1.
I think due to the library no longer get compiled, the stage0 babelrc is now required in library users.
Hi there. I've react-native-navigation installed and my login page's statusBar is hidden for immersive look. When the Spinner shows up (while waiting response from my webservice), the status bar becomes visible with a white background. How can I avoid this happening?
At the bottom I need to show the tabbar, and allow for navigation.
The modal blocks the entire screen. Not allowing for click events. Changing the background and container do not help. The Modal is blocking the whole screen.
hi,
I using device oppo A83 and library
"react-native": "^0.55.4",
"react-native-loading-spinner-overlay": "^0.5.2".
When i use loading spinner with demo code, it ok with setInterval, but when i use setTimeout, it not working. it not turn off.
It loading forever. I reload app it still there, it still show loading, I can not active on my screen. affter, i set visible : true, and reload app, it load twice loading spinner and override together. then I delete tag spinner, it still loading (like cache). When i shutdown app and start again, it just turn off
I have a native Android Activity with four tabs/Fragments in a ViewPager. Only one of the Fragments is written in React, and that's the view that has this Spinner. However, the Spinner shows up and takes the full screen even when I'm on another Fragment/tab.
In other words, the Spinner is getting rendered on top of native UI for a screen that it doesn't belong to.
Nexus 6
Android 7.0
Hi guys, fist of all, thanks for this lib!
My setup consists of react v16.0.0-alpha.6, react native 0.44.2 and [email protected].
I am testing my Android App in a device with screen resolution of 1920x1200 tvdpi, and for this resolution, the spinner size seems too small!
Is there any other way to make the spinner size larger?
Thanks.
It seems RN 0.19 change the behavior of how Portal work. I got this error when running on RN 0.19.
Warning: Each child in array or iterator should have a unique "key" props. Check the render method of "Portal".
Feature Request: add optional text prop ie, 'Loading...' or 'Signed In!'.
I found 2 issues when using the Spinner component:
Let me know if you need more details ππΌ
I tried the spinner and the works the way i want it to, but the issues is that, it stops spinning after a few seconds, tho it is still visible on the page.
I want my status bar to show up, but the overlay hides the entire screen. Is there a work around to prevent my status bar hiding?
Hey, thanks for this module!
My setup consists of react v.15.4.2, react native 0.41.0 and [email protected].
My root Component is a navigator. For each scene it renders the appropriate component and the spinner e.g.
renderScene () {
return (
<View flex = {1}>
<Component>
{this.renderSpinner()}
</View>
)
}
where renderSpinner is
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
}
},
Also the method that defines the animation is :
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);
}
});
},
and this.animation is :
this.animation = Animated.timing(this.spinValue, {
toValue: 1,
duration: 1000,
easing: Easing.linear,
})
The problem I face only on Android is the following.The spinner will only spin the first time it is called and shown. Also, it will pause spinning when i change the spinnerInfo property of the state. I also found out that it will stop spinning if any state property of the root component gets updated. It works as expected on iOS.
You think this is something concerning this module, or RN it self?
Thanks!
Hi! Is there an option to decrease spinner size? e.g. to place it in a smaller modal window?
e.g. if I put it inside modal, it is shown over whole screen, can its size be reduced?
Thanks!
Seems like Portal.js
is no more part of react-native package.
const Portal = require('react-native/Libraries/Portal/Portal.js');
https://github.com/niftylettuce/react-native-loading-spinner-overlay/blob/master/src/index.js#L26
The release 0.4.0
is not available at the NPM.
β― 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>
My installed packages:
βββ [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]
My Component reder method:
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>
);
}
Only appear the ActivityIndicator.
Sometimes spinner not stops even when visible param receive "true".
looking for a collaborator/contributor to add this
Looking for someone to be collaborator + help me maintain this. I don't use React Native too intensely right now.
Hi. I am getting this error, which seems related to #20
/home/daniel/memox/memox/memoxnative/node_modules/promise/lib/done.js:10
throw err;
^
Error: Couldn't find preset "react-native-stage-0" relative to directory "/home/daniel/memox/memox/memoxnative/node_modules/react-native-loading-spinner-overlay"
at /home/daniel/memox/memox/memoxnative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:395:17
at Array.map (native)
at OptionManager.resolvePresets (/home/daniel/memox/memox/memoxnative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:387:20)
at OptionManager.mergePresets (/home/daniel/memox/memox/memoxnative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:370:10)
at OptionManager.mergeOptions (/home/daniel/memox/memox/memoxnative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:330:14)
at OptionManager.addConfig (/home/daniel/memox/memox/memoxnative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:232:10)
at OptionManager.findConfigs (/home/daniel/memox/memox/memoxnative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:436:16)
at OptionManager.init (/home/daniel/memox/memox/memoxnative/node_modules/babel-core/lib/transformation/file/options/option-manager.js:484:12)
at File.initOptions (/home/daniel/memox/memox/memoxnative/node_modules/babel-core/lib/transformation/file/index.js:223:65)
TransformError: /home/daniel/memox/memox/memoxnative/node_modules/react-native-loading-spinner-overlay/src/index.js: Couldn't find preset "react-native-stage-0" relative to directory "/home/daniel/memox/memox/memoxnative/node_modules/react-native-loading-spinner-overlay"
:app:bundleReleaseJsAndAssets FAILED
I am using react native 0.28.0, and react-native-loading-spinner-overlay 0.2.2.
Apparently the fix for #20 did not work for me. Am I doing something wrong?
We use this spinner and it works great; but we noticed Android users sometimes press the Back Button and this hides. Is there a way to configure it to ignore Android back-button? We don't seem to be able to control this from our code.
[email protected]
node_modules/react-native-loading-spinner-overlay/lib/index.js
Please update it with the latest react-native version.
Thank you
Hi. Very cool component!
I have a question. Currently, when my application is showing the spinner component (for now just setting it always to visible
as a learning example) and the user hits the back button, the spinner will disappear and allow me to interact with the underlying elements in the UI.
Now, if I change something in the UI that causes a re-render, then the spinner controll willl re-appear (since I'm always setting visible
to true
), but the same thing will happen if I hit the Android hardware back button.
Is this an event that could be blocked by the Spinner component itself? Or is this something I'd need to handle in my application?
Thanks!
spinner time(0.4.0) = 4 to 5 second,
ActivityIndicator time (RN docs)= 2 to 3 seconds
How to decrease spinner load time.
hi
just after installing this moulde I'm getting this error
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.
$ npm install react-native-loading-spinner-overlay
$ ls node_modules/react-native-loading-spinner-overlay
LICENSE Readme.md package.json
I have to use the loader in Sagas in a react native application. can you please suggest
got something wrongοΌcan't build success
my react native version is 0.17.0
tatsuo769/Library/Developer/Xcode/DerivedData/sushi_project-dcfcgmcxmrxxqtepwgrfknmuzvua/Build/Products/Debug-iphonesimulator/sushi_project.app/main.jsbundle --assets-dest /Users/tatsuo769/Library/Developer/Xcode/DerivedData/sushi_project-dcfcgmcxmrxxqtepwgrfknmuzvua/Build/Products/Debug-iphonesimulator/sushi_project.app
bundle: Created ReactPackager
uncaught error Error: UnableToResolveError: Unable to resolve module autobind-decorator from /Users/tatsuo769/Sites/sushi_project/node_modules/react-native-loading-spinner-overlay/lib/index.js: Invalid directory /Users/node_modules/autobind-decorator
at ResolutionRequest.js:351:15
at tryCallOne (/Users/tatsuo769/Sites/sushi_project/node_modules/react-native/node_modules/promise/lib/core.js:37:12)
at /Users/tatsuo769/Sites/sushi_project/node_modules/react-native/node_modules/promise/lib/core.js:123:15
at flush (/Users/tatsuo769/Sites/sushi_project/node_modules/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)
at nextTickCallbackWith0Args (node.js:433:9)
at process._tickCallback (node.js:362:13)
See logs /var/folders/l1/wd3t_vcj4d9593_8_rpgsvww0000gn/T/react-packager.log
at SocketClient._handleMessage (SocketClient.js:139:23)
at BunserBuf. (SocketClient.js:53:42)
at emitOne (events.js:78:13)
at BunserBuf.emit (events.js:170:7)
at BunserBuf.process (/Users/tatsuo769/Sites/sushi_project/node_modules/react-native/node_modules/bser/index.js:289:10)
at /Users/tatsuo769/Sites/sushi_project/node_modules/react-native/node_modules/bser/index.js:244:12
at nextTickCallbackWith0Args (node.js:433:9)
at process._tickCallback (node.js:362:13)
Command /bin/sh failed with exit code 1
So I am trying to do animation={fade}
but it throws an error that reads Cant find variable: fade
My complete code looks like this
<Spinner visible={true} animation={fade} />
What am I doing wrong?
Component extends React.Component
and use state
. It causes unnecessary render
calls. Need to extend spinner from React.PureComponent
and remove internal state
that is useless now.
react-native packages do not need to be transpiled to es5
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;
When screen's orientation is Landscape-
while spinner is displayed, orientation suddenly changes to Portrait.
Then when spinner is gone, orientation changes back to Landscape again.
Hi, Having an issues if I display the spinner and then call my api, when I get back the result from the api I change my state to hide the spinner. The problem is that if I show an alert to display the error the spinner doesnt hid. It just keeps spinning and cant cancel or anything.
Here is my code
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')
}
}
Can some one please let me know what I am doing wrong? if i dont have the alert the spinner seems to behave correctly. Thanks in advance
When I set the "normal" size, I get this error.
<Spinner visible={this.state.visible} textStyle={{color: '#ccc'}} size={'normal'}/>
Only on android
Is it problem of react-native-loading-spinner-overlay?
If so, seems to be that problem in this line https://github.com/niftylettuce/react-native-loading-spinner-overlay/blob/master/src/index.js#L93
It should be:
if (prevProps.visible && !this.props.visible) Portal.closeModal(tag);
Make PR?
After calling API and set prop visible to false it automatically close the alert Success on iOS. It may related to re-render issue.
Edit: it actually hide the alert, so I can't interact with the screen
code like below:
const result = await API...;
if (result.code !== 0) {
alert('error');
Logger.error(result);
} else {
alert('Success');
}
this.setState({
visible: false
});
I gave it a red background for eye sore testing. So my app runs in landscape mode only. Using this component the dimensions of the spinner/modal don't appear to be respecting that - looks like it renders portrait dimensions at 0,0 coordinates. The Spinner component is located in the root view component.
Some times when try to change visibility to false, app crashes with follow error:
*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Could not locate shadow view with tag #98' *** First throw call stack: ( 0 CoreFoundation 0x000000010a74d34b __exceptionPreprocess + 171 1 libobjc.A.dylib 0x000000010965d21e objc_exception_throw + 48 2 CoreFoundation 0x000000010a751442 +[NSException raise:format:arguments:] + 98 3 Foundation 0x0000000109229e09 -[NSAssertionHandler handleFailureInFunction:file:lineNumber:description:] + 166 4 MinhaMuamba 0x0000000108de9d52 __33-[RCTUIManager setFrame:forView:]_block_invoke + 386 5 libdispatch.dylib 0x000000010e628980 _dispatch_call_block_and_release + 12 6 libdispatch.dylib 0x000000010e6520cd _dispatch_client_callout + 8 7 libdispatch.dylib 0x000000010e62fe6b _dispatch_queue_serial_drain + 236 8 libdispatch.dylib 0x000000010e630b9f _dispatch_queue_invoke + 1073 9 libdispatch.dylib 0x000000010e6333b7 _dispatch_root_queue_drain + 720 10 libdispatch.dylib 0x000000010e63308b _dispatch_worker_thread3 + 123 11 libsystem_pthread.dylib 0x000000010ea01746 _pthread_wqthread + 1299 12 libsystem_pthread.dylib 0x000000010ea01221 start_wqthread + 13 ) libc++abi.dylib: terminating with uncaught exception of type NSException
I want to do:when switch to this page, visible===true, the spinner will exists. then when the fetch get the urls,the spinner disappear.. But why the listView can't appear, it's nothing
constructor(props) {
super(props);
this.state = {
index:this.props.data,
urls:null,
visible:true,
.....
componentDidMount(){
InteractionManager.runAfterInteractions(()=>{
const that=this;
const params={index:that.state.index};
Fetchers.fetch(devicelisturl,'GET',params)
.then(function(set){
that.setState({
urls:set.items[0].domainBlacklist.split(','),
visible:false,
})
})
.catch(function(err){
Errhandler.err(err);
visible:false
})
})
}
..........
Running app via react-native 0.57
has following error:
react native typeerror: invalid attempt to spread non-iterable instance
react-native-loading-spinner-overlay
version: 0.5.2
Hi @niftylettuce ,
This plugin is really good, I'm using it in my project.
But when I implemented the Chat page with Gifted Chat plugin, I need to apply the theme for Android to make the chat display properly.
See this issue: FaridSafi/react-native-gifted-chat#200
But, after applying that theme. The overly turned into grey, not opacity any more.
Can you please help?
I get this error on RN v27:
Element type is invalid;: expected a string (for built-in components) or a class/function (for composite components) but got undefined: check the render method of Spinner.
And this is my spinner in render:
Thank you!
I had no issues implementing it on my app, it just works as expected, very easy to use..
Is there a way to keep the keyboard from collapsing when the spinner overlay turns on? I believe this is causing this facebook/react-native#10845
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.