WordsReminder

Simple mobile application to save words in dictionaries, built withreact-nativeandreact-native-firebase.

Demo

Click on the picture to watch a brief video ↑

Setup

I made this application for personal usage and is not intended to be on Apple / Google stores, you will have to create your own Firebase project.

Common platform steps:

Firestore

1. Create aFirebase project.
2. EnableEmail/Passwordsign-in provider from theFirebase console(Authenticationsection).
3. Create aFirestoredatabase from theDatabasesection, when you have to choose the database rules, select locked mode, you will adjust the rules in the next step.
4. Update the database rules fromDatabase->Rulesand copy paste the following snippet:

service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if request.auth.uid!= null;
}
}
}

This rule allows only authenticated user to read / write into the database.

Project

1. Installreact-nativeon your computer. The project is not using Expo, as a result you have to follow the instructions from theReact Native CLI Quickstartsection of theofficial documentation. Make sure you are able to launch an Hello Worldreact-nativeapplication before continuing!
2. git clone https://github.com/akiver/wordsreminder.git(or download the project archive).
3. cp.env.example.env
4. yarn(never tested withnpm)

Follow the instructions below for your target platform.

iOS

Follow common steps from thesetup sectionbefore continuing!

1. sudo gem install cocoapods(if you doesn't haveCocoaPodsinstalled on your MAC).
2. Generate your ownGoogleService-Info.plist(When asking for aiOS bundle ID,use someting likecom.myusername.wordsreminder).
3. Copy yourGoogleService-Info.plistintoios/WordsReminder/GoogleService-Info.plist
4. yarn pod
5. yarn ios(will run the app in simulator)

Android

Follow common steps from thesetup sectionbefore continuing!

1. Download yourgoogle-services.jsonfrom the project settings of thefirebase console.
2. Edit this file and rename the fieldpackage_nametocom.wordsreminder.
3. Move the file intoandroid/app/google-services.json.
4. yarn android(will run in simulator).

Install on device (release)

iOS

Follow iOS steps from thesetup sectionbefore continuing!

1. Setup a code signin team account(You don't need to be part of Apple Developer Program to install the app on your own device).
2. yarn global add ios-deploy(Required to install the application wihtout xCode)
3. yarn ios:release --device= "Device name"You can find your device's name fromSettings->General->About.

Android

Follow Android steps from thesetup sectionbefore continuing!

1. Generate a signin key with theofficial doc.
2. yarn android:release --deviceId= "Device ID"You can find your device ID withadb devices.

E2E tests

End-to-end tests are made withDetoxand it uses a real Firestore database.

When building the application for E2E tests, the Firestore collections names differ from those used in the "real" application. Default names should be fine but you can change it from the.envfile. All variables withE2E_prefix are related to E2E tests.

Each test suites must be able to run independently. You can run 1 specific test suites withyarn e2e:test:ios e2e/tests/sign-in.test.tsfor example.

Before runningyarn e2e:build:iosoryarn e2e:build:android,make sure to kill any Metro processes, otherwise it may use the wrong collections names if Metro was started byyarn iosoryarn android!

Setup

1. Generate a service account key (it's ajsonfile) from the Firebase consolehttps://console.firebase.google.com/project/PROJECT-ID/settings/serviceaccounts/adminsdk(replace PROJECT-ID by your Firebase project ID in the URL).
2. Copy paste the json file into thee2efolder and rename it togoogle-services.json.
3. (optional) You can change theE2E_xxxvariables from the.envif needed.

iOS

1. Make sure to meet the Detoxrequirementsand installapplesimutils.
2. yarn e2e:build:ios
3. yarn e2e:test:ios

When running tests from the simulator, make sure the keyboard is visible, otherwise tests will fail because typing will not work! (it's configurable from Hardware => Keyboard => Toggle software keyboard)

If you want to run E2E tests with the release build, useyarn e2e:build:ios:releasethenyarn e2e:test:ios:release.

Android

1. yarn e2e:start
2. yarn e2e:build:android
3. yarn e2e:test:android

If you want to run E2E tests with the release build, useyarn e2e:build:android:releasethenyarn e2e:test:android:release.

Migrations

Migrations allow to change database scheme, data... All migrations must be inside themigrationsfolder and export arunfunction.

Setup

1. ReplacePROJECT_IDby your project ID in the.envfile, your project ID is available from theFirebase console.
2. Create a service account key (it's a json file) from theGoogle console.
3. Rename the.jsonfile toserviceAccountKey.jsonand paste it into themigrationsfolder.
4. yarn migrate

SVG

To generate a svg into a React component:

npx @svgr/cli --icon --native file.svg