started to work with new boost screen design

src/components/boostItemsList/index.js

@@ -1,4 +0,0 @@
-import BoostItemsList from './view/boostItemsListView';
-
-export { BoostItemsList };
-export default BoostItemsList;

src/components/boostItemsList/view/boostItemsListStyles.js

@@ -1,53 +0,0 @@
-import EStyleSheet from 'react-native-extended-stylesheet';
-
-export default EStyleSheet.create({
-  pointText: {
-    color: '$primaryBlue',
-    fontSize: 26,
-    marginTop: 24,
-    justifyContent: 'center',
-    alignSelf: 'center',
-    fontWeight: 'bold',
-  },
-  priceText: {
-    color: '$editorButtonColor',
-    fontSize: 22,
-    marginTop: 24,
-    justifyContent: 'center',
-    alignSelf: 'center',
-    fontWeight: 'bold',
-  },
-  placeTitleText: {
-    color: '$primaryBlue',
-    paddingTop: 5,
-    fontSize: 15,
-    textAlign: 'center',
-  },
-  placeIcon: {
-    width: 30,
-    height: 30,
-  },
-  activeIconWrapper: {
-    backgroundColor: '$white',
-  },
-  slide: {
-    borderRadius: 6,
-    flex: 1,
-    shadowOpacity: 0.5,
-    shadowColor: '$shadowColor',
-    paddingBottom: 5,
-    shadowOffset: {
-      height: 3,
-    },
-  },
-  slideContainer: {
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    width: '$deviceWidth / 2',
-    height: '$deviceHeight / 7',
-    padding: '5%',
-  },
-  slider: {
-    height: '$deviceHeight / 6',
-  },
-});

src/components/boostItemsList/view/boostItemsListView.js

@@ -1,94 +0,0 @@
-import React, { Component } from 'react';
-// External Component
-import { Text, View, Image, Dimensions, TouchableOpacity } from 'react-native';
-import Carousel from 'react-native-snap-carousel';
-
-// Styles
-import styles from './boostItemsListStyles';
-
-/*
- *            Props Name           Description                                     Value
- *@props -->  selectedSlide        selected slide index for casousel               Number
- *@props -->  handleOnPlaceSelect  when place selected its trigger                 Function
- *@props -->  selectedPlace        selected place index for casousel               Number
- *
- */
-const DEVICE_WIDTH = Dimensions.get('window').width;
-
-class BoostItemsListView extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {};
-  }
-
-  _renderPlaceListItem = ({ item }) => (
-    <TouchableOpacity
-      style={[styles.slide, { backgroundColor: item.color }]}
-      onPress={() => this._handleOnSlidePress(item)}
-    >
-      <View style={styles.slideContainer}>
-        <Text style={styles.pointText}>{item.name}</Text>
-        <View>
-          <Text style={styles.priceText}>{item.price}</Text>
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-
-  _handleOnSlidePress = item => {
-    const { items, navigateToRoom } = this.props;
-    const activeSlideIndex = this._carousel.currentIndex;
-    const isSelectedSlideCentered = items[activeSlideIndex] === item;
-
-    if (isSelectedSlideCentered) {
-      if (navigateToRoom) navigateToRoom(item);
-    } else {
-      const nextSlideIndex = items.findIndex(place => place === item);
-      const lastSlideIndex = items.length - 1;
-
-      if (
-        (activeSlideIndex === lastSlideIndex && nextSlideIndex === 0) ||
-        (activeSlideIndex === 0 && nextSlideIndex === lastSlideIndex)
-      ) {
-        if (activeSlideIndex > nextSlideIndex) {
-          this._carousel.snapToNext();
-        } else {
-          this._carousel.snapToPrev();
-        }
-      } else if (activeSlideIndex > nextSlideIndex) {
-        this._carousel.snapToPrev();
-      } else {
-        this._carousel.snapToNext();
-      }
-    }
-  };
-
-  render() {
-    const { items, onSnapToItem } = this.props;
-
-    return (
-      <View>
-        <Carousel
-          ref={c => {
-            this._carousel = c;
-          }}
-          snapOnAndroid
-          firstItem={3}
-          showsHorizontalScrollIndicator={false}
-          data={items}
-          renderItem={this._renderPlaceListItem}
-          sliderWidth={DEVICE_WIDTH}
-          itemWidth={DEVICE_WIDTH / 2}
-          onSnapToItem={index => onSnapToItem(index)}
-          slideStyle={styles.slide}
-          containerCustomStyle={styles.slider}
-          inactiveSlideOpacity={1}
-          activeOpacity={1}
-          loop
-        />
-      </View>
-    );
-  }
-}
-
-export default BoostItemsListView;

src/config/locales/en-US.json

@@ -296,7 +296,7 @@
     "next": "NEXT"
   },
   "boost": {
-    "title": "Boost",
+    "title": "Get eSteem Points",
     "buy": "GET ESTM",
     "next": "NEXT"
   },

src/screens/boost/screen/boostScreen.js

@@ -1,25 +1,28 @@
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl';
-import { View, Text, ImageBackground } from 'react-native';
+import { View, Text } from 'react-native';
 
 // Components
 import { BasicHeader } from '../../../components/basicHeader';
-import { BoostItemsList } from '../../../components/boostItemsList';
 import { MainButton } from '../../../components/mainButton';
+import { Icon } from '../../../components/icon';
 
 // Styles
 import globalStyles from '../../../globalStyles';
 import styles from './boostScreenStyles';
 
-const SIDE_MENU_BACKGROUND = require('../../../assets/side_menu_background.png');
-
 const BOOST_DATA = [
-  { name: '100 ESTM', color: '#fff', price: '1$', description: 'For beginner users' },
+  {
-  { name: '200 ESTM', color: '#fff', price: '2$', description: 'awesome point' },
+    name: '10000 ESTM',
-  { name: '500 ESTM', color: '#fff', price: '5$', description: 'awesome point' },
+    priceText: '100$',
-  { name: '1000 ESTM', color: '#fff', price: '10$', description: 'awesome point' },
+    price: 100,
-  { name: '5000 ESTM', color: '#fff', price: '50$', description: 'Most using' },
+    description: 'BEST DEAL!',
-  { name: '10000 ESTM', color: '#fff', price: '100$', description: 'Popular choice' },
+  },
+  { name: '5000 ESTM', priceText: '50.00$', price: 50, description: 'POPULAR' },
+  { name: '1000 ESTM', priceText: '10.00$', price: 10, description: '' },
+  { name: '500 ESTM', priceText: '5.00$', price: 5, description: '' },
+  { name: '200 ESTM', priceText: '2.00$', price: 2, description: '' },
+  { name: '100 ESTM', priceText: '1.00$', price: 1, description: '' },
 ];
 
 class BoostScreen extends Component {
@@ -50,33 +53,39 @@ class BoostScreen extends Component {
             id: 'boost.title',
           })}
         />
-        <ImageBackground source={SIDE_MENU_BACKGROUND} style={styles.descriptionWrapper}>
-          <Text style={styles.title}>{BOOST_DATA[selectedBoost].name}</Text>
-          <Text style={styles.description}>{BOOST_DATA[selectedBoost].description}</Text>
-        </ImageBackground>
 
-        <View style={styles.wrapper}>
+        {BOOST_DATA.map(item => (
-          <BoostItemsList
+          <View style={styles.boostLine}>
-            items={BOOST_DATA}
+            {item.description && (
-            handleOnPlaceSelect={item => console.log(item)}
+              <View style={styles.descriptionWrapper}>
-            selectedSlide={4}
+                <Text>{item.description}</Text>
-            onSnapToItem={item => this.setState({ selectedBoost: item })}
-          />
               </View>
-        <View style={styles.button}>
+            )}
+
             <MainButton
+              style={styles.button}
               onPress={() => alert(selectedBoost)}
-            iconName="rocket"
+              height={50}
-            iconType="MaterialCommunityIcons"
-            iconColor="white"
               text={intl.formatMessage({
                 id: 'boost.buy',
               })}
               isDisable={false}
               isLoading={false}
-          />
+            >
+              <View style={styles.buttonContent}>
+                <Text style={styles.buttonText}>{item.name}</Text>
+                <View style={styles.buttonIconWrapper}>
+                  <Icon name="add" iconType="MaterialIcons" color="#357ce6" size={23} />
                 </View>
               </View>
+            </MainButton>
+
+            <View style={styles.priceWrapper}>
+              <Text>{item.priceText}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
     );
   }
 }

src/screens/boost/screen/boostScreenStyles.js

@@ -5,30 +5,41 @@ export default EStyleSheet.create({
     flex: 1,
     position: 'absolute',
     top: '$deviceHeight / 3',
-    // backgroundColor: '$primaryBlue',
   },
-  descriptionWrapper: {
+  boostLine: {
-    height: '$deviceHeight / 3.5',
+    flexDirection: 'row',
-    flexDirection: 'column',
+    justifyContent: 'space-between',
     alignItems: 'center',
   },
-  title: {
-    color: '$white',
-    fontSize: 26,
-    marginTop: 24,
-    justifyContent: 'center',
-    fontWeight: 'bold',
-  },
-  description: {
-    color: '$white',
-    fontSize: 18,
-    marginTop: 24,
-    justifyContent: 'center',
-  },
   button: {
-    marginTop: 150,
+    marginVertical: 12,
-    marginVertical: 8,
     alignSelf: 'center',
-    paddingHorizontal: 24,
+    paddingHorizontal: 18,
+    minWidth: '$deviceWidth / 2.4',
+  },
+  buttonContent: {
+    flexDirection: 'row',
+  },
+  buttonText: {
+    color: '$pureWhite',
+    fontSize: 14,
+    fontWeight: 'bold',
+    alignSelf: 'center',
+    width: 100,
+  },
+  buttonIconWrapper: {
+    backgroundColor: '$pureWhite',
+    borderRadius: 20,
+    width: 24,
+    height: 24,
+  },
+  priceWrapper: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+  },
+  descriptionWrapper: {
+    backgroundColor: '#c10000',
+    width: '$deviceWidth / 3',
   },
 });