gistfile1.txt

import React from 'react';
import { View, Text, ScrollView } from 'react-native';
import { Link } from 'react-router-native';

import CycleButton from 'app/components/common/cycleButton';
import Slider from './components/slider';
import Description from './components/description';

import styles from './productDetails.styles';


export default class ProductDetails extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      quantity: [],
      size: [],
    };
  }

  activeChange = (id, row) => {
    const newRow = row.map((item) => {
      if (item.active) {
        const newItem = { ...item };
        newItem.active = (item.id === id);
        return newItem;
      }
      if (item.id === id) {
        const newItem = { ...item };
        newItem.active = true;
        return newItem;
      }
      return item;
    });
    return newRow;
  }

  activeChangeQuantity = (id) => {
    const quantity = this.activeChange(id, this.state.quantity);
    this.setState({ quantity });
  }


  render() {
    const rowRender = (rowData, activeChange) => {
      const row = rowData.map((item) => {
        return (
          <CycleButton
            key={item.id}
            id={item.id}
            active={item.active}
            onPress={activeChange}
          >
            {item.title}
          </CycleButton>
        );
      });
      return row;
    };

    const quantity = rowRender(this.state.quantity, this.activeChangeQuantity);
    const size = rowRender(this.state.size, this.activeChangeSize);

    let activeSize = this.state.size.filter((item) => {
      return item.active === true;
    });
    [activeSize] = activeSize;
    if (activeSize === undefined) {
      activeSize = {
        title: 'not selected',
        weight: '',
      };
    }
    console.log(activeSize);

    const sizeRowTitle = activeSize ?
      (
        <Text>Size: {activeSize.title} ({activeSize.weight} kg)</Text>
      ) :
      (
        <Text>Size: not selected</Text>
      );

    return (
      <View>
        <Slider />
        <Description />

        <Text style={styles.chooseRowTitle}>Quantity:</Text>
        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
        >
          <View style={[styles.chooseRow, styles.chooseRowQuantity]}>
            {quantity}
          </View>
        </ScrollView>

        <View style={styles.chooseRowTitleContainer}>
          <Text style={styles.chooseRowTitle}>
            Size: {activeSize.title}
          </Text>
          <Text style={styles.chooseRowTitle}>
              ({activeSize.title} kg)
          </Text>
        </View>

        <ScrollView
          horizontal
          showsHorizontalScrollIndicator={false}
        >
          <View style={[styles.chooseRow, styles.chooseRowSize]}>
            {size}
          </View>
        </ScrollView>
      </View>
    );
  }
}

gistfile2.txt

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  container: {
    marginTop: 40,
    padding: 10,
    flexWrap: 'wrap',
    width: '100%',
    height: '100%',
    flexDirection: 'row',
    borderWidth: 1,
    borderColor: '#000',
  },
  buttonDefault: {
    margin: 10,
    alignItems: 'center',
    borderColor: '#dadfe1',
    padding: 10,
    height: 44,
    width: 160,
    borderWidth: 1,
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  buttonActive: {
    margin: 10,
    alignItems: 'center',
    borderColor: '#3FC299',
    padding: 10,
    height: 44,
    width: 160,
    borderWidth: 1,
    borderRadius: 10,
    backgroundColor: '#3FC299',
  },
  textActive: {
    color: '#fff',
    fontSize: 16,
    fontFamily: 'Helvetica',
  },
  textDefault: {
    color: '#78909C',
    fontSize: 16,
    fontFamily: 'Helvetica',
  },
});