In this tutorial, you will learn how to create custom buttons in React Native. By following this tutorial, you will be able to create beautiful and modern custom button components using Pressable in React Native.
Set Up Your React Native Project.
Before you can create custom buttons in React Native, you will need to set up your project. To do this, open your command line terminal and run the following command:
npx create-expo-app my-app
Once you have created the project, navigate to the project directory and install all of the necessary dependencies, such as React Native Elements. You should now be ready to start creating custom buttons in React Native!
Define the all necessary props
interface ButtonProps {
children: React.ReactNode,
mode?: "flat" | "normal",
onPress: null,
style: ViewStyle,
}
Create a button component
Now move the the button I just create a button that accepts props as ButtonProps. Later on will implement style and onPress event using Pressable.
function Button(buttonProps: ButtonProps) {
return (
<View>
{buttonProps.children}
</View>
);
}
export default Button;
Create a Styled Component for Custom Buttons.
To create a style for buttons, we will use StyleSheet API from React Native. This allows you to create predefined styles, such as background and border colors, font sizes, and padding that can be applied to all of your custom buttons. Let’s do it.
const styles = StyleSheet.create({
button: {
borderRadius: 4,
padding: 8,
backgroundColor: colors.primary,
},
flat: {
backgroundColor: 'transparent'
},
buttonText: {
color: 'white',
textAlign: 'center',
},
flatText: {
color: colors.primary,
},
pressed: {
opacity: 0.75,
backgroundColor: colors.primaryLight,
borderRadius: 4,
},
});
By doing this you will have a consistent look across your UI. You can then assign the style sheet object to each Button component (using the “style” property) so that all of the buttons share one set of styling rules.
Create a Function to Handle Press Events using Pressable.
To make your buttons do something when they are pressed, you’ll need to create a function that will handle the press event. This function can be defined as an arrow function outside of the React Native components and then you can call it within each button as its “onPress” property.
function Button({children, onPress, mode, style}: ButtonProps) {
return (
<View style={style}>
<Pressable
onPress={onPress}
style={({pressed}) => pressed && styles.pressed}
>
</Pressable>
</View>
);
}
Link Styled Components and Events Together.
To make your buttons do something when they are pressed, you’ll need to create a function that will handle the press event.
import {Pressable, StyleSheet, Text, View, ViewStyle} from 'react-native';
import colors from "../theme/color";
import React from "react";
interface ButtonProps {
children: React.ReactNode,
mode?: "flat" | "normal",
onPress: null,
style: ViewStyle,
}
function Button({children, onPress, mode, style}: ButtonProps) {
return (
<View style={style}>
<Pressable
onPress={onPress}
style={({pressed}) => pressed && styles.pressed}
>
<View style={[styles.button, mode === 'flat' && styles.flat]}>
<Text style={[styles.buttonText, mode === 'flat' && styles.flatText]}>
{children}
</Text>
</View>
</Pressable>
</View>
);
}
export default Button;
const styles = StyleSheet.create({
button: {
borderRadius: 4,
padding: 8,
backgroundColor: colors.primary,
},
flat: {
backgroundColor: 'transparent'
},
buttonText: {
color: 'white',
textAlign: 'center',
},
flatText: {
color: colors.primary,
},
pressed: {
opacity: 0.75,
backgroundColor: colors.primaryLight,
borderRadius: 4,
},
});
How to use this custom Button
That all about custom button. It can be used multiple ways, filled button or flat button. In this example I am using both type of Buttons for demo purpose. So let open the App.js file and put below code.
import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';
import Button from "./components/Button";
export default function App() {
/**
* On Cancel button click Handler
*/
const onCancel = () => {
console.log("Cancel button pressed")
}
/**
* On submit button click Handler
*/
const submitHandler = () => {
console.log("Submit button pressed")
}
return (
<View style={styles.container}>
<Text style={styles.title}>Custom button example with Pressable </Text>
<StatusBar style="auto"/>
<View style={styles.buttonView}>
<Button style={styles.button} onPress={submitHandler}>
Submit
</Button>
<Button style={styles.button} mode="flat" onPress={onCancel}>
Cancel
</Button>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 24,
textAlign: 'center'
},
buttonView: {
padding: 8,
justifyContent: 'center',
alignItems: 'center',
},
button: {
minWidth: 320,
marginHorizontal: 8,
marginVertical: 4,
},
});
Conclusion
This way you can customized this button based on need. I allowed some extra parameter to customised the view using ViewStyle props. I show how you can create a custom button in React Native, that pretty configurable button. You can also add more props to make individual nested element configurable as well. So That all about custom button, I hope this React Native tutorial will help, Please share this article on social media, thanks for reading.
If you have any query please make a comment below, I will happy to answer that.