0

I'm using shoutem/ui http://shoutem.github.io/docs/ui-toolkit/components/rows components and I can't seem to get this row item to have a smaller height - it seems to be taking the full flex height. how do I get the orange area to be smaller? I tried setting the flex and height properties but it doesn't seem to work.

     <TouchableWithoutFeedback onPress={() => this.toggleRegister(true)}>
        <Row style={{backgroundColor:"#ff7f50", height: 20, flex: 0.2}} styleName="small">
          <Icon name="edit" />
          <Text>Don't have an account?</Text>
          <Icon styleName="disclosure" name="right-arrow" />
        </Row>
      </TouchableWithoutFeedback>

enter image description here

MonkeyBonkey
  • 46,433
  • 78
  • 254
  • 460
  • Please post the style for the form area as well - it may have a bearing on the orange area. Also the orange area has a height of 20 *and* flex. Why? – G0dsquad May 23 '17 at 15:31

2 Answers2

1

The Row component might not actually take style...could you try moving the style to TouchableWithoutFeedback or surrounding it with a View?

Ivan Wu
  • 232
  • 1
  • 7
0

Judging by the documentation, the Row component doesn't take style, so just use styleName.

<Row styleName="small">
    <Icon name="edit" />
    <Text>Don't have an account?</Text>
    <Icon styleName="disclosure" name="right-arrow" />
</Row>
Vladimir Vdović
  • 281
  • 3
  • 9