CODEWITHSUNDEEP
react-nativeflexbox
Duke
Duke

Reputation: 1913

react native flex box with item on opposite side

I am using react native flexbox and I need to have all elements on left side but last element in that box be the right side. How come it doesnt work? If I have lexDirection: 'row' then element with alignSelf: 'flex-end' should be in the end of the row, right? It doesn't happends.

I have code example here https://snack.expo.dev/@dukenuken/duke-test

const AlignItemsLayout = () => {

  return (
    <SafeAreaView style={styles.container}>
       <Text>test 1</Text>
       <Text>test 2</Text>
       <Text style={ styles.text }>test 3</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 8,
    backgroundColor: "aliceblue",
    minHeight: 200,
    flexDirection: 'row',
    borderWidth: 2,
    margin: 20,
  },
  text: {
    //flex: 1,
    borderWidth: 1,
    alignSelf: 'flex-end' //doesnt work as expected
  }

});

Upvotes: 0

Views: 919

Answers (1)

Sahaj Arya
Sahaj Arya

Reputation: 91

Here is your answer

Use View to wrap Text this way u will have more props and also have to provide full width for the property to work for each view


  return (
    <SafeAreaView style={styles.container}>
     <View style={{flexDirection:"row",flex:1/2}}>
       <Text>test 1</Text>
       <Text>test 2</Text>
     </View>
     <View style={{alignItems:"flex-end",flex:1/2}}>
       <Text style={ styles.text }>test 3</Text>
     </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 8,
    minHeight: 200,
    flexDirection: 'row',
    borderWidth: 2,
    margin: 20,

  },
  text: {
    //flex: 1,
    borderWidth: 1,
  
alignItems:"flex-end" 
 }

});

Upvotes: 1

Related Questions