CODEWITHSUNDEEP
react-nativeflexbox
OriHero
OriHero

Reputation: 1218

React native nested flex

I am using react-native-elements. I am having difficulty in layout system of react-native.

 <View style={styles.container}>
    {canAccessCamera ? (
        <Card style={styles.userInfo}>
            <Avatar medium source={Logo} rounded />
            <Text>Username</Text>
        </Card>
    ) : (
      <Text>Give me access to camera</Text>
    )}
  </View>

Style:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'flex-start',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  userInfo: {
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    alignItems: 'stretch',
    justifyContent: 'flex-start',
  },
});

I want items inside Card located by column not by row.

This is my result:

Here is the result I get I want that Username stay in the right of the Avatar.

Upvotes: 2

Views: 4627

Answers (1)

Mojtaba Moshfeghi far
Mojtaba Moshfeghi far

Reputation: 571

Change just this style 

  userInfo: {
      display: "flex",
      alignItems: "center",
      flexDirection: "row",
      justifyContent: "flex-start"                      
 },
  container:{
    flex: 1,
    alignItems: "stretch",
    justifyContent: "flex-start",
    paddingTop: 5,
    backgroundColor: "#ecf0f1",
    alignItems: "center"

Upvotes: 2

Related Questions