Knowledge Base (Button Component)
Please review knowledge base, if you cannot find the answer you are looking for? Reach out to our support team by opening forum thread.
- 1. React Native Custom Button Component
-
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 asdisabled
,rounded
, andicon
:// 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;