This project demonstrates how to build an Android application with offline data persistence capabilities, similar to Google Keep and WhatsApp. The application utilizes a real-time database that ensures data is persistently stored locally even when the app is offline or restarted.
In modern mobile applications, ensuring data persistence is crucial for a seamless user experience. This project showcases the implementation of an Android app with robust offline persistence features. By maintaining a local copy of data alongside cloud storage, the app guarantees data availability regardless of network conditions.
- Offline Data Storage: tore and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.
- Real-Time Database: Synchronize local data with the cloud when the device goes online..
- Auto Sync: Automatically updates cloud data with local changes once the connection is restored.
- User-Friendly Interface: Simple and intuitive UI for managing data entries.
- Firebase Realtime Database(https://firebase.google.com/docs/database) -Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.
- React Native Firebase(https://rnfirebase.io/) - firebase SDK
- React Native Async storage (https://react-native-async-storage.github.io/async-storage/docs/install/) - storing auth tokens.
- NoSQL database
- React Native Paper(https://callstack.github.io/react-native-paper/) - Cross-platform Material Design for React Native
- Figma - for prototype design
- Set Up Firebase Project and Realtime Database
- Create a Firebase Project: Go to the Firebase Console.Click on "Add Project" and follow the steps to create a new project.
- Add Realtime Database:Go project overview.Create an app choose web.In your Firebase project, navigate to the "Database" section in the left-hand menu. Click on "Create Database" in the Realtime Database section.Choose the location for your database and set the security rules. For development purposes, you can start in test mode.
- Add Firebase SDK to Your React Native Project. Install the Firebase packages: Ensure you have installed the necessary Firebase packages:
npm install @react-native-firebase/app @react-native-firebase/database
- Initialize Firebase in Your App: You need to initialize Firebase in your app’s entry file (usually App.js or index).You can get the config of database from project you created in firebase console
import firebase from '@react-native-firebase/app';
import database from '@react-native-firebase/database';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};
if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}
-
Ensure Configuration Files are Correctly Placed: For Android: Ensure google-services.json is in the root directory.
-
Install other dependencies:
npm install @react-native-community/netinfo @react-native-paper @react-navigation/native @react-native-async-storage/async-storage
-
Start the app
npx expo start
In the output, you'll find options to open the app in a
- development build
- Android emulator
- iOS simulator
- Expo Go(won't work requires development build to work)
You can start developing by editing the files inside the src/ directory. This project uses file-based routing.
![studio64_CuuGwCYE0t](https://private-user-images.githubusercontent.com/98744068/345294650-5deb50dc-e69c-48d1-b1c7-7acfb722a8a8.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2NTAtNWRlYjUwZGMtZTY5Yy00OGQxLWIxYzctN2FjZmI3MjJhOGE4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTgzZGE1ZjQ3Y2Q1NzdjZWQ2ZTEyMDhlNWEyZTQzODAwNjIzMjYzNWYxZjI1NDllYmZlMDczZjNjYmQyOGYzMjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Mp8vFExpuSZL-_9U5c_oKiFPE54-LRFW6zzpAFBTpLE)
![studio64_MddeKBOdCM](https://private-user-images.githubusercontent.com/98744068/345294608-e449e953-23b6-4f30-9756-960ce3040e57.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MDgtZTQ0OWU5NTMtMjNiNi00ZjMwLTk3NTYtOTYwY2UzMDQwZTU3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlkZGM5OWViZDE1Yzc1YzA1ZGNlNGI2YTJjMDk5M2Q5NmVmNjE0NTM3MmFkODA5YWNiMTNmZmEzMjRhYTBmZDAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4MjKatUzfZt9shQwoJ7JIegSJNIryf9MQQ2CYsTr_18)
![studio64_X04qLq6rL3](https://private-user-images.githubusercontent.com/98744068/345294624-4558a6d6-9b24-4cc3-9cf6-220edefee264.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MjQtNDU1OGE2ZDYtOWIyNC00Y2MzLTljZjYtMjIwZWRlZmVlMjY0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU1OTFhY2Y2MmI3ZGY2OGI3YmRiODdlYzAzYmI3NmEzOGIwNzhmMjk2NDE3MmQwMWU1ODA3NWE5MWZiZTdkZTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.81_Gxwrggk2giTBkxtluBdz7CNvW5cBKg4NbEJ2qlno)
![studio64_oLfS7GQ0Wz](https://private-user-images.githubusercontent.com/98744068/345294619-0aa12033-8fb4-4c29-9e50-82a6b256e1f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MTktMGFhMTIwMzMtOGZiNC00YzI5LTllNTAtODJhNmIyNTZlMWY1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM3YmE2ZjdjYjdhM2MwZWIyYzU2ZTBmZDUxMWVmYTI4ZWVkMTA1MDg3ZGU0MjMzYWNhMjJmMWEwZTc2MmZjMjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.C_R9NSq538H2e-OlPSOur4_yJxcf4yFlyYq52XDcN7A)
![studio64_NffQClFk1b](https://private-user-images.githubusercontent.com/98744068/345294614-8730a523-40f4-4c91-bcc3-eadebcebec3e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MTQtODczMGE1MjMtNDBmNC00YzkxLWJjYzMtZWFkZWJjZWJlYzNlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWEyOTkxZmM5OTdiNDBmZDRiYmFkMjE0Y2M0ZGRjMjE2NTAxNGMwM2I4Y2FkNDViOTc5YzQ1OGY0OTMzZWVhZDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.nMhuIuYM4mY40hmD6iHgXm_7A8u_0ngn1rH5YCkuYnQ)
![studio64_60sHmSZ7cn](https://private-user-images.githubusercontent.com/98744068/345294639-19c42747-bc6b-4ffc-8b4e-3c15b3cf93e4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MzktMTljNDI3NDctYmM2Yi00ZmZjLThiNGUtM2MxNWIzY2Y5M2U0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBjMGIyOGNjMmUwZDkxMDgzM2FlMGFhNTEwMGRmYWMxMWIxNTA5NGQyYTcxY2Y3MWEyMjQyZjg4NDViY2MwOTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dbBEDOKx9hrudKWD1mm9wq5A-GZzlygeet26Lkl4IAE)
![studio64_xOKTO8tb6q](https://private-user-images.githubusercontent.com/98744068/345294631-2b75d973-e57f-4bca-ae79-31db511099b7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MzEtMmI3NWQ5NzMtZTU3Zi00YmNhLWFlNzktMzFkYjUxMTA5OWI3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ3NzY3M2FlMWRlODhiOGYzMDE1YWJlZGJmNGI3ZDQ0NTM2MDhkNWE3ZmFkM2Q2ZDY5OTA2MGY2Zjc2MmRiN2QmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wKoxOuIeI-mlCqUNAwQrS6jXsUWoVQms6b1G4cxhFuE)
![studio64_LzwtyRNs01](https://private-user-images.githubusercontent.com/98744068/345294605-684c08ec-5f45-4292-90d0-70fa994c9b2f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MDUtNjg0YzA4ZWMtNWY0NS00MjkyLTkwZDAtNzBmYTk5NGM5YjJmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNhNjAyZGQyMmUzNjZjNDVhMmE2NTQyZjBiNmEyYjc2OGNiZWQ3OTRjN2QyNmUyYzE1M2ViYTljNGZiMjgyODMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.SVkYCIcJ7lWcK2Y_uQGoPnovZCfds7jdPGVLmt2wafM)
![studio64_oLfS7GQ0Wz](https://private-user-images.githubusercontent.com/98744068/345294619-0aa12033-8fb4-4c29-9e50-82a6b256e1f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MTktMGFhMTIwMzMtOGZiNC00YzI5LTllNTAtODJhNmIyNTZlMWY1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM3YmE2ZjdjYjdhM2MwZWIyYzU2ZTBmZDUxMWVmYTI4ZWVkMTA1MDg3ZGU0MjMzYWNhMjJmMWEwZTc2MmZjMjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.C_R9NSq538H2e-OlPSOur4_yJxcf4yFlyYq52XDcN7A)
![studio64_60sHmSZ7cn](https://private-user-images.githubusercontent.com/98744068/345294639-19c42747-bc6b-4ffc-8b4e-3c15b3cf93e4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ2MzktMTljNDI3NDctYmM2Yi00ZmZjLThiNGUtM2MxNWIzY2Y5M2U0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBjMGIyOGNjMmUwZDkxMDgzM2FlMGFhNTEwMGRmYWMxMWIxNTA5NGQyYTcxY2Y3MWEyMjQyZjg4NDViY2MwOTUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dbBEDOKx9hrudKWD1mm9wq5A-GZzlygeet26Lkl4IAE)
![studio64_dXVoQYmPF9](https://private-user-images.githubusercontent.com/98744068/345294596-27c674f5-e5a2-49f3-b20c-c5a215c3c4e0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU5NzQyNzEsIm5iZiI6MTcyNTk3Mzk3MSwicGF0aCI6Ii85ODc0NDA2OC8zNDUyOTQ1OTYtMjdjNjc0ZjUtZTVhMi00OWYzLWIyMGMtYzVhMjE1YzNjNGUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTEwVDEzMTI1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTUzYTJmMDAxMjY2YWM4NzNkYTExM2IxMzZkOTY2MTEyMTBhZGVhOWQ0NzViYWRjMTAyYjZkOWEyODA3NmYwYzUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.42n7tg2FLHCa1E6RVuoZNhDYBmsXq6g71Bp1GJh9RRw)
To learn more about developing your project with Expo, look at the following resources:
- Expo documentation: Learn fundamentals, or go into advanced topics with our guides.
- Learn Expo tutorial: Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.