title: How to render value of a radio button in React Native?
body: <p>I am pretty new in React Native and mobile app development as a whole.
  I am trying to render the value I have assigned to different radio buttons under a radio button group, however, I seem to be getting something wrong. Here is the code below:</p>
  
  <p>RadioButtons.js</p>
  
  <pre><code>    import React from 'react';
      import { FontAwesome, Ionicons, MaterialCommunityIcons,
      MaterialIcons, Feather } from '@expo/vector-icons';
  
      export const DeliveryModes = [{
        label: &lt;Ionicons name='ios-walk' size={20} /&gt;,
        value: '30'
      }, {
        label: &lt;MaterialCommunityIcons name='bike' size={20} /&gt;,
        value: '50'
      }, {
        label: &lt;MaterialCommunityIcons name='motorbike' size={20} /&gt;,
        value: '190'
      }, {
        label: &lt;MaterialCommunityIcons name='car-sports' size={20} /&gt;,
        value: '50'
      }, {
        label: &lt;MaterialCommunityIcons name='car-pickup' size={20} /&gt;,
        value: '50'
      }, {
        label: &lt;MaterialCommunityIcons name='car-estate' size={20} /&gt;,
        value: '50'
      }, {
        label: &lt;MaterialCommunityIcons name='bus-side' size={20} /&gt;,
        value: '50'
      }, {
        label: &lt;Feather name='truck' size={20} /&gt;,
        value: '50'
      },
      ];
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>    import React, { Component } from 'react';
      import { View, StyleSheet, Text, TouchableHighlight, } from 'react-native';
      import RadioGroup from 'react-native-custom-radio-group';
      import Tabs from './tabs';
      import { DeliveryModes } from './deliveryMode.js';
  
      class Details extends Component {
        constructor(props) {
          super(props);
          // Initialize State
          this.state = {
            // First tab is active by default
            activeTab: 0,
          };
        }
  
  
        render({ children } = this.props) {
          const {
           onBook
         } = this.props;
          return (
            &lt;View style={styles.Container}&gt;
            &lt;Tabs&gt;
              {/* First tab */}
              &lt;View title="Delivery Mode" style={styles.content}&gt;
              {/* Showtimes */}
               &lt;View&gt;
                 {/* Day */}
                 &lt;Text style={styles.sectionHeader}&gt;Kindly select desired mode of delivery.&lt;/Text&gt;
                 &lt;RadioGroup
                 radioGroupList={DeliveryModes}
                 containerStyle={{ flexWrap: 'wrap', padding: 5, }}
                 buttonContainerStyle={{ borderWidth: 0, margin: 5, borderRadius: 40, width: 90, }}
                 onChange={(value) =&gt; this.deliveryMode(value)}
                 ref={e =&gt; this.RadioGroup = e}
                 /&gt;
                 &lt;/View&gt;
              &lt;/View&gt;
              {/* Second tab */}
              &lt;View title="Number &amp; Weight" style={styles.content}&gt;
                &lt;Text style={styles.header}&gt;
                  Truly Native
                &lt;/Text&gt;
                &lt;Text style={styles.text}&gt;
                  Components you define will end up rendering as native platform widgets
                &lt;/Text&gt;
              &lt;/View&gt;
              {/* Third tab */}
              &lt;View title="Parcel Category" style={styles.content}&gt;
                &lt;Text style={styles.header}&gt;
                  Ease of Learning
                &lt;/Text&gt;
                &lt;Text style={styles.text}&gt;
                  It’s much easier to read and write comparing to native platform’s code
                &lt;/Text&gt;
              &lt;/View&gt;
  
              &lt;/Tabs&gt;
              {/* Footer */}
              &lt;View style={styles.footer}&gt;
                &lt;TouchableHighlight
                  underlayColor="#9575CD"
                  style={styles.buttonContainer}
                  onPress={onBook}
                &gt;
                  &lt;Text style={styles.button}&gt;Next&lt;/Text&gt;
                &lt;/TouchableHighlight&gt;
                &lt;Text&gt;{value}&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/View&gt;
          );
        }
      }
  
  
      const styles = StyleSheet.create({
        Container: {
          backgroundColor: '#FFF',
          height: 250,
          width: '100%',
          position: 'absolute',
          bottom: 0,
          shadowColor: '#000',
          shadowOffset: { x: 0, y: 0 },
          shadowOpacity: 0.2,
          elevation: 2,
          zIndex: 9999,
          flex: 1,
        },
        // Tab content container
      content: {
        flex: 1,                            
        justifyContent: 'center',           
        alignItems: 'center',               
        backgroundColor: '#F8F8F8',         
      },
      // Content header
      header: {
        margin: 10,                         // Add margin
        color: '#34495E',                   // White color
        fontFamily: 'Avenir',               // Change font family
        fontSize: 26,                       // Bigger font size
      },
      // Content text
      text: {
        marginHorizontal: 20,               // Add horizontal margin
        color: '#34495E',                    // Semi-transparent text
        textAlign: 'center',                
        fontFamily: 'Avenir',
        fontSize: 18,
      },
      sectionHeader: {
        paddingTop: 10,
        paddingLeft: 10,
        color: '#34495E',
        fontFamily: 'Avenir',
        fontSize: 15,
      },
        footer: {
          paddingHorizontal: 110,
          paddingVertical: 10,
          backgroundColor: '#FFF'
        },
        buttonContainer: {
          backgroundColor: '#2FCC71',
          borderRadius: 100,
          paddingVertical: 15,
          paddingHorizontal: 15,
          alignItems: 'center',
        },
        button: {
          color: '#FFFFFF',
          fontSize: 16,
          fontFamily: 'Avenir',
          fontWeight: 'bold',
        },
      });
  
      export default Details;
  </code></pre>
  
  <p>I want to be able to pass the value of each radio button into a Text tag below the next button. I have kept the code plain and clean for a better usage of the onChange property.</p>