Как отобразить значение переключателя в React Native?

Я новичок в React Native и разработке мобильных приложений в целом. Я пытаюсь отобразить значение, которое я присвоил разным переключателям в группе переключателей, однако, похоже, я что-то не так понимаю. Вот код ниже:

RadioButtons.js

    import React from 'react';
    import { FontAwesome, Ionicons, MaterialCommunityIcons,
    MaterialIcons, Feather } from '@expo/vector-icons';

    export const DeliveryModes = [{
      label: <Ionicons name='ios-walk' size = {20} />,
      value: '30'
    }, {
      label: <MaterialCommunityIcons name='bike' size = {20} />,
      value: '50'
    }, {
      label: <MaterialCommunityIcons name='motorbike' size = {20} />,
      value: '190'
    }, {
      label: <MaterialCommunityIcons name='car-sports' size = {20} />,
      value: '50'
    }, {
      label: <MaterialCommunityIcons name='car-pickup' size = {20} />,
      value: '50'
    }, {
      label: <MaterialCommunityIcons name='car-estate' size = {20} />,
      value: '50'
    }, {
      label: <MaterialCommunityIcons name='bus-side' size = {20} />,
      value: '50'
    }, {
      label: <Feather name='truck' size = {20} />,
      value: '50'
    },
    ];

Index.js

    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 (
          <View style = {styles.Container}>
          <Tabs>
            {/* First tab */}
            <View title = "Delivery Mode" style = {styles.content}>
            {/* Showtimes */}
             <View>
               {/* Day */}
               <Text style = {styles.sectionHeader}>Kindly select desired mode of delivery.</Text>
               <RadioGroup
               radioGroupList = {DeliveryModes}
               containerStyle = {{ flexWrap: 'wrap', padding: 5, }}
               buttonContainerStyle = {{ borderWidth: 0, margin: 5, borderRadius: 40, width: 90, }}
               onChange = {(value) => this.deliveryMode(value)}
               ref = {e => this.RadioGroup = e}
               />
               </View>
            </View>
            {/* Second tab */}
            <View title = "Number & Weight" style = {styles.content}>
              <Text style = {styles.header}>
                Truly Native
              </Text>
              <Text style = {styles.text}>
                Components you define will end up rendering as native platform widgets
              </Text>
            </View>
            {/* Third tab */}
            <View title = "Parcel Category" style = {styles.content}>
              <Text style = {styles.header}>
                Ease of Learning
              </Text>
              <Text style = {styles.text}>
                It’s much easier to read and write comparing to native platform’s code
              </Text>
            </View>

            </Tabs>
            {/* Footer */}
            <View style = {styles.footer}>
              <TouchableHighlight
                underlayColor = "#9575CD"
                style = {styles.buttonContainer}
                onPress = {onBook}
              >
                <Text style = {styles.button}>Next</Text>
              </TouchableHighlight>
              <Text>{value}</Text>
            </View>
          </View>
        );
      }
    }


    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;

Я хочу иметь возможность передавать значение каждого переключателя в текстовый тег под следующей кнопкой. Я сделал код простым и понятным для лучшего использования свойства onChange.