Buzzer.js

import React, {Component,} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

class App extends Component {

    constructor() {
        super();
        this.state = {
            buzzer: 'Buzzer'
        };
    }

    detectON() {
        fetch('https://api.netpie.io/topic/HelloCMMC/gearname/thing2?auth=PK7fUciCu1ocVPE:r2LOK4ambsj5H2eEEkBZ3vhyc', {
            method: 'PUT',
            body: 'ON'
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Text style={styles.labelState}>{ this.state.buzzer } </Text>
                </View>
                <View style={styles.body}>

                    <TouchableOpacity onPress={this.detectON.bind(this)}>
                        <View style={styles.layoutButtonON}>
                            <Text style={styles.labelButton}>ON</Text>
                        </View>
                    </TouchableOpacity>

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#F5FCFF',
    },
    header: {
        flex: 5,
        //backgroundColor: 'red',
        justifyContent: 'center',
        alignItems: 'center'
    },
    body: {
        flex: 5,
        flexDirection: 'row',
        //backgroundColor: 'blue',
        justifyContent: 'space-around',
        alignItems: 'center'
    },
    labelState: {
        fontSize: 40,
        fontWeight: '100'
    },
    labelButton: {
      	color: 'white',
        fontSize: 30,
        fontWeight: '100'
    },
    layoutButtonON: {
        backgroundColor: 'cornflowerblue',
        paddingTop: 20,
        paddingLeft: 50,
        paddingRight: 50,
        paddingBottom: 20,
        borderRadius: 10
    }
});

AppRegistry.registerComponent('App', () => App);