VereignPrivatePerson.tsx

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {ColorPallet, TextTheme} from 'src/theme/theme';

type PrivatePersonProps = {
  jsonld: any;
};

const VereignPrivatePerson: React.FC<PrivatePersonProps> = ({
  jsonld,
}) => {
  const subject = jsonld.credentialSubject || {};

  const name = subject["vereign:name"];
  const dateOfBirth = subject["vereign:dateOfBirth"];

  const address = subject["vereign:address"] || {};
  const street = address["vereign:street"];
  const building = address["vereign:building"];
  const city = address["vereign:city"];
  const country = address["vereign:country"];

  return (
    <View>
      <Text style={styles.header}>JSON-LD</Text>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>Name</Text>
        <Text style={styles.propValue}>{name}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>DateOfBirth</Text>
        <Text style={styles.propValue}>{dateOfBirth}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>Street</Text>
        <Text style={styles.propValue}>{street}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>Building</Text>
        <Text style={styles.propValue}>{building}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>City</Text>
        <Text style={styles.propValue}>{city}</Text>
      </View>
      <View style={styles.prop}>
        <Text style={styles.propLabel}>Country</Text>
        <Text style={styles.propValue}>{country}</Text>
      </View>
    </View>
  );
};

export default VereignPrivatePerson;

const styles = StyleSheet.create({
  header: {
    ...TextTheme.normal,
    color: ColorPallet.baseColors.black,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  prop: {
    flexDirection: 'row',
    paddingVertical: 4,
  },
  propLabel: {
    width: '40%',
    ...TextTheme.normal,
    color: ColorPallet.baseColors.black,
    fontWeight: 'bold',
  },
  propValue: {
    width: '60%',
    ...TextTheme.normal,
    color: ColorPallet.baseColors.black,
    textAlign: 'right',
  },
});