React Native and Expo.io based Home Energy Monitor App
Building a React Native App with Expo for our Home Energy Monitor Project.
It is all about the power
The Single-Phase Voltage in Sweden is 230 V and the Three-Phase Voltage is 400 V. The Frequency is 50 Hz. Our React Native app works both in iOS and Android, it displays the current power consumption on the three different phases i.e. L1, L2 and L3.
This app is a template app that we use in our himinds-iot-project.
Technology stack:
prerequisites:
We use Firebase database and authentication in the App. You need to create an account; follow this tutorial: Add Firebase to your JavaScript Project
You need to copy your web setup to the APIKey.js file.
<script src="https://www.gstatic.com/firebasejs/5.5.6/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
Install expo-cli:
npm install expo-cli --global
Installation:
npm install
Usage:
expo start
Screens:
Login screen
Sign up
Forgot password
Home Energy Monitor
Main screen, uses the React Native Speedometer Chart component to draw a dashboard. Updates are triggered by inserting new data into Cloud Firestore.
Home
Just a placeholder screen.
Profile Settings
Just a placeholder screen but you can log out if you want…
Thank you for reading! Take care and hope to see you soon. 🙏🏽
Learning resources:
Source Code
The source code for this article can be found here.