elephant-com/BottomInfoButton.js

the general component for elephant washing shoes

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';

const ns = {
  bottom: {
    flexDirection: 'row',
    height: 50,
  },
  bottomLeft: {
    backgroundColor: '#1a1e20',
    flex: 3,
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'center',
    paddingVertical: 7,
    paddingLeft: 10,
  },
  bottomRight: {
    backgroundColor: '#00abea',
    flex: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
  leftTotal: {
    color: '#fff',
    fontSize: 12,
  },
  rightTotal: {
    color: '#fff',
    fontSize: 14,
  },
};
/* eslint-disable react/no-array-index-key */
const BottomInfoButton = ({ left = '', right = '', onPress }) => {
  const lType = typeof left;
  const rType = typeof right;
  const l = lType === 'string' ? left.split('||').map((s, i) => <Text key={i} style={ns.leftTotal}>{s}</Text>) : left;
  const r = rType === 'string' ? right.split('||').map((s, i) => <Text key={i} style={ns.rightTotal}>{s}</Text>) : right;

  return (<View style={ns.bottom}>
    <View style={ns.bottomLeft}>{l}</View>
    <TouchableOpacity style={ns.bottomRight} {...{ onPress }}>{r}</TouchableOpacity>
  </View>);
};

export default BottomInfoButton;