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:

npx expo init my-app

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:

import React from 'eact';
import { View, Text } from 'eact-native';

const RadioButton = ({ data, onSelect }) => {
  return (
    
      {data.map((item, index) => (
        
          {item.label}
        
      ))}
    
  );
};

export default RadioButton;

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:

import { Pressable } from 'eact-native';

const RadioButton = ({ data, onSelect }) => {
  return (
    
      {data.map((item, index) => (
         onSelect(item.value)}>
          {item.label}
        
      ))}
    
  );
};

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:

import { useState } from 'eact';

const RadioButton = ({ data, onSelect }) => {
  const [userOption, setUserOption] = useState(null);

  const handleSelect = (value) => {
    setUserOption(value);
    onSelect(value);
  };

  return (
    
      {data.map((item, index) => (
         handleSelect(item.value)}>
          {item.label}
          {item.value === userOption && (Selected)}
        
      ))}
    
  );
};

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:

import { StyleSheet } from 'eact-native';

const styles = StyleSheet.create({
  option: {
    padding: 16,
  },
  selected: {
    backgroundColor: '#ddd',
  },
});

export default styles;

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:

import styles from './styles';

const RadioButton = ({ data, onSelect }) => {
  //...

  return (
    
      {data.map((item, index) => (
         handleSelect(item.value)} style={styles.option}>
          {item.label}
          {item.value === userOption && (Selected)}
        
      ))}
    
  );
};

Using Our onSelect Handler

Edit RadioButton.js to use our custom handler function:

const RadioButton = ({ data, onSelect }) => {
  //...

  const handleSelect = (value) => {
    setUserOption(value);
    onSelect(value);
  };

  return (
    
      {data.map((item, index) => (
         handleSelect(item.value)} style={styles.option}>
          {item.label}
          {item.value === userOption && (Selected)}
        
      ))}
    
  );
};

In App.js, append the following code to update the value of the option state when an item is tapped:

import React, { useState } from 'eact';
import RadioButton from './components/RadioButton';

const App = () => {
  const [option, setOption] = useState(null);

  const handleSelect = (value) => {
    setOption(value);
  };

  return (
    
  );
};

Congratulations! You’ve Built a Custom Radio Button!

Your RadioButton.js file should now look like this:

import React, { useState } from 'eact';
import { View, Text, Pressable } from 'eact-native';
import styles from './styles';

const RadioButton = ({ data, onSelect }) => {
  const [userOption, setUserOption] = useState(null);

  const handleSelect = (value) => {
    setUserOption(value);
    onSelect(value);
  };

  return (
    
      {data.map((item, index) => (
         handleSelect(item.value)} style={styles.option}>
          {item.label}
          {item.value === userOption && (Selected)}
        
      ))}
    
  );
};

export default RadioButton;

And App.js should have this code:

import React, { useState } from 'eact';
import RadioButton from './components/RadioButton';

const App = () => {
  const [option, setOption] = useState(null);

  const handleSelect = (value) => {
    setOption(value);
  };

  return (
    
  );
};

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
• React Native Paper