{"id":9779,"date":"2024-03-12T05:32:50","date_gmt":"2024-03-12T05:32:50","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9779"},"modified":"2024-03-12T05:32:50","modified_gmt":"2024-03-12T05:32:50","slug":"implement-radio-button-in-react-native","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/react-native\/implement-radio-button-in-react-native","title":{"rendered":"How to Implement Radio Button in React Native"},"content":{"rendered":"<p>Here\u2019s how you can implement a radio button component in react native.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"r\">import React from 'react';\r\nimport { View, Text, TouchableOpacity, StyleSheet } from 'react-native';\r\n\r\n\/\/ RadioButton component\r\nconst RadioButton = (props) =&gt; {\r\n  \/\/ Destructure the props\r\n  const { label, isSelected, onSelectionChange } = props;\r\n\r\n  return (\r\n    \/\/ TouchableOpacity is used to handle the press event\r\n    &lt;TouchableOpacity style={styles.radioButtonContainer} onPress={onSelectionChange}&gt;\r\n      &lt;View style={styles.radioButton}&gt;\r\n        {\/* Render a smaller circle inside the outer circle when isSelected is true *\/}\r\n        {isSelected ? &lt;View style={styles.radioButtonSelected} \/&gt; : null}\r\n      &lt;\/View&gt;\r\n      &lt;Text style={styles.radioButtonLabel}&gt;{label}&lt;\/Text&gt;\r\n    &lt;\/TouchableOpacity&gt;\r\n  );\r\n};\r\n\r\n\/\/ Styles for the RadioButton component\r\nconst styles = StyleSheet.create({\r\n  radioButtonContainer: {\r\n    flexDirection: 'row',\r\n    alignItems: 'center',\r\n    marginBottom: 5,\r\n  },\r\n  radioButton: {\r\n    height: 20,\r\n    width: 20,\r\n    borderRadius: 10,\r\n    borderWidth: 1,\r\n    borderColor: '#ACACAC',\r\n    alignItems: 'center',\r\n    justifyContent: 'center',\r\n    marginRight: 5,\r\n  },\r\n  radioButtonSelected: {\r\n    width: 14,\r\n    height: 14,\r\n    borderRadius: 7,\r\n    backgroundColor: '#794F9B',\r\n  },\r\n  radioButtonLabel: {\r\n    fontSize: 14,\r\n    color: '#000',\r\n  },\r\n});\r\n\r\n\/\/ App component\r\nconst App = () =&gt; {\r\n  \/\/ useState hook to manage the selected option\r\n  const [selectedOption, setSelectedOption] = useState(null);\r\n\r\n  \/\/ Function to handle selection change\r\n  const handleSelectionChange = (option) =&gt; {\r\n    setSelectedOption(option);\r\n  };\r\n  return (\r\n    &lt;View&gt;\r\n      {\/* Render the RadioButton component with different labels, and isSelected based on the selectedOption state *\/}\r\n      &lt;RadioButton\r\n        label=\"Option 1\"\r\n        isSelected={selectedOption === 'option1'}\r\n        onSelectionChange={() =&gt; handleSelectionChange('option1')}\r\n      \/&gt;\r\n      &lt;RadioButton\r\n        label=\"Option 2\"\r\n        isSelected={selectedOption === 'option2'}\r\n        onSelectionChange={() =&gt; handleSelectionChange('option2')}\r\n      \/&gt;\r\n    &lt;\/View&gt;\r\n  );\r\n};\r\nexport default App;<\/pre>\n<p>Alternatively, you can use UI libraries such as <strong>react-native-paper, restyle<\/strong> (by Shopify), etc.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here\u2019s how you can implement a radio button component in react native. import React from &#8216;react&#8217;; import { View, Text, TouchableOpacity, StyleSheet } from &#8216;react-native&#8217;; \/\/ RadioButton component const RadioButton = (props) =&gt; { \/\/ Destructure the props const { label, isSelected, onSelectionChange } = props; return ( \/\/ TouchableOpacity is used to handle the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9770,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-9779","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9779"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9779"}],"version-history":[{"count":2,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9779\/revisions"}],"predecessor-version":[{"id":9781,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9779\/revisions\/9781"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9770"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9779"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9779"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}