Below is some information on the process I followed to create the app for the QueerSocial website. Perhaps it may help others.
I use Ubuntu linux but probably the principles are the same for Windows users.
QueerSocial Android App creation
1 Accounts
(a) OneSignal
Create a onesignal account and make an app for the UNA app.
(b) Firebase
Follow instuctions at https://documentation.onesignal.com/docs/generate-a-google-server-api-key
(c) UNA Website
From Studio, select Settings then Push notifications. Fill in OneSignal App ID and REST API Key from the onesignal app settings.
2 Workstation Set up (Ubuntu)
(a) NPM
Install NPM as per https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
sudo apt install nodejs sudo apt install npm
Node version manager
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
command -v nvm (should output ‘nvm’ if install wnet okay)
sudo apt-get install python g++ make
NOTE: if current installed npm
is not compatible with Node.js version you are using you can update your npm
using
npm install npm@latest -g
( see
https://github.com/nodejs/help/issues/1877
)
You can log in at https://www.npmjs.com/login
(b) React Native, Android dev & Watchman
Install React & Android studio following the info for “React Native CLI Quickstart” NOT Expo one at https://facebook.github.io/react-native/docs/getting-started
sudo
npm install -g react-native-cli
For Watchman (see https://facebook.github.io/watchman/docs/install.html#installing-from-source)
you will first need to install libssl-dev
, autoconf
, automake, libtool, pkg-config
and
python-dev
sudo apt install libtool
etc
(c) Java
Install Java
(see https://www.digitalocean.com/community/tutorials/how-to-install-java-with-apt-on-ubuntu-18-04)
sudo apt install default-jre
sudo apt install default-jdk
3 Building
(a) Files
Download the UNA-Mobile project files (zip or git clone).
To rename app to QueerSocial with site url queersocial.net you need to change the following strings:
UNA.IO =>
QueerSocial
com.una.android => com.
queersocial
.android
com.una.ios => com.
queersocial
.ios
in the following files:
App.js
app.json
android/app/BUCK
android/app/build.gradle
android/app/src/main/AndroidManifest.xml
android/app/src/main/res/values/strings.xml
Then rename
folder:
android/app/src/main/java/com/una/android/
TO
android/app/src/main/java/com/
queersocial
/android/
Then
edit
these two
file
s as per above
:
android/app/src/main/java/com/
queersocial
/android/MainActivity.java
android/app/src/main/java/com/
queersocial
/android/MainApplication.java
Add your OneSignal app ID to the file App.js:
const ONESIGNALAPPID = '
nnn
';
(b) Images
Change all images to your own in /img/
folder, leaving the same images dimensions.
To change launcher and icons it's recommended to use special script, it can be installed using the following command:
npm i -D @bam.tech/react-native-make
Then you can generate app icons for Android using the following command:
react-native set-icon --platform android --path ./img/icon-android.png
To generate splash for Android, some trick is needed (make sure that you replace Kookaburra with your own app name):
Change "name": "kookaburra"
in package.json
file to "name": "kookaburra/android"
.
Then run the following command:
react-native set-splash --platform android --path ./img/background.png --resize contain
Then change "name": "kookaburra/android"
back to "name": "kookaburra"
in package.json
file.
(c) Build the project
Initial compile
npm install
( and npm audit fix if required )
Set variable:
export ANDROID_HOME=/path/to/android/sdk
From project folder run:
sudo chown -R $USER:$(id -gn $USER) /home/cnayl/.config yo rn-toolbox:assets --splash ./img/background.png –android
Create the debug.keystore by running the following from the /android/app/ folder:
keytool -genkey -v -keystore una.debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
To bundle the react-native stuff , from project folder:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
Then with emulator running to check things work okay so far:
react-native run-android
4 Android App
In Android Studio, Open as “Android project” the /android/ folder.
If prompted, apply upgrades etc.
Right click on the app/res folder, then click on New and then click on Image Asset
-
In the Icon Type field select Launcher Icons (Adaptive and Legacy)
-
In the path field, select
logo_android.png
file (in /android/app/src/main) -
Once done, click on the Next button and then on the Finish button.
5 Add OneSignal code
To add push notification support, follow instructions at:
https://documentation.onesignal.com/docs/android-sdk-setup#section-1-adding-onesignal-dependencies
Continuing on, update file android/app/src/main/java/com/queersocial/android/MainApplication.java as per:
https://documentation.onesignal.com/docs/android-sdk-setup#section-2-add-required-code
Customise notification icon https://documentation.onesignal.com/docs/customize-notification-icons
You can then run app from Android studio on device emulator.
If you are facing issue in generating signed apk, you can try to do this in your android/app/
build.gradle
file
android {
lintOptions {
checkReleaseBuilds false
}
}
TO DO STILL:
Select Build variant as Release, Create package for testing, Publish! This is covered in part 2 of this blog post.
QUESTIONS
I had these questions and made the assumptions shown and it seems to work!
In file App.js should this be changed to reflect our app name? (I’m assuming no)
userAgent={"UNAMobileApp/Mobile (" + Platform.OS + ")"}
In file MainActivity.java should this be kept as una or changed? (I’m assuming yes)
protected String getMainComponentName() { return "una"; }