Flexbox in react native to float two elements on opposite ends of a row

Question

I can't for the life of me seem to figure out how to get the layout on this react native app corrected

Currently I have two sets of rows, each has a header row with an icon and title, followed by a child row with a number and a button.

The two header rows are fine, but on the child rows the number and button are squished together at the very left, and I'm trying to make it so that the number is floated to the left and the button to the right, with respect to their padding of course.

What exactly am I doing wrong here?

import React, { Component } from 'react';
import { StyleSheet, Text,  View, Dimensions, Button } from 'react-native';
import Icon from '@expo/vector-icons/Ionicons';
import MatIcon from '@expo/vector-icons/MaterialCommunityIcons';


export default class Dashboard extends Component{
  render() {
    return(
      <View style={styles.container}>

        <View style={styles.widgetContainer}>
            <MatIcon  name="cup-water" size={50} />
            <Text>Water</Text>
        </View>
        <View style={styles.widgetContainer}>
            <Text>
            2
            </Text>
            <Button title="Record" />
        </View>

        <View style={styles.widgetContainer}>
            <MatIcon  name="scale-bathroom" size={50} />
            <Text>Weight</Text>
        </View>
        <View style={styles.widgetContainer}>
            <Text>
            2
            </Text>
            <Button title="Record" />
        </View>
    </View>
    ) ;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',

  },
  widgetContainer: {
    flex: 1,
    padding:10,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'flex-start' // if you want to fill rows left to right
  },
  widget: {
    width:'100%',
    padding: 10,
  }
});

output