React Native: Unable to render components in a row with flex box

Question

I am using react-native-swipeout for items within a FlatList, each list item has a 'minus' and 'plus' button either side of the text (top image).

However, when adding these components as children of the Swipeout component, they are all stacking on top of each other and to the left of the row (bottom image).

Is there something I'm missing here?

<Swipeout
   style={styles.swipeStyle}
   {...swipeSettings}>
      <View style={styles.buttonContainer}>
          <MinusButton />
      </View>
      <View style={styles.itemStyle}>
          <Text>{this.props.name}</Text>
      </View>
      <View style={styles.buttonContainer}>
           <PlusButton />
      </View>
</Swipeout>

const styles = {
  swipeStyle: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'nowrap',
    justifyContent: 'flex-start',
    alignItems: 'flex-start'
  },
  buttonContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
  },
  itemStyle: {
    flex: 1,
  }
};

score 1 · Accepted Answer · answered Apr 12 '18 at 12:32

If you look at the source code, there is another inner container that wraps the children and you cannot directly set style of the inner container.

I suggest wrap your children into a <View /> like:

<Swipeout {...swipeSettings}>
   <View style={styles.swipeStyle}>
      <View style={styles.buttonContainer}>
          <MinusButton />
      </View>
      <View style={styles.itemStyle}>
          <Text>{this.props.name}</Text>
      </View>
      <View style={styles.buttonContainer}>
           <PlusButton />
      </View>
   </View>
</Swipeout>

React Native: Unable to render components in a row with flex box

1 Answers1