Revision history [back]

You can use the Button component from Native-Base and wrap the Icon and text inside a View component. Then use flexbox to position the Icon and text as desired. Here's an example:

import React from 'react';
import { Button, Icon } from 'native-base';
import { View, Text, StyleSheet } from 'react-native';

const MyButton = () => {
  return (
    <Button style={styles.button}>
      <View style={styles.container}>
        <Icon name='heart' style={styles.icon} />
        <Text style={styles.text}>Press me</Text>
      </View>
    </Button>
  );
};

const styles = StyleSheet.create({
  button: {
    alignItems: 'center',
  },
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  icon: {
    color: 'red',
    fontSize: 20,
    marginRight: 5,
  },
  text: {
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default MyButton;

In this example, we have used the 'heart' icon from the Native-Base library. You can replace it with any other icon of your choice. The text is centered using the 'textAlign' property, and the Icon and text are positioned side-by-side using the 'flexDirection' and 'justifyContent' properties. The 'alignItems' property is used to center the content vertically. Adjust the styles to suit your needs.