How to move content to right side using flexbox in React native - react-native

Question

I am working on React native, In my project In one View tag I have two Text tags how to move the second text tag to the right side using flex box. But I have to move it to the right side by only using flex box not padding or margin
This is App.js
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text>Hello World</Text>
<Text>Welcome</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingRight: 10,
paddingLeft: 10,
},
});
export default App;

Answer 1

justifyContent: 'space-between' will evenly space all the child components, with the first and last ones on the corresponding ends.
import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<Text>Hello World</Text>
<Text>Welcome</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
paddingRight: 10,
paddingLeft: 10,
},
});
export default App;
Check the React Native documentation on any topic, it's quite good:
https://reactnative.dev/docs/flexbox

Answer 2

You can simply add a style to the container like this:
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between', //this will push them to left and right
paddingRight: 10,
paddingLeft: 10,
},
});
Or if you want to simply specify that you want that specific element to the right you can use justifyContent: 'flex-end'
const App = () => {
return (
<View style={styles.container}>
<Text>Hello World</Text>
<Text style={{justifyContent: 'flex-end'}}>Welcome</Text>
</View>
);
};