I am trying to create this iPhone app "myStats" page using ReactNative and Javascript and this is what I have so far:

import React from 'react';

import $\{$ ScrollView, View, TouchableOpacity, StyleSheet, Text, Image $\}$ from 'react$-$native';

import $\{$ useNavigation $\}$ from $\text{'}$@react$-$navigation$/$native$\text{'}$;

import BottomNavBar from $\text{'}./$BottomNavBar$\text{'}$;

import $\{$ FontAwesomeIcon $\}$ from $\text{'}$@fortawesome$/$react$-$native$-$fontawesome';

import $\{$ faPlus, faCheck $\}$ from $\text{'}$@fortawesome$/$free$-$solid$-$svg$-$icons';

const MyStats $=()=>\{$

return $($

My Stats

Dashboard

Journal

Walk

$1673$ steps

Workout

$\{/*$ Add your workout items here $*/\}$

Water

$23$oz

Calories

$430$ kcal

$\{/*$ Add your macro$-$nutrient items here $*/\}$

Medication

$\{/*$ Add your medication items here $*/\}$

$)$;

$\}$;

const styles $=$ StyleSheet.create$(\{$

container: $\{$

flex: $1,$

backgroundColor: $\text{'}$#f$5$f$5$f$5\text{'},$

$\},$

welcomeText: $\{$

fontSize: $24,$

fontWeight: 'bold',

margin: $20,$

$\},$

menu: $\{$

flexDirection: 'row',

justifyContent: 'space$-$around',

marginBottom: $20,$

$\},$

menuItem: $\{$

padding: $10,$

backgroundColor: $\text{'}$#fff$\text{'},$

borderRadius: $20,$

$\},$

section: $\{$

flexDirection: 'row',

justifyContent: 'space$-$around',

marginBottom: $20,$

$\},$

card: $\{$

padding: $20,$

backgroundColor: $\text{'}$#fff$\text{'},$

borderRadius: $20,$

width: $\text{'}45\%\text{'},$

alignItems: 'center',

$\},$

cardTitle: $\{$

fontSize: $18,$

fontWeight: 'bold',

$\},$

cardValue: $\{$

fontSize: $22,$

fontWeight: 'bold',

margin: $10,$

$\},$

icon: $\{$

position: 'absolute',

right: $10,$

top: $10,$

$\},$

$//$more styles as needed

$\})$;

export default MyStats;

I need help expanding this code so that it actually fully resembles the attached image. Thank you