Easy and simple to use Radio Buttons for your React Native Application.

Overview

React Native Simple Radio Buttons

Easy and simple to use Radio Buttons for your React Native Application.

Installation

npm i react-native-custom-radio-buttons

Components

  • RadioButtons
    • Container to create a radio button.

Props

  • text: Accepts string to show as option in Radio Button
  • setOption: Callback to change selected option
  • selected: Set which option is selected

Optional Props

  • radioButtonBorderColor: Set the Radio Button Oultine Color (Default: #000)
  • radioButtonSize: Sets the size of the radio button (Default: 20)
  • selectedRadioButtonColor: Sets the color of the radio button which has been selected (Default: #000)
  • optionTextStyling: Sets custom styling for the option Text next to the Radio Button

Examples

1. Using without Optional Props

Import

import RadioButtons from "react-native-custom-radio-buttons"

Usage

function Example(){
    const [option, setOption] = useState("");
    const options = ["Option 1", "Option 2", "Option 3"];

    return (
        <View style={styles.container}>
            <View style={{ width: "80%" }}>
            {options.map((obj) => (
                <RadioButtons
                    text={obj}
                    setOption={(val) => setOption(val)}
                    selected={option}
                    key={obj}
                />
                ))}
            </View>
            <View style={{ marginTop: 20 }}>
                <Text>Selected Option is: {option}</Text>
            </View>
        </View>
}

Example Screenshot

2. Using with Optional Props

Import

import RadioButtons from "react-native-custom-radio-buttons"

Usage

function Example(){
    const [option, setOption] = useState("");
    const options = ["Option 1", "Option 2", "Option 3"];

    return (
        <View style={styles.container}>
            <View style={{ width: "80%" }}>
            {options.map((obj) => (
                <RadioButtons
                    text={obj}
                    setOption={(val) => setOption(val)}
                    selected={option}
                    radioButtonBorderColor="#2ecc71"
                    radioButtonSize={24}
                    selectedRadioButtonColor="#2ecc71"
                    optionTextStyling={{fontSize: 24, color: "#2ecc71"}}
                    key={obj}
                />
                ))}
            </View>
            <View style={{ marginTop: 20 }}>
                <Text>Selected Option is: {option}</Text>
            </View>
        </View>
}

Example Screenshot

Issues and Contribution

Feel free to add any new feature, open issues or fork and create your own version of it with proper crediting.

You might also like...
The Art World in Your Pocket or Your Trendy Tech Company's Tote, Artsy's mobile app.
The Art World in Your Pocket or Your Trendy Tech Company's Tote, Artsy's mobile app.

Meta State: production Point People: Brian Beckerle, David Sheldrick CI : This is an Artsy OSS project. Other mobile projects are Energy and Eidolon,

A full-fledged package to build an e-commerce application for iOS and Android similar to Myntra/JackThreads. Available with beautiful design and necessary features along with screen for Dashboard and Mobile app. Build using React Native, Expo, React, GraphQL, Apollo Client, Node and MongoDB.  Foton books App Use React or React Native
Foton books App Use React or React Native

Foton books App Use React or React Native

A cross platform React Native app for customer entry to the therapeutic use of psilocybin
A cross platform React Native app for customer entry to the therapeutic use of psilocybin

MushZm MushZm is a cross platform React Native app for customer entry to the therapeutic use of psilocybin by providing information on published paper

COVID Safe Paths (based on Private Kit) is an open and privacy preserving system to use personal information to battle COVID
COVID Safe Paths (based on Private Kit) is an open and privacy preserving system to use personal information to battle COVID

COVID Safe Paths https://pathcheck.org/ Project Overview Help us stop COVID-19. COVID Safe Paths is a mobile app for digital contract tracing (DCT) sp

Audiobook mobile application accomplished with React Native and React ecosystem, just a single code base.
Audiobook mobile application accomplished with React Native and React ecosystem, just a single code base.

Audiobook App Open Source Audiobook mobile application accomplished with React Native and React ecosystem, just a single code base for both android an

ONA or Open News App is an open source React Native based application for WordPress News and Blog Websites.
ONA or Open News App is an open source React Native based application for WordPress News and Blog Websites.

ONA - WordPress Android Version . . ❗ ** iOS Version of App has not been tested yet.** About The App ONA or Open News App is an open source React Nati

:iphone: React-Native mobile application for Buttercup
:iphone: React-Native mobile application for Buttercup

Buttercup Mobile The mobile application for the Buttercup Credentials Manager. About This repository holds the source for the Buttercup mobile applica

Cross-platform React Native application written in ClojureScript
Cross-platform React Native application written in ClojureScript

What is Luno? Luno is a demo mobile application written in ClojureScript. It uses React Native, Reagent, Re-natal and a couple of React Native librari

Owner
Neelesh Ranjan Jha
Neelesh Ranjan Jha
📲💬 react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

???? react-native-fontext is a lightweight library to integrate fonts in your React Native application that works seamlessly in android and iOS devices.

mroads 9 Dec 3, 2021
Use a virtual background in your videocalls using the Agora SDK on React Native

Agora React Native Virtual Background Demo Use a virtual background in your videocalls using the Agora SDK on React Native Prerequisites >= react nati

Ekaansh Arora 1 Dec 20, 2021
Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg

Ecoleta Application using React Native, Expo, TypeScript, react-native-maps, react-native-picker-select, react-native-svg, @react-navigation/native, @react-navigation/stack, expo-constants, expo-font, expo-location and expo-mail-composer consuming the features of the Node.js - Ecoleta API

Osvaldo Kalvaitir Filho 7 Oct 28, 2022
React Native application that throws you random quotes in a super clean minimal version. You can save this quotes to favorites or share them with your friends.

Minimal Quotes The application concept and the design is created by Kishore from Elitepixels as a part of Project365 Minimal quotes is React Native ap

Insider Development 41 Sep 4, 2022
Spaceship - a React Native template with the aim of speeding up your development and increasing your productivity

Spaceship is a React Native template with the aim of speeding up your development and increasing your productivity. This template may receive new updates in the future.

Lucas Augusto 3 Mar 23, 2022
This is a simple react native application which can simulate dice rolls, double dice rolls, and coin flips.

coinflip-expo This is a very simple app build with React Native using Typescript It has 3 pages Coin Flip Dice Roll About Page Copyright 2021 Arnav Da

Arnav Dadarya 1 Nov 26, 2021
A simple To Do application written in React Native

Example To Do List application in react-native Requirements, install as needed: React Native: $ npm i -g react-native-cli watchman: $ brew install wa

Joe Maddalone 177 Sep 24, 2022
Exposure notification client application / Application client de notification d'exposition

La version française suit. COVID Alert Mobile App Available for iOS and Android: Pour iOS et Android: Adapted from https://github.com/CovidShield/mobi

Canadian Digital Service – Service numérique canadien 899 Jan 5, 2023
An easy way to connect with fellow developers during WWDC

wwdc.family This is an experiment to use Firebase and React Native to build a wwdc.family app. Don't use that source code as reference - I have no pri

WWDC Family 190 Feb 9, 2022
🧭 Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation.

?? Navio - navigation library for React Native (Expo). Build the app's layout in one place and use benefits of types predictibility. Built on top of React Navigation.

Batyr 22 Dec 14, 2022