Building a Custom Radio Button in React Native: A Step-by-Step Guide
Getting Started with Radio Buttons
When it comes to allowing users to choose between multiple options, radio buttons are an essential component in any app. Imagine you’re building a popular app and want to get users’ theme preferences for dark and light mode. Displaying all available options in a radio button group is the way to go!
Creating a Radio Button Component
To begin, let’s set up our project repository using Expo by running the following Bash command:
Next, create a components folder in the root of your project directory to store our custom React modules. This will help with code organization.
Designing Our Radio Button
Create a file called RadioButton.js in the components folder and add the following code:
This code accepts two props: data and onSelect. The data prop will hold our array of user options, while the onSelect prop will be a handler function that runs when the user makes a selection.
Making Items Clickable and Displaying User Input
To make our list interactive, we’ll use React Native’s Pressable API. Modify the return block in RadioButton.js to the following:
This code tells React Native to display the user’s selection in a separate popup window when an item is tapped.
Building Radio Button Functionality
Append the following snippet to RadioButton.js:
Here, we declare a userOption Hook to store the user’s current selection, update its value when an item is pressed, and display the selected value.
Customizing Our Radio Button
To improve our app’s user experience, let’s use the StyleSheet API to decorate our radio form. Create a new file called styles.js in the components folder and add the following code:
This code styles the text that displays the user’s options, unselected elements, and the selected item.
Applying Our Style
In RadioButton.js, add the following code to apply our style:
Using Our onSelect Handler
Edit RadioButton.js to use our custom handler function:
In App.js, append the following code to update the value of the option state when an item is tapped:
Congratulations! You’ve Built a Custom Radio Button!
Your RadioButton.js file should now look like this:
And App.js should have this code:
Alternatives
If you don’t want to build your own radio button solution, the React Native community offers pre-built radio components that allow for high customization. Some popular alternatives include react-native-simple-radio-button, react-native-radio-buttons-group, and React Native Paper.
Take Your App to the Next Level with LogRocket
LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps. Try LogRocket for free today!