Color wheel misbehaves when placed in flexbox View

[tkanarsky]

If I create a ColorWheel component as a child of a flexbox View component, like so:

<View style={{display: "flex", flexDirection: "column", justifyContent: "flex-start"}}>
   <Text>Alpha</Text>
   <Text>Beta</Text>
   <Text>Gamma</Text>
    <ColorWheel
      initialColor="#ee0000"
      onColorChange={color => console.log({color})}
      onColorChangeComplete={color => onChange(color)}
      style={{width: Dimensions.get('window').width}}
      thumbStyle={{ height: 30, width: 30, borderRadius: 30}}
    />
  </View>

the color wheel's height and width are set to zero -- only the thumb slider remains visible:

By changing line 224 of ColorWheel.js from flex: 1, to display: flex,, the color wheel is properly sized and positioned in the flexbox:

Let me know if this change fixes any issues or if I'm using the component wrong. Thanks in advance!

[RickeyWard]

flex:1 has to do with the view itself. display:flex has to do with its children. Though I find it odd that this change was necessary. passing styles into the ColorWheel component's style attribute, passing display:flex there would have worked without editing the library internally.

Have you noticed your change causing any issues when the component isnt in a flex container?

[NilsBaumgartner1994]

Facing similar issues, when placing multiple Views with flex next to each other and ColorWheel in between