Align Item Right within container

Question

This is probably a simple answer but I am still learning js / react native and am a bit at a loss.

Could someone explain why the following code fails to right align the "handicap" element?

import React from 'react';
import {View, StyleSheet } from 'react-native'
import AppText from './AppText';

function ListItem({ name, uid, handicap }) {
    return (
        <View style={styles.container}>
            <AppText>{uid}. </AppText>
            <AppText>{name}</AppText>
            <AppText style={{justifyContent: "flex-end"}}>{handicap}</AppText>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        padding: 10
    },
})

export default ListItem;

I want something like:

1. Name 5
2. Name 6

But get

1. Name5
2. Name6

Thanks

Answer 1

Try to add flex: 1 to container style

...
container: {
        flex: 1,
        flexDirection: "row",
        padding: 10
    },
 ...