Unable to render as a row (with child components)

[ga-reth]

I am using Swipeout for my list, each list item has a 'minus' and 'plus' button either side of the text.

However, when adding these components as children of the Swipeout component, they are all stacking on top of each other (despite the styling) rather than aligning in a row.

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>

Styling

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

[ga-reth]

In case anyone else is struggling with this, I got an answer on Stack Overflow. Child components need to be wrapped in a containing .

https://stackoverflow.com/questions/49796459/react-native-unable-to-render-components-in-a-row-with-flex-box