React-native: position elements in the center and flex-end - react-native

Question

Is it possible to have the following layout (without resorting to absolute positioning)?
|...........centreElement.......RightElement|
So as if the justifyContent was 'space-between' but without the first element. I also thought to 'justifyContent: 'centre'' and then try 'justifySelf: 'flex-end' on the RightElement but this property does not exist.
<View styles={styles.container}>
<Text>centreElement</Text>
<Text>RightElement</Text>
</View>
container: {
flexDirection: 'row',
justifyContent: 'center'
}

Answer 1

There is mistake in your code please update code from <View styles={styles.container}> to <View style={styles.container}>
Please try the following code:
<View style={styles.container}>
<View style={{ flex: 1 }} />
<View style={{ flex: 1 }}>
<Text>centreElement</Text>
</View>
<View style={{ flex: 1 }}>
<Text>RightElement</Text>
</View>
</View>

Answer 2

An ideal solution without using absolute. The CentreElement text might not comes at the center, but without absolute, you cannot align it either, since you are not giving the content to take up the 100% width which is needed to rightly align the content to center. Following steps can give you the satisfying results:
Just give out flexDirection: 'row' to the container
Give both the text CentreElement and RightElement 50% width
Align both of them to right, and done!!
Code:
export default function App() {
return (
<View style={styles.container}>
{/* Txt container*/}
<View style={styles.textContainer}>
<Text style={styles.text}>
CentreElement
</Text>
<Text style={styles.text}>
RightElement
</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
textContainer: {
width: '100%',
flexDirection: 'row'
},
text: {
textAlign: 'right',
width: '50%',
fontSize: 16,
fontWeight: 'bold'
}
});
Result: