Align items to the left and right in React Native - css

Question

How do you align items to the left and the right in React Native?
Whatever combination of flexbox properties I try, the two sets of text are stuck next to each other like this:
How do you make it so "Sign In" is on the right side of the screen and Repositories on the left?
Here is my code:
import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingBottom: 20,
backgroundColor: 'grey',
},
text: {
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
linkText: {
color: 'white',
},
nesteddivleft: {
flex: 1,
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
},
nesteddivright: {
flex: 1,
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
},
scrollbar: {
display: 'flex',
justifyContent: 'space-between'
}
});
const AppBar = () => {
return <><View style={styles.container}>
<ScrollView style="scrollview" horizontal>
<View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
<View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
</ScrollView>
</View>
</>
};
export default AppBar;
App:
import Main from './src/components/Main'
import { StatusBar } from 'expo-status-bar';
import { NativeRouter } from 'react-router-native';
export default function App() {
return (
<>
<NativeRouter>
<Main/>
</NativeRouter>
<StatusBar style="auto" />
</>
);
}
As you can see, I have tried putting justify-content: space-between on the parent div and that does nothing.
I also tried this solution and it has done nothing: Aligning elements left, center and right in flexbox

Answer 1

import { View, StyleSheet, Text, ScrollView } from 'react-native';
import Constants from 'expo-constants';
import { Link } from "react-router-native";
const styles = StyleSheet.create({
container: {
paddingTop: Constants.statusBarHeight,
paddingLeft: 10,
paddingBottom: 20,
backgroundColor: 'grey',
display: "flex",
justifyContent: "space-between",
minWidth: '100%',
flexDirection: "row"
},
text: {
fontSize: 20,
color: 'white',
fontWeight: 'bold'
},
linkText: {
color: 'white',
},
nesteddivleft: {
},
nesteddivright: {
},
scrollbar: {
}
});
const AppBar = () => {
return <><View style={styles.container}>
<View style={styles.nesteddivleft}><Link to="/"><Text style={styles.text}>Repositories</Text></Link></View>
<View style={styles.nesteddivright}><Link to="/signin"><Text style={styles.linkText}>Sign In</Text></Link></View>
</View>
</>
};
export default AppBar;
Steps to solve issue:
Take out the scrollview component.
set Display to flex, justify Content to space-between, minWidth to 100% AND flex Direction to Row in parent component.
Not optimal as I need the Scrollview component in there as well, I will need to find a solution that allows me to have that component as a child.