Aligning text rows on the right side in react native - reactjs

Question

How would a layout like this be done in react native? I understand that I can use justifyContent: space-between for the first row, but how would I make the second row fill all the available space, so that 488498 of the top row is aligned on the right side with the string at the bottom row?
The only way I could think of is by using a monospace font, but that's not an alternative in this case as I'm not allowed to change the font.
Thanks in advance.

Answer 1

You need two <View> tags, one that'll have the alignSelf: 'flex-start' style prop (so it has variable width) and one with justifyContent: 'space-between' style prop (so the text fills up the empty space).
Below is an example and here's an Expo Snack for you to fiddle with.
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
export default class App extends React.Component {
render() {
return (
<View style={styles.mainContainer}>
<View style={styles.container}>
<Text style={styles.paragraph}>
afzender:
</Text>
<Text style={styles.paragraphRight}>
488498
</Text>
</View>
<Text>Very long text omg! This will surely be long.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
mainContainer: {
alignSelf: 'flex-start',
alignContent: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
container: {
justifyContent: 'space-between',
flexDirection: 'row',
backgroundColor: 'red',
},
paragraph: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'left',
},
paragraphRight: {
fontSize: 18,
fontWeight: 'bold',
textAlign: 'right',
}
});

Answer 2

You could wrap 488498 with a div and give it text-align:right OR float:right using CSS...