cupcakearmy/fight-of-the-mobiles
1
0
Fork 0
mirror of https://github.com/cupcakearmy/fight-of-the-mobiles.git synced 2024-11-04 14:34:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Spinner now working

Browse Source
This commit is contained in:
nicco 2018-08-29 13:21:24 +02:00
parent 59fd301a86
commit f2d6ac6f83
1 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/rn/src/Screens/Scan.jsx
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react' import React, {Component} from 'react'
import {Animated, StyleSheet, Text, View} from 'react-native' import {Animated, StyleSheet, Text, View, Easing} from 'react-native'
import QRCodeScanner from 'react-native-qrcode-scanner' import QRCodeScanner from 'react-native-qrcode-scanner'
import {Styles} from '../Helper' import {Styles} from '../Helper'
@ -10,21 +10,21 @@ export default class extends Component {
header: null, header: null,
} }
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {rotation: new Animated.Value(0)}
rotation: new Animated.Value(0),
}
} }
componentDidMount() { componentDidMount() {
Animation.loop( Animated.loop(
Animated.timing( Animated.timing(
this.state.rotation, this.state.rotation,
{ {
toValue: 1, toValue: 1,
duration: 10000, duration: 1000,
easing: Easing.linear,
}, },
), ),
).start() ).start()
@ -36,12 +36,21 @@ export default class extends Component {
} }
render() { render() {
// const spin = `${this.rotation._value}deg`
const spin = this.state.rotation.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
})
return <BG> return <BG>
<View style={Styles.center}> <View style={Styles.center}>
<QRCodeScanner containerStyle={styles.scanner} onRead={(e) => this.gotCode(e)}/> <QRCodeScanner containerStyle={styles.scanner} onRead={(e) => this.gotCode(e)}/>
<View style={styles.space}> <View style={{...styles.space, ...Styles.center}}>
<Text>Scanning...</Text> <Text style={styles.bold}>Scanning...</Text>
<Image <Animated.Image
resizeMode="contain"
style={{...styles.image, transform: [{rotate: spin}]}}
source={require('../../assets/images/sync.png')} source={require('../../assets/images/sync.png')}
/> />
</View> </View>
@ -62,8 +71,12 @@ const styles = StyleSheet.create({
space: { space: {
marginTop: 100, marginTop: 100,
}, },
listNumber: { bold: {
fontWeight: 'bold', fontWeight: 'bold',
}, },
listText: {}, image: {
width: 32,
height: 32,
margin: 16,
},
}) })