Moneta is a simple currency converter application built in React Native and scaffolded with the create-react-native-app CLI. The objective of this application was a simple demonstration of using simple components and tools that can be easily applied in React for building web applications. This means this app's components and structure can be easily used to build a web app with the very same functionality with little re-write. (PS: Moneta is roughly translated to money in Latin)
You will obviously need to know how React Native and React work in the background in order to use this project. Also, you will need to have Expo app installed on your testing device, if using a testing device or have an emulator setup, either Android or IOS, the react native getting started guide has this explained already.
To get this project source:
$ git clone https://github.com/BrianLusina/moneta.git
A couple of things you will need setup on your development environment
Expo account (Optional)
Expo will be used to run the application on an emulator or a real device. The expo account is optional, especially on publication of the application on Expo, you will need to login and register the application there. More details are in the link provided
This is optional if you will use a real device for testing the application. Setup for an emulator will be available in the provided links. If your development machine is a Linux/Windows, then you have access to only the Android Emulators, otherwise, if on mac, you have access to both.
Once you have these dependencies set up, installing dependencies is as simple as follows:
$ npm install # if using yarn $ yarn install
This will install the dependencies and set them in the node_modules
This has followed Test Driven Development(TDD) approach and thus running tests can be done as follows:
$ yarn test # or if using npm $ npm run test
Tests are run using jest and other testing tools include:
Linting is done using ESlint styling rules. Any coding standard can be used. To set the coding style you want simply run this command to initialize a new ESlint configuration:
$ npm run lint:init # or $ yarn lint:init
Run lint tests with
$ npm run lint # or $ yarn lint
Fix linting issues:
$ npm run lint:fix # or $ yarn lint:fix
Deployment can be done to either Expo, PlayStore or AppStore or all three of them, considering this is a React Native application.
Deplyment for Playstore can be done after a build for the apk is done on Expo. To do this, run the script:
yarn build-android # build Android apk yarn build-ios # build ios ipa
These commands will run the Android and IOS applications.
They can not be run concurrently, so to check the status of builds use:
Will tell you the status of the current build it any.
You should get an output like this:
$ exp build:status [exp] Making sure project is set up correctly... [exp] Your project looks good! [exp] Checking if current build exists... [exp] ============ [exp] Build Status [exp] ============ [exp] Android: Build in progress... Done in 12.00s.
This is the build status for Android project
The same output will be seen for IOS. After a build is done (which will take around 30 minutes or less).
You can fetch the APK from the build status output:
$ yarn build-status $ exp build:status [exp] Making sure project is set up correctly... [exp] Your project looks good! [exp] Checking if current build exists... [exp] ============ [exp] Build Status [exp] ============ [exp] Android: [exp] APK: <APK_URL> Done in 12.96s
<APK_URL>is the url of the APK that you can download the signed apk
Fetching keystores can be done as below:
$ yarn fetch-keystore # output exp fetch:android:keystore [exp] Retreiving Android keystore for @lusinabrian/moneta [exp] Writing keystore to <PROJECT_DIR>/<KEYSTORE_NAME>.jks... [exp] Done writing keystore to disk. [exp] Save these important values as well: Keystore password: <KEYSTORE_PASSWORD> Key alias: <KEY_ALIAS> Key password: <KEY_PASSWORD> [exp] All done! Done in 6.96s.
This will write the keystore file to the project root and output the keystore properties to STDOUT
Subscribe to React Native Example for Android and iOS
Get the latest posts delivered right to your inbox