Home Manual Reference Source

src/components/homeComponents/MovementRegister.jsx

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


export default function MovementRegister({ props }) {
  const [showValue, setShowValue] = useState(false);


  return (
    <TouchableOpacity
      style={st.container}
      onPress={() => setShowValue(!showValue)}>
      <Text style={st.data}>{props.date}</Text>
      <View style={st.content}>
        <Text style={st.label}>{props.description}</Text>

        {showValue ? (
          <View exitBeforeEnter>
            <Text
              style={props.type === 1 ? st.value : st.expenses}
              from={{ translateX: 100 }}
              animate={{ translateX: 0 }}
              transition={{ type: 'timing', duration: 500 }}>
              {props.type === 1 ? `R$ ${parseFloat(props.value).toFixed(2)}` :
                `R$ -${parseFloat(props.value).toFixed(2)}`}
            </Text>
          </View>
        ) : (
          <View style={st.skeleton} />
        )}
      </View>
    </TouchableOpacity>
  );
}

const st = StyleSheet.create({
  container: {
    flex: 1,
    marginBottom: 24,
    borderBottomWidth: 0.5,
    padding: 5,
    borderBottomColor: '#dadada',
  },
  content: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 2,
    marginBottom: 8,
  },
  data: {
    color: '#dadada',
    fontWeight: 'bold',
  },
  label: {
    fontWeight: 'bold',
    fontSize: 16,
  },
  value: {
    fontSize: 15,
    color: '#2ecc71',
    fontWeight: 'bold',
  },
  expenses: {
    fontSize: 15,
    color: '#e74c3c',
    fontWeight: 'bold',
  },
  skeleton: {
    marginTop: 6,
    width: 80,
    height: 10,
    backgroundColor: '#dadada',
    borderRadius: 8,
  },
});