added background image for tasg

src/components/animations/boostIndicator/boostIndicatorAnimation.js

@@ -13,7 +13,7 @@ const BoostIndicatorAnimation = ({ isSpinning }) => {
         size={230}
         animationDuration={2400}
         color={!isSpinning ? '#f2f2f2' : '#1a509a'}
-        breadth={17}
+        breadth={12}
         animating={isSpinning}
         initStart={0}
       />
@@ -21,7 +21,7 @@ const BoostIndicatorAnimation = ({ isSpinning }) => {
         size={180}
         animationDuration={2000}
         color={!isSpinning ? '#f2f2f2' : '#357ce6'}
-        breadth={17}
+        breadth={12}
         animating={isSpinning}
         initStart={20}
       />
@@ -29,7 +29,7 @@ const BoostIndicatorAnimation = ({ isSpinning }) => {
         size={130}
         animationDuration={1700}
         color={!isSpinning ? '#f2f2f2' : '#4da1f1'}
-        breadth={17}
+        breadth={12}
         animating={isSpinning}
         initStart={40}
       />

src/components/animations/spinIndicator/spinIndicator.js

@@ -58,6 +58,7 @@ class SpinIndicator extends PureComponent {
     const containerStyle = {
       width: !animating ? 300 : size,
       height: !animating ? 300 : size / 2,
+      position: 'absolute',
       overflow: 'hidden',
     };
 

src/screens/freeEstm/screen/freeEstmScreen.js

@@ -1,6 +1,6 @@
 import React, { PureComponent, Fragment } from 'react';
 import { injectIntl } from 'react-intl';
-import { TouchableOpacity, Text, View } from 'react-native';
+import { Image, ImageBackground, Text, View } from 'react-native';
 
 // Container
 import { PointsContainer } from '../../../containers';
@@ -8,7 +8,9 @@ import { PointsContainer } from '../../../containers';
 // Components
 import { BasicHeader } from '../../../components/basicHeader';
 import { BoostIndicatorAnimation, MainButton } from '../../../components';
-import TagCloud from './tagCloud';
+
+import ESTM_TAGS from '../../../assets/estmTags.png';
+
 // Styles
 import styles from './freeEstmStyles';
 
@@ -54,34 +56,9 @@ class FreeEstmScreen extends PureComponent {
                 )}
               </View>
               <View style={styles.spinnerWrapper}>
-                <View style={{ position: 'absolute', left: -110, top: 20 }}>
-                  {!isSpinning && (
-                    <TagCloud
-                      tagList={[
-                        { title: '110 ESTM', point: 3 },
-                        { title: '130 ESTM', point: 2 },
-                        { title: '30 ESTM', point: 1 },
-                        { title: '1 ESTM', point: 0 },
-                        { title: '200 ESTM', point: 3 },
-                        { title: '80 ESTM', point: 1 },
-                        { title: '1 ESTM', point: 2 },
-                        { title: '10 ESTM', point: 0 },
-                        { title: '20 ESTM', point: 0 },
-                        { title: '110 ESTM', point: 1 },
-                        { title: '110 ESTM', point: 1 },
-                        { title: '30 ESTM', point: 2 },
-                        { title: '50 ESTM', point: 1 },
-                        { title: '1 ESTM', point: 0 },
-                        { title: '90 ESTM', point: 2 },
-                        { title: '120 ESTM', point: 2 },
-                        { title: '500 ESTM', point: 3 },
-                        { title: '1000 ESTM', point: 5 },
-                        { title: '2000 ESTM', point: 4 },
-                      ]}
-                    />
-                  )}
-                </View>
+                {!isSpinning && <Image source={ESTM_TAGS} style={styles.backgroundTags} />}
                 <BoostIndicatorAnimation isSpinning={isSpinning} />
+
                 <View style={{ flex: 1 }}>
                   {!isSpinning && (
                     <MainButton

src/screens/freeEstm/screen/freeEstmStyles.js

@@ -23,5 +23,15 @@ export default EStyleSheet.create({
   },
   spinnerWrapper: {
     flex: 1,
+    marginTop: 10,
+  },
+  backgroundTags: {
+    position: 'absolute',
+    width: '$deviceWidth',
+    height: 320,
+    left: -120,
+    top: -8,
+    right: 0,
+    zIndex: 999,
   },
 });

src/screens/freeEstm/screen/tagCloud.js

@@ -1,103 +0,0 @@
-import React, { Component } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  cloudTagContainer: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});
-
-export default class TagCloud extends Component {
-  constructor(props) {
-    super(props);
-
-    this.TagCloud = this.orderData().map((item, key) => {
-      const tagContainerStyle = {
-        paddingLeft: this.getRandomPaddingLeft(),
-        paddingTop: this.getRandomPaddingTop(),
-        paddingRight: this.getRandomPaddingRight(),
-        paddingBottom: this.getRandomPaddingBottom(),
-      };
-
-      const tagStyle = {
-        fontSize: this.props.minFontSize + item.point * 4,
-        color: this.props.colorList[item.point],
-      };
-
-      return (
-        <View key={key} style={tagContainerStyle}>
-          <Text style={tagStyle}>{item.title}</Text>
-        </View>
-      );
-    });
-  }
-
-  orderData() {
-    const result = [];
-    const { tagList } = this.props;
-    tagList.sort((a, b) => {
-      if (a.point === b.point) return 0;
-      return a.point > b.point ? -1 : 1;
-    });
-
-    const maxPoint = tagList[0].point;
-    let switchFlag = true;
-    tagList.map((item, key) => {
-      if (maxPoint === item.point) {
-        result.push(item);
-        return;
-      }
-
-      if (switchFlag) {
-        result.unshift(item);
-        switchFlag = false;
-      } else {
-        result.push(item);
-        switchFlag = true;
-      }
-    });
-
-    return result;
-  }
-
-  getRandomPaddingLeft() {
-    return Math.floor(Math.random() * this.props.tagPaddingLeft);
-  }
-
-  getRandomPaddingTop() {
-    return Math.floor(Math.random() * this.props.tagPaddingTop);
-  }
-
-  getRandomPaddingRight() {
-    return Math.floor(Math.random() * this.props.tagPaddingRight);
-  }
-
-  getRandomPaddingBottom() {
-    return Math.floor(Math.random() * this.props.tagPaddingBottom);
-  }
-
-  render() {
-    return (
-      <View style={[styles.container, this.props.style]}>
-        <View style={styles.cloudTagContainer}>{this.TagCloud}</View>
-      </View>
-    );
-  }
-}
-
-TagCloud.defaultProps = {
-  tagList: [],
-  colorList: ['#357ce6', '#4da1f1', '#357ce6', '#357ce6', '#4da1f1', '#357ce6'],
-  minFontSize: 10,
-  tagPaddingLeft: 20,
-  tagPaddingTop: 20,
-  tagPaddingRight: 20,
-  tagPaddingBottom: 20,
-};