Ichiban React Native

The Ichiban anime guessing game but ported from web to React Native for iOS and Android.
Google Play Store Link »

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
   • Development
   • Publishing
3. License
4. Contact
5. Acknowledgements

About The Project

My first React Native application which basically reused like 80% of the code from the original Ichiban web version.

Built With

• React Native

Getting Started

Here is a guide if you want to clone the project and modify it for yourself:

Prerequisites

• npm
• git

Installation

1. Clone the repo

   git clone https://github.com/AjayLiu/ichiban-react-native.git

2. Install package

   npm install

Development

To test on Android, use:

npm run android

Make sure to have an AVD installed

⚠️ ALSO MAKE SURE YOU USE JDK 13 FOR THIS PROJECT, IF YOU'RE ON WINDOWS MAKE SURE YOU GO TO YOUR ENVIRONMENT VARIABLES AND DOUBLE CHECK THAT JAVA_HOME POINTS TO C:\Program Files\Java\jdk-13.0.2

Publishing

https://reactnative.dev/docs/signed-apk-android

NOTE: What I did was a little tricky because I didn't want to expose the keystore credentials in this git repo.

1. Generate a keystore

   keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

   Remember what you put for the keystore password. This should create a file called my-upload-key.keystore

2. Move this keystore to /android/app/

3. (FOR WINDOWS) Go to ~/.gradle/gradle.properties (if the file doesn't exist, create a grade.properties) (also ~ means your User path, so something like C:\Users\Bob) and enter

   MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
   MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
   MYAPP_UPLOAD_STORE_PASSWORD= [ENTER YOUR PASSWORD HERE]
   MYAPP_UPLOAD_KEY_PASSWORD= [ENTER YOUR PASSWORD HERE]
   

4. Double check that you are in the /android/ directory and run

   ./gradlew bundleRelease
   

5. If that didn't work then it's probably something with Windows and it's not reading from ~/.gradle/gradle.properties. In that case, just go to your project's android/app/build.gradle and under this code block:

   if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
     storeFile file(MYAPP_UPLOAD_STORE_FILE)
     storePassword MYAPP_UPLOAD_STORE_PASSWORD
     keyAlias MYAPP_UPLOAD_KEY_ALIAS
     keyPassword MYAPP_UPLOAD_KEY_PASSWORD
   }
   

   add in:

   storeFile file('my-upload-key.keystore')
   storePassword "[YOUR PASSWORD]"
   keyAlias "my-key-alias"
   keyPassword "[YOUR PASSWORD]"
   

   and fill in [YOUR PASSWORD] as you did in step 1.

6. Your .apk and .aab files will be generated in android/app/build/outputs/

7. Choose one of them to upload to Google Play Store! 🎉

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Ajay Liu - contact@ajayliu.com

Project Link: https://github.com/AjayLiu/ichiban-react-native

Acknowledgements

• Jikan API