Dashboard.js

import React, { Component } from 'react';
import { View, Text, Image, FlatList, TouchableOpacity , StyleSheet } from 'react-native';

import DashboardHeader from '@components/DashboardHeader';
import FloatMenu from '@components/FloatMenu';

import getSymbolFromCurrency from 'currency-symbol-map';

import cs from '@theme/CommonStyle';

import icons from '@assets/icons';

class Dashboard extends Component {

  static navigationOptions = { 
      title: '', 
      header: null 
  };

  constructor(props) {
    super(props);
    this.state = {
      currencyStatus: false,
      currencies: [
        { 
          key: 1,
          symbol: getSymbolFromCurrency('GBP'),
          name: "Libra",
          state: false
        },
        { 
          key: 2,
          symbol: getSymbolFromCurrency('EUR'),
          name: "Euro",
          state: false
        },
        { 
          key: 3,
          symbol: getSymbolFromCurrency('USD'),
          name: "Dolar",
          state: false
        },
        { 
          key: 4,
          symbol: getSymbolFromCurrency('BRL'),
          name: "Real",
          state: false
        },
        {
          key: 5,
          symbol: getSymbolFromCurrency('BTC'),
          name: "Bitcoin",
          state: false
        },
        {
          key: 6,
          symbol: getSymbolFromCurrency('BOB'),
          name: "Boliviano",
          state: true
        },
      ],
      data: [
        {
          key: 1,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Crédito',
          date: '10 dez 2017 6:25',
          color: '#00a858'
        },
        {
          key: 2,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Débito',
          date: '10 dez 2017 6:25',
          color: '#f54e45'
        },
        {
          key: 3,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Crédito',
          date: '10 dez 2017 6:25',
          color: '#00a858'
        },
        {
          key: 4,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Débito',
          date: '10 dez 2017 6:25',
          color: '#f54e45'
        },
        {
          key: 5,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Crédito',
          date: '10 dez 2017 6:25',
          color: '#00a858'
        },
        {
          key: 6,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Débito',
          date: '10 dez 2017 6:25',
          color: '#f54e45'
        },
        {
          key: 7,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Crédito',
          date: '10 dez 2017 6:25',
          color: '#00a858'
        },
        {
          key: 8,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Débito',
          date: '10 dez 2017 6:25',
          color: '#f54e45'
        },
        {
          key: 9,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Crédito',
          date: '10 dez 2017 6:25',
          color: '#00a858'
        },
        {
          key: 10,
          name: 'Classvoip Affiliate',
          value: '0,19205',
          type: 'Débito',
          date: '10 dez 2017 6:25',
          color: '#f54e45'
        },
      ]
    };
  }

  _renderItem = ({item}) => (
    <TouchableOpacity
    key={ item.key } 
    onPress={ () => this.setState({ currencyStatus: !this.state.currencyStatus }) }
    >
        <View style={ [styles[this.state.currencyStatus ? 'itemPress' : 'item'], cs.defaultShadow ] }>
            <Text style={this.state.currencyStatus ? styles.symbolPress : styles.symbol}>{item.symbol}</Text>
            <Text style={styles.text}>{item.name}</Text>
        </View>
    </TouchableOpacity>
  );

  _renderValue = (item) => (
    <View style={ styles.dataItem  } >
      <View style={{ flexDirection: 'row' }}>
        <Text style={{ fontSize: 20, color: '#595959' }}>{item.name}</Text>
        <Text style={{ fontSize: 20, color: item.color, left: 98 }}>{ (item.type === 'Crédito') ? `+${item.type}` : `-${item.type}` }</Text>
      </View>
      <View style={{ flexDirection: 'row' }}>
        <Text style={{ color: '#b3b3b3' }}>{item.date}</Text>
        <Text style={{ color: '#b3b3b3', left: 170 }}>{item.type}</Text>
      </View>
    </View>
  );

  render() {
      console.log(this.state.currencyStatus);
      return (
          <View>
              <DashboardHeader />
              <View style={{ marginTop: 10 }}>
                  <FlatList
                      data={ this.state.currencies }
                      extraData={this.state.currencyStatus}
                      renderItem={this._renderItem}
                      horizontal={true}
                      showsHorizontalScrollIndicator={false}
                  />
              </View>
              <View style={{ backgroundColor: '#d9d9d9', paddingHorizontal: 20, paddingVertical: 10, marginTop: 10}}>
                <View>
                  <Text style={{ fontSize:12, color: '#808080' }}>Saldo</Text>
                </View>
                <View style={{ flexDirection: 'row' }}>
                  <View style={{ flexDirection: 'row' }}>
                    <Text style={{ fontSize: 14, top: 10, marginRight: 10 }}>U$</Text>
                    <Text style={{ fontSize: 26 }}>20.928,26</Text>
                  </View>
                  <View style={{ flex: 1, flexDirection: 'row', left: 90, bottom: 10 }}>
                    <TouchableOpacity>
                      <Image source={ icons.eye01 } style={{ width: 30, height: 30, marginRight: 5 }} />
                    </TouchableOpacity>
                    <Image source={ icons.graphic01 } style={{ width: 30, height: 30, marginRight: 5}} />
                    <Image source={ icons.search01 } style={{ width: 30, height: 30}} />
                  </View>
                </View>
              </View>
              <FlatList
                data={ this.state.data }
                renderItem={({ item }) => this._renderValue(item) }
                style={{ backgroundColor: '#f2f2f2' }}
              />
              <FloatMenu />
          </View>
      );
  }
}

const styles = StyleSheet.create({
    item: {
      alignItems: "center",
      backgroundColor: "#f2f2f2",
      flexGrow: 1,
      margin: 5,
      padding: 25
    },
    itemPress: {
      backgroundColor: '#e7cb1d',
      alignItems: "center",
      flexGrow: 1,
      margin: 5,
      padding: 28
    },
    symbol: {
      color: "#333333",
      fontSize: 50,
      fontWeight: 'bold'
    },
    symbolPress: {
      color: "#333333",
      fontSize: 55,
      fontWeight: 'bold'
    },
    text: {
      fontSize: 16,
      textAlign: 'center'
    },
    dataItem: {
      backgroundColor: "#f2f2f2",
      flexGrow: 1,
      padding: 20
    },
  });

export default Dashboard;