React-native-bluetooth-message NPM

react-native-bluetooth-message

Message offline using bluetooth

Installation

npm install react-native-bluetooth-message

yarn add react-native-bluetooth-message

And run this command to link this library

react-native link react-native-bluetooth-message

Usage

Add following permissions in AndroidManifest.xml

<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"
    android:maxSdkVersion="30" />

<!--  For Android 12 or higher  -->
<uses-permission android:name="android.permission.BLUETOOTH_SCAN"
  android:usesPermissionFlags="neverForLocation" />
<uses-permission android:name="android.permission.BLUETOOTH_ADVERTISE" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

Available functions are:

enable // Enables Bluetooth and returns btState Promise<String>
discover // Discovers nearbby devices
discoverable // Makes the device discoverable return Promise<String>
ConnListener // Listens to connection status returns string
DvcListener // Listens to discovered device list and returns Array of Objects 
connect // connect(deviceAddress)
send // send(msgToSend)
MsgListener // Listens to incoming Messages (String)
disconnect // Closes all open connections 
isConnected // forcefully return connection State as Promise<String>

Example Code:

import React, { useState } from 'react';
import {
  StyleSheet,
  View,
  Text,
  SafeAreaView,
  Button,
  TouchableOpacity,
  ScrollView,
  TextInput,
} from 'react-native';
import {
  enable,
  discover,
  discoverable,
  ConnListener,
  DvcListener,
  connect,
  send,
  MsgListener,
  disconnect,
  isConnected,
} from 'react-native-bluetooth-message';

function renderDeviceList() {
  let dvcList: String[] = [];
  return Object.entries(DvcListener()).map(([_, dvc]) => {
    return Object.entries(dvc).map(([name, addr]) => {
      if (dvcList.includes(name)) {
        return <></>;
      } else {
        dvcList.push(name);
      }
      return (
        <TouchableOpacity
          onPress={() => {
            connect(addr);
          }}
          style={{
            backgroundColor: '#212121',
            marginVertical: 8,
            marginHorizontal: 10,
            padding: 20,
            borderRadius: 10,
          }}
          key={addr}
        >
          <Text>{name}</Text>
        </TouchableOpacity>
      );
    });
  });
}

export default function App() {
  const [msgTxt, setMsgTxt] = useState<string>('');
  return (
    <SafeAreaView>
      <ScrollView>
        <View style={styles.alignCenter}>
          <Text style={styles.heading}>Bluetooth Message Example App</Text>
          <Text>Connection Status : {ConnListener()}</Text>
          <View>
            <Button
              title="Enable"
              onPress={async () => {
                enable().then((btState) => {
                  console.info(btState);
                });
              }}
            />
            <Button
              title="discoverable"
              onPress={async () => {
                discoverable(15).then((discoverability) => {
                  console.info(discoverability);
                });
              }}
            />
            <Button
              title="discover"
              onPress={async () => {
                discover().catch((err) => {
                  console.log('ok', err);
                });
              }}
            />
          </View>
        </View>
        {renderDeviceList()}
        <View>
          <TextInput
            placeholder="Type your message"
            onChangeText={(newText: any) => setMsgTxt(newText)}
            value={msgTxt}
          />
          <Button
            title="Send"
            onPress={() => {
              send(msgTxt);
            }}
          />
        </View>
        <Text>{MsgListener()}</Text>
        <Button
          title="Disconnect"
          onPress={() => {
            disconnect();
          }}
        />
        <Button
          title="is Connected"
          onPress={() => {
            isConnected().then((isCon) => {
              console.log(isCon);
            });
          }}
        />
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  heading: {
    fontSize: 40,
  },
  alignCenter: {
    alignItems: 'center',
  },
});