Реагировать на родные вложенные flex

Question

Я использую react-native-elements.У меня возникли сложности в системе макетов 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>

Стиль:

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',
  },
});

Я хочу, чтобы элементы внутри Card располагались по столбцам, а не по строкам.

Это мой результат:

Я хочу, чтобы Username оставался справа от Avatar.

Answer 1

Изменить только этот стиль

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