Question 160895 in React native Question posted in
The official React Native documentation can be found here.

Is Icon & Text in React Native Button not aligned vertically?

I’m trying to add an Icon and some text in a Button (also tried Chip and Badge from react-native-paper). For some reason the Icon is always a little above the text.

With View it works perfectly, but once I introduce Button, Chip or Badge, the items missalign.

// Working with View
<View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
   <MaterialIcon name='access-time' size={iconSize2} color={themeColors[2]} />
   <Text variant="titleLarge" style={{ color: themeColors[2], fontFamily: defaultFont }}>&nbsp;12:00 - 21:30</Text>
</View>

// Missaligned with Button
<Button style={{ backgroundColor: themeColors[2], flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
  <MaterialIcon name='access-time' size={iconSize2} color={'whitesmoke'} />
  <Text variant="titleLarge" style={{ color: themeColors[2], fontFamily: defaultFont }}>&nbsp;12:00 - 21:30</Text>
</Button>

Image for reference:

enter image description here

Can somebody tell me if I’m doing something incorrect?

Things tried:

  1. Add paddingTop to Button
  2. Add marginTop to Icon
  3. Change height of Button and/or Icon
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In the documentation all the way at the bottom of the webpage there is a sample for Icon's with Button's.

    Example that worked for me as well:

    import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
    Login with Facebook
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Login with Facebook
    </Text>
  </Icon.Button>
);

  2. 0

    Try:

    <Button style={{ backgroundColor: themeColors[2], flexDirection: 'row', justifyContent: 'center', alignItems: 'center', padding: 0, borderWidth: 0 }}>
  <MaterialIcon name='access-time' size={iconSize2} color={'whitesmoke'} />
  <Text style={{ color: themeColors[2], fontFamily: defaultFont }}>&nbsp;12:00 - 21:30</Text>
</Button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search