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

CodePudding user response：

To have some of the content right and some of the content on the left you need two separate divs that are next to eachother. Create a div as a wrapper parent element. Then you can create child divs for each element. If you want some on the left and some on the right make two child element divs you put side by side with I.e. Float left/right and vw to 50. then you can align the text in these element child’s seperatly

CodePudding user response：

    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:

1. Take out the scrollview component.
2. 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.