Wireless Buzzer App (Part I)

 Wireless Buzzer App

(Part I)

Codes:

 import * as React from 'react';

import {View,Text,TouchableOpacity} from 'react-native';

import {Audio} from "expo-av";

class SoundButton extends React.Component{

  playSound = async () => {

    await Audio.Sound.createAsync(

      { uri: 'http://soundbible.com/mp3/Buzzer-SoundBible.com-188422102.mp3' },

      { shouldPlay: true }

    );

  };

  render(){

    return(

      <TouchableOpacity style={{

        marginLeft:20,

        borderWidth:1,

        borderColor:"black",

        alignItems:"center",

        justifyContent:"center",

        width:200,

        height:200,

        backgroundColor:"red",

        borderRadius:100

      }} onPress={this.playSound} >

      <Text style={{fontSize:20, fontWeight:"bold",fontStyle:"italic"}}>Press Me</Text>

      

      </TouchableOpacity>

    )

  }

}

export default class App extends React.Component{

  render(){

    return(

      <View style={{justifyContent:"center",alignItems:"center", marginTop:100}}>

      <SoundButton/>

      </View>

      

    )

  }

}

Video: