React Native Custom Radio Button Group Component for Android iOS

Radio Buttons are graphical round shape elements that allows the application user to select only one single item from given multiple items. Radio Button groups is group of multiple radio buttons works in a singular way. When application user select radio button then all the other radio buttons will automatically de-selected, so app user can select one item at a time. In react native there is yet not a specific Custom Radio Button Group is available but using the custom NPM GitHub libraries we can easily make our own radio button groups. We are using the react-native-btr NPM library in our project. This library is awesome guys.

Contents in this project Create Custom Radio Button Group in React Native Example:

1. Open your react native project folder in Command Prompt or Terminal & execute below command to install the react-native-btr library in your project.

Screenshot of terminal:

2. Import StyleSheet, View, Platform and Text component in your project.

3. Import RadioGroup component from react-native-btr library.

4. Create constructor() method in your project and in the constructor make a State array named as radioButtons with 3 objects. Each object will make an individual radio button.

label : Define the radio button name which shows on screen.

value : Define which value app user wants to access on selection of radio button.

checked : Supports true and false Boolean type values. If you set true then it will by default active the current radio button.

color : Color of radio button label text.

disabled : To disable the current radio button, User won’t be able to select.

flexDirection : Supports all default flex direction values.

size : Size of Radio button.

5. Creating a selectedItem variable in render’s block. We would use the JavaScript’s .find() method to find the true value of checked and after finding the true value object it will store the selected radio button value in variable.

6. Create the RadioGroup component in render’s return block with 1 Text component.

color : Used to set the color of Radio button.

labelStyle : Supports all text styles.

onPress : Updating the complete state value.

7. Create style.

8. Complete source code for App.js File :

Screenshots :

Custom Radio Button Group Component

5 Comments

  1. hii sir, please make tutorial on redux with react navigation
    simple login and registration,welcome page .

  2. hii sir , i need your help i didn’t logout properly form facebook
    i use fbsk library ,for logout i use LoginManager.logOut(); but when again click on facebook login button it doesnt ask me user name and password it show me message You previously logged into app with facebook would you like to continue? and continue button display so, how to i login to another facebook a/c ??

    sorry my english is not good i hope you understand .please replay

    • Thanks for comment Rahul but sorry i have not yet tried the facebook SDK . so i cannot help you .

      • hii sir , thanks for replay , i want to learn redux with react native because in industry every one make project on redux with react native
        ,i try lots of tutorial but , i did not understand properly , i only understand that redux is used for manage to state and pass view , and most difficult part is reducer,store,component,action, please please sir make a tutorial , last time sir you asked what type of registration you want to create , reagistration make very simple create new user only enter username, create password then goto welcome screen and when user click on logout button then goto login screen then enter login deatils then goto welcome screen like this its very simple,
        structure of the project like
        actionsCreators
        reducers
        containers
        components
        App.js

Leave a Reply

Your email address will not be published. Required fields are marked *