React Native HMS Nearby Service Plugin | Wifi Share Application
Introduction ℹ️
React Native HMS Nearby Service Plugin enables the communication between Huawei Nearby Service SDK and React Native platform. It allows apps to easily discover nearby devices and set up communication with them using technologies such as Bluetooth and Wi-Fi.
Understanding Nearby Wifi Share 🧘🏻
Nearby Wifi Sharing provides establishing wifi connection feature for wifi-unconnected phone, using the wifi-connected phone.
A simple connection process follows the steps below:
- Sharer : Starts scanning by using startWifiShare(SHARE) function.
- Requester : Starts broadcasting.
- Sharer : Founds requester and triggers WIFI_ON_FOUND then shares wifi settings using shareWifiConfig function.
- Requester : Fetches authentication code and triggers WIFI_ON_FETCH_AUTH_CODE.
- Sharer and Requester : Completes wifi sharing and triggers WIFI_ON_RESULT.
- Sharer and Requester : Stops wifi sharing functionalities using stopWifiShare function.
Wifi Share Application 🤝
Application Creation 🏗
Create NearbyWifiShare app using the command below.
Download React Native HMS Nearby Service Plugin.
Development Process 💻
- App.js : Entry point of the wifi sharing application. We will handle sharing wifi functions and events using this screen. Users will be informed using dialogs and able to start and stop wifi sharing.
- Styles.js : Contains all view styles for this application.
Let's continue with creating our main screen App.js 🦾.
In componentDidMount() we registered for events WIFI_ON_FOUND, WIFI_ON_LOST, WIFI_ON_FETCH_AUTH_CODE, and WIFI_ON_RESULT to handle success and error cases for both ends.
WIFI_ON_FOUND : We showed a dialog to ask sharer if she/he wants to share wifi configuration using shareWifiConfig() with the requester. Otherwise use stopWifiShare() function to end the process.
WIFI_ON_LOST : Informed user about connection lost.
WIFI_ON_FETCH_AUTH_CODE : Showed requester an information dialog because requester receives an authentication code with this event from the other phone.
WIFI_ON_RESULT : Handled process results such as SUCCESS, FAILURE, WIFI_MUST_BE_ENABLED, etc.
After registering events, we assigned functions to request and share buttons. Request button triggered startWifiShare(SET) function and share button triggered startWifiShare(SHARE) function to start broadcasting or scanning.
After this step, registered events worked and continued the remaining process as we stated in the information part and event explanations.
In the end for better resource and memory management, we stopped the process using stopWifiShare() function for both phones to stop scanning and broadcasting.
For better styling, we created our Styles.js file above.
Here is the Magic !!! Let's Run the App 😎
Conclusion📍
As a result, we learned about how to use HMS RN Nearby Service Plugin for sharing wifi case by creating an example application. It removed the extra time of sharing passwords, wifi names, etc.
