React Native Button alignment issue

Question

I have a Expo, React Native app using Native Base.

Having some issues with alignment however of the Button on iPhones.

Its displaying a list of Cards with a Button and Text, the Button is aligned to the right, when the Text is more than one line, the Button alignment fails.

The code as follows:

<List dataArray={items}
          renderRow={(item) =>
            <Card rounded>
              <CardItem rounded style={{margin:5}}>
                <Grid>
                  <Row>
                    <Text style={styles.headertext}>{item.site.name}</Text>
                    <Right style={{ flex: 1 }}>
                    {this.getEventType(item)}
                    </Right>
                  </Row>
                  <Row>
                    <Text style={styles.textIdBold}>{item.controller.name}</Text><Text> </Text><Text style={styles.textId}>{item.controller.controller_id}</Text>
                  </Row>
                  <Row>
                    <Text style={styles.textId}>{item.date}</Text>
                  </Row>
                  <Row>
                    <Text style={styles.eventMessage}>
                    {item.description}  
                    </Text>
                  </Row>
                </Grid>
              </CardItem>
            </Card>
          }>

return of getEventType(item) is:

<Button small rounded info>
   <Text>Settings</Text>
</Button>

relevant styles:

headerText:

fontSize: (Platform.OS === 'ios') ? 15 : 18,
color: '#000',
marginBottom: 0,
textAlign: 'center',
alignSelf:'flex-start'

textIdBold

fontSize: (Platform.OS === 'ios') ? 12 : 15,
color: '#000',
fontWeight: 'bold',
paddingTop: (Platform.OS === 'ios') ? 3 : 8

textId

fontSize: (Platform.OS === 'ios') ? 12 : 15,
color: '#000',
paddingTop: (Platform.OS === 'ios') ? 3 : 8

Screenshot of what is taking place:

Single line no problem for Events Button aligning to the right, multi line is a problem!

Any thoughts will be much appreciated!

After adding:

     <Right style={{ flex: 1 }}>
         <View style={{position:'absolute', top: 0, right: 0, zIndex:100}}>
           {this.getEventType(item)}
         </View>
     </Right>

The result is better but not 100% solved:

Looking much better

score 0 · Answer 1 · answered May 11 '18 at 08:00

0

You just need to set one View on to show your button. Try below code:

<View style={{position:'absolute', top: 10, right: 10}}>
{this.getEventType(item)}
</View>

Hope it will help you :)

answered May 11 '18 at 08:00

Nirmalsinh Rathod

5,079
4
26
56

Thanks, that did help, though not entirely, I also set top and right to 0. Editing the question with results – Maré Greyling May 11 '18 at 08:52

score 0 · Answer 2 · answered Mar 07 '19 at 13:08

0

      <View style={styles.buttonView}>
        <Button
        >
          <Text>
            Submit
          </Text>
        </Button>
      </View>

And ,

        buttonView: {
         alignSelf: 'center'
        }

answered Mar 07 '19 at 13:08

Jerald George

171
10

React Native Button alignment issue

2 Answers2