Create a new React Native project or use an existing one:

npx react-native init YourProjectName

Navigate to your project directory:

cd YourProjectName

Create a new file for your button component:

touch CustomButton.js

CustomButton component with additional properties such as disabled, rounded, and icon:

// CustomButton.js

import React from 'react';
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native';
import { FontAwesome } from '@expo/vector-icons'; // Assuming you have FontAwesome installed

const CustomButton = (props) => {
  const {
    onPress,
    title,
    color,
    style,
    disabled,
    rounded,
    icon,
    iconPosition,
    iconColor,
    iconSize,
  } = props;

  const renderIcon = () => {
    if (icon) {
      const iconComponent = <FontAwesome name={icon} size={iconSize} color={iconColor} />;
      return iconPosition === 'left' ? (
        <View style={styles.iconLeft}>{iconComponent}</View>
      ) : (
        <View style={styles.iconRight}>{iconComponent}</View>
      );
    }
    return null;
  };

  return (
    <TouchableOpacity
      onPress={onPress}
      style={[
        styles.button,
        { backgroundColor: color },
        rounded && styles.roundedButton,
        disabled && styles.disabledButton,
        style,
      ]}
      disabled={disabled}
    >
      {iconPosition === 'left' && renderIcon()}
      <Text style={styles.buttonText}>{title}</Text>
      {iconPosition === 'right' && renderIcon()}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 10,
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 10,
    flexDirection: 'row',
  },
  roundedButton: {
    borderRadius: 25,
  },
  disabledButton: {
    opacity: 0.7,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    marginLeft: 8, // Adjust the spacing between text and icon
    marginRight: 8,
  },
  iconLeft: {
    marginRight: 8,
  },
  iconRight: {
    marginLeft: 8,
  },
});

export default CustomButton;

Using the custom button in your main component:

// App.js

import React from 'react';
import { View, Alert } from 'react-native';
import CustomButton from './CustomButton';

const App = () => {
  const handleButtonPress = () => {
    Alert.alert('Button Pressed');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CustomButton
            onPress={handleButtonPress}
            title="Press Me"
            color="green"
            style={{ width: 200 }}
            disabled={false} // Set to true to disable the button
            rounded={true} // Set to true for a rounded button
            icon="rocket" // Icon name from FontAwesome
            iconPosition="left" // or "right"
            iconColor="white"
            iconSize={20}
       />
    </View>
  );
};

export default App;