MembershipProof: Add confetti

package.json

@@ -13,6 +13,7 @@
     "prop-types": "^15.5.10",
     "react": "16.0.0-alpha.12",
     "react-native": "0.47.1",
+    "react-native-confetti": "^0.0.6",
     "react-native-config": "^0.6.0",
     "react-native-htmlview": "^0.12.0",
     "react-navigation": "^1.0.0-beta.11",

src/modules/membership/MembershipProof.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {Linking, StyleSheet, Platform, RefreshControl, View} from "react-native";
 import {Button, Body, Card, CardItem, Text, Content} from 'native-base';
 import Config from 'react-native-config';
+import Confetti from 'react-native-confetti';
 
 export default class MembershipProof extends Component {
     constructor(props) {
@@ -17,6 +18,17 @@ export default class MembershipProof extends Component {
             this.setState({user: nextProps.user})
         }
     }
+    componentDidMount() {
+        if(this._confettiView) {
+            this._confettiView.startConfetti();
+        }
+    }
+
+    componentWillUnmount () {
+        if (this._confettiView) {
+            this._confettiView.stopConfetti();
+        }
+    }
 
     // fetchUser = () => {
     //     this.props.fetchUser().then(() => {
@@ -75,7 +87,7 @@ export default class MembershipProof extends Component {
 
         let statusText = 'Medlem';
         if (this.state.user.is_volunteer) {
-            statusText = 'Aktiv frivillig';
+            statusText = 'Aktiv';
         }
 
         return <CardItem><View style={styles.valid}><Text style={styles.validText}>{statusText}</Text></View></CardItem>
@@ -100,29 +112,39 @@ export default class MembershipProof extends Component {
         </CardItem>
     }
 
+    confetti() {
+        if (this.state.user.is_member) {
+            // FIXME: allmost infinite confetti. Are the animations paused when not visible, if not power hog?
+            return <Confetti ref={(node) => this._confettiView = node} confettiCount={Number.MAX_SAFE_INTEGER} />
+        }
+    }
+
     fetchUser = () => {
         this.props.fetchUser()
     };
 
     render() {
         return (
-            <Content style={{margin: 8}}>
-                <Card>
-                    {this.membershipName()}
-                    {this.membershipStatus()}
-                    {this.purchaseButton()}
-                    {this.membershipValidTo()}
-                </Card>
-                <Card>
-                    <CardItem>
-                        <Body>
-                            <Button onPress={this.props.onLogoutPress} style={styles.logoutButton} small>
-                                <Text>Logg ut</Text>
-                            </Button>
-                        </Body>
-                    </CardItem>
-                </Card>
-            </Content>
+            <View style={{flex: 1}}>
+                {this.confetti()}
+                <Content style={{margin: 8}}>
+                    <Card>
+                        {this.membershipName()}
+                        {this.membershipStatus()}
+                        {this.purchaseButton()}
+                        {this.membershipValidTo()}
+                    </Card>
+                    <Card>
+                        <CardItem>
+                            <Body>
+                                <Button onPress={this.props.onLogoutPress} style={styles.logoutButton} small>
+                                    <Text>Logg ut</Text>
+                                </Button>
+                            </Body>
+                        </CardItem>
+                    </Card>
+                </Content>
+            </View>
         )
     };
 
@@ -156,7 +178,7 @@ const styles = StyleSheet.create({
         fontSize: 24
     },
     expired: {
-        backgroundColor: '#62B1F6',
+        backgroundColor: '#d9534f',
         flex: 1,
         marginHorizontal: -16,
         padding: 16

yarn.lock

@@ -3442,6 +3442,10 @@ react-devtools-core@2.3.1:
     shell-quote "^1.6.1"
     ws "^2.0.3"
 
+react-native-confetti@^0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/react-native-confetti/-/react-native-confetti-0.0.6.tgz#a505e4e5a23bcb2cf554ba51362dfaf3ac17a100"
+
 react-native-config@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/react-native-config/-/react-native-config-0.6.0.tgz#0f71631ab5ac4b568637dcb8e9f6ab85ffb380ed"