We are starting a new series of tutorial in which we will be creating Mobile Application as well as IOT gadgets using micro-controller like Arduino. The app will control the IOT device. Because “If you are serious about software you need to make your own hardware” – Nikos Askitas.
For this tutorial we will be creating a Smart Switch App. Using the app we can turn on a light and the light will turn off automatically after some time ( i.e. the time for which it has been set). The app will allow users to create multiple switches to turn off light after different time period. For example, we can create a switch named “loo” to turn off after 2 mins and another switch named “Bath” to turn off after 5 mins. The app will connect with our device using bluetooth. So, lets start by creating our app.
To add bluetooth data transfer we will use ‘react-native-bluetooth-serial’ package. Below is the code to enable, disable bluetooth and list paired devices :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 |
import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, Button, FlatList, Switch } from 'react-native'; import BluetoothSerial from 'react-native-bluetooth-serial' export default class App extends Component<{}> { constructor (props) { super(props) this.state = { isEnabled: false, discovering: false, devices: [], unpairedDevices: [], connected: false, } } componentWillMount(){ Promise.all([ BluetoothSerial.isEnabled(), BluetoothSerial.list() ]) .then((values) => { const [ isEnabled, devices ] = values this.setState({ isEnabled, devices }) }) BluetoothSerial.on('bluetoothEnabled', () => { Promise.all([ BluetoothSerial.isEnabled(), BluetoothSerial.list() ]) .then((values) => { const [ isEnabled, devices ] = values this.setState({ devices }) }) BluetoothSerial.on('bluetoothDisabled', () => { this.setState({ devices: [] }) }) BluetoothSerial.on('error', (err) => console.log(`Error: ${err.message}`)) }) } _renderItem(item){ return(<View style={styles.deviceNameWrap}> <Text style={styles.deviceName}>{item.item.name}</Text> </View>) } enable () { BluetoothSerial.enable() .then((res) => this.setState({ isEnabled: true })) .catch((err) => Toast.showShortBottom(err.message)) } disable () { BluetoothSerial.disable() .then((res) => this.setState({ isEnabled: false })) .catch((err) => Toast.showShortBottom(err.message)) } toggleBluetooth (value) { if (value === true) { this.enable() } else { this.disable() } } render() { return ( <View style={styles.container}> <View style={styles.toolbar}> <Text style={styles.toolbarTitle}>Bluetooth Device List</Text> <View style={styles.toolbarButton}> <Switch value={this.state.isEnabled} onValueChange={(val) => this.toggleBluetooth(val)} /> </View> </View> <FlatList style={{flex:1}} data={this.state.devices} keyExtractor={item => item.id} renderItem={(item) => this._renderItem(item)} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#F5FCFF', }, toolbar:{ paddingTop:30, paddingBottom:30, flexDirection:'row' }, toolbarButton:{ width: 50, marginTop: 8, }, toolbarTitle:{ textAlign:'center', fontWeight:'bold', fontSize: 20, flex:1, marginTop:6 }, deviceName: { fontSize: 17, color: "black" }, deviceNameWrap: { margin: 10, borderBottomWidth:1 } }); |
In the above code we are checking the status of bluetooth when the app loads. If it is enabled then we list the paired devices. Also, we can enable or disable bluetooth and on enabling we update the list of paired devices.
Video Tutorial :