diff --git a/package.json b/package.json
index 7d48d5d..e90f200 100644
--- a/package.json
+++ b/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",
diff --git a/src/modules/membership/MembershipProof.js b/src/modules/membership/MembershipProof.js
index 0f84283..017b66d 100644
--- a/src/modules/membership/MembershipProof.js
+++ b/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 {statusText}
@@ -100,29 +112,39 @@ export default class MembershipProof extends Component {
}
+ confetti() {
+ if (this.state.user.is_member) {
+ // FIXME: allmost infinite confetti. Are the animations paused when not visible, if not power hog?
+ return this._confettiView = node} confettiCount={Number.MAX_SAFE_INTEGER} />
+ }
+ }
+
fetchUser = () => {
this.props.fetchUser()
};
render() {
return (
-
-
- {this.membershipName()}
- {this.membershipStatus()}
- {this.purchaseButton()}
- {this.membershipValidTo()}
-
-
-
-
-
-
-
-
-
+
+ {this.confetti()}
+
+
+ {this.membershipName()}
+ {this.membershipStatus()}
+ {this.purchaseButton()}
+ {this.membershipValidTo()}
+
+
+
+
+
+
+
+
+
+
)
};
@@ -156,7 +178,7 @@ const styles = StyleSheet.create({
fontSize: 24
},
expired: {
- backgroundColor: '#62B1F6',
+ backgroundColor: '#d9534f',
flex: 1,
marginHorizontal: -16,
padding: 16
diff --git a/yarn.lock b/yarn.lock
index 4e992cb..fcbe8fc 100644
--- a/yarn.lock
+++ b/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"