Unverified Commit 8712d0bf authored by Diego Mello's avatar Diego Mello Committed by gitbook-bot

GitBook: [master] one page and 7 assets modified

parent 1c4bd946
......@@ -7,9 +7,18 @@ Here we will show you how to customize:
* The App Icons
* Splash Screens
* App Name
* Some colors
* Colors
Before starting, keep in mind that you will need an intermediate knowledge of Android/iOS development and basic Javascript knowledge.
## Important
* This document is updated after every release, so we can guarantee it's stable for production
* `develop` branch might be different from this
* Keep in mind that you will need an **intermediate** knowledge of Android/iOS development and basic Javascript knowledge
* Our repo contains targets/build flavors to build both our Experimental and Official apps
* Both apps are equal, but released at different pace on the stores
* If you see an Experimental folder, don't be scared of breaking anything. It's just a folder containing the assets for the non-official app
## Repo
......@@ -17,7 +26,6 @@ Before starting, keep in mind that you will need an intermediate knowledge of An
* You can follow this guide: [https://reactnative.dev/docs/getting-started](https://reactnative.dev/docs/getting-started)
* Clone [https://github.com/RocketChat/Rocket.Chat.ReactNative](https://github.com/RocketChat/Rocket.Chat.ReactNative)
* Checkout `single-server` branch
* Note: this branch is updated after every release, so we can guarantee it's stable.
## General
......@@ -51,6 +59,7 @@ Before starting, keep in mind that you will need an intermediate knowledge of An
* Open [RocketChatRN.xcworkspace](https://github.com/RocketChat/Rocket.Chat.ReactNative/tree/single-server/ios/RocketChatRN.xcworkspace) on Xcode \(11.7 or newer\)
* On General tab, select “RocketChatRN” and change Display Name, Bundle Identifier, Version and Build
* Note: as explained on Important section, we have two targets and we're going to cover the default one on this doc, which is the Experimental app.
![](../../../.gitbook/assets/screen-shot-2020-10-05-at-16.42.41.png)
......@@ -102,13 +111,17 @@ Before starting, keep in mind that you will need an intermediate knowledge of An
![](../../../.gitbook/assets/image%20%2842%29.png)
* Change the app icon on `Images.xcassets/App Icon`
* Change the app icon on `Experimental.xcassets/App Icon`
![](https://lh6.googleusercontent.com/sEyF_kaGjBtal_IW-pV657Hku-sSPPrUFwSgbW2VllV_tEHBGcfIuu6IJ5UN33q9UdE2q_Q9xC4TDiC7ERoe37OfYYhA333y5T5Dqo0jV9h5dvTj5uN2l2JadhLg7fEripLwgn-B)
![](../../../.gitbook/assets/image%20%28178%29.png)
* Change the app splash screen on `Images.xcassets/Launch Screen Icon`
* Change the app splash screen on `Experimental.xcassets/Launch Screen Icon`
![](https://lh4.googleusercontent.com/42ftYBrzF-r8eBeCpACkUAFzRbU4DOcuVHgXLqGdDCIGsv7J9v4pGHcUM-P6coWftTXkCiX0_u3J-c-0v92R23Bztknnq94WJ1FV5eGXyF53VNf06hFSuMlIEOmhAEPcLh2sXq65)
![](../../../.gitbook/assets/image%20%28175%29.png)
* Change the splash background colors on `Experimental.xcassets/splashBackgroundColor`
![](../../../.gitbook/assets/image%20%28179%29.png)
* Set your Bugsnag API key on `RocketChatRN/Info.plist`
......@@ -141,24 +154,34 @@ Before starting, keep in mind that you will need an intermediate knowledge of An
* Execute the following on project terminal
* `yarn`
* `cd ios`
* `pod install`
* `cd ..`
* `npx pod-install`
* `yarn ios`
## Android
### General setup
_**Note:** we have two Android flavours: play \(used on Google Play\) and foss \(free of any proprietary libs\). This document contains instructions to the play favour._
* Similarly to iOS, we have build flavours to generate our Official, Experimental and F-Droid versions of the app
* `experimental` and `official` folders contain app icons and splash screens
* `play` and `foss` folders contain necessary code to run the app with or without Google Play services, respectively
* `foss` build doesn't contain push notifications implemented
* `main` folder contains core implementations
* `debug` folder contains code to run the app in debug mode
* This doc is going to focus on building the Experimental app, so we're going to use `experimental`, `play` `debug`, and `main` folders
![](../../../.gitbook/assets/image%20%28177%29.png)
* Set `APPLICATIONID`, `VERSIONNAME`, `VERSIONCODE` and `BugsnagAPIKey` on [./android/gradle.properties](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/single-server/android/gradle.properties)
* Generate a [new image asset](https://developer.android.com/studio/write/image-asset-studio) for `ic_notification` on the folders [./android/app/src/main/res/drawable\*](https://github.com/RocketChat/Rocket.Chat.ReactNative/tree/single-server/android/app/src/main/res)
* Generate a [new image asset](https://developer.android.com/studio/write/image-asset-studio) for `ic_launcher` on the folders [./android/app/src/play/res/mipmap\*](https://github.com/RocketChat/Rocket.Chat.ReactNative/tree/single-server/android/app/src/play/res)
* Change [./android/app/src/play/res/drawable-xxhdpi/splash.png](https://github.com/RocketChat/Rocket.Chat.ReactNative/tree/single-server/android/app/src/play/res/drawable-xxhdpi)
* Change `strings/app_name` and `strings/share_extension_name` on [./android/app/src/main/res/values/strings.xml](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/single-server/android/app/src/main/res/values/strings.xml)
* Set `APPLICATIONID`, `VERSIONCODE` and `BugsnagAPIKey` on `./android/gradle.properties`
* Generate a [new image asset](https://developer.android.com/studio/write/image-asset-studio) for `ic_notification` and target `main`
* Generate a [new image asset](https://developer.android.com/studio/write/image-asset-studio) for `ic_launcher` and target `experimental`
* Change splash screen background and notification text color on `./android/app/src/experimental/res/values/colors.xml`
![](https://lh6.googleusercontent.com/pFW-aGmA9PheAjKFE4_Q0SaHDg6kA_FbGXmSLSa8hSjwLLz1HGJmEyCx__EsZZiIqSJBybOyG4LOYAjDMN02tRq0vD2qcn2Vzv6iSF-WsO08GY6HWlmiB-t03RBbR6kPIa5XXicB)
![](../../../.gitbook/assets/image%20%28180%29.png)
* Change splash screen logo on `./android/app/src/experimental/res/drawable-xxhdpi/splash.png`
* Change app name and share extension name on `./android/app/src/main/res/values/strings.xml`
![](../../../.gitbook/assets/image%20%28174%29.png)
### Generate upload key
......@@ -171,7 +194,7 @@ _**Note:** we have two Android flavours: play \(used on Google Play\) and foss \
![](../../../.gitbook/assets/15.png)
* Set `KEYSTORE_PASSWORD` and `KEY_PASSWORD` on [./android/gradle.properties](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/single-server/android/gradle.properties) with the passwords you were prompted
* Set `KEYSTORE_PASSWORD` and `KEY_PASSWORD` on ./android/gradle.properties with the passwords you were prompted
### Generating Android app on Firebase
......@@ -190,7 +213,7 @@ _**Note:** we have two Android flavours: play \(used on Google Play\) and foss \
![](https://lh6.googleusercontent.com/t4_xn2ud8KnPKDfQ4r2Hk7jo4bYs85ZQ8LmYFeFwD6tB3qt3a8U1l3x1HsFcDE0yRKe1PI8AXDD-4J-8QoQMarD7riUwO3hjF4YURBKOe8hlJZHRCvt1E49TxVVZSkPSAfKg7OFB)
* Download config file and move it as instructed, but to `android/app/src/play` instead.
* Download config file and move it as instructed
![](https://lh5.googleusercontent.com/k7CjPaIbiBvkd3wY1Exl6FGZsmC5blK8pNW3fycI9NAVZ9rWwdVNHtSTV6EWHQFasep9tOf0k0nEE36khTIxgtTr4se2_NM6lJmgeM20M5lhMPupoc0BjhouH7B7X3jnP5CvgMg6)
......@@ -200,14 +223,10 @@ _**Note:** we have two Android flavours: play \(used on Google Play\) and foss \
* Execute the following on project terminal
* `yarn`
* `yarn android`
* The app will build on the simulator or device, but it won’t start automatically
### Optional: Start the app automatically after build
* Android starts the app based on package’s Activity, but we changed the application id, so it won’t work
* For it to work, you have to change all references to `chat.rocket.reactnative` on `.java` files and on manifest
* Change all references as on this commit \(compare it against `play` folder\): [https://github.com/RocketChat/Rocket.Chat.ReactNative/commit/518e56379d88937d7f9a572c7bd61716a4d0b7fe](https://github.com/RocketChat/Rocket.Chat.ReactNative/commit/518e56379d88937d7f9a572c7bd61716a4d0b7fe)
* `yarn android-whitelabel <YOURAPPID>`
* For example, the app created on this document would use `yarn android-whitelabel chat.rocket.whitelabel`
* Note: this script uses `experimentalPlayDebug` build flavor. When you build your app on release mode, use `experimentalPlayRelease`
* Refer to [https://developer.android.com/studio/build/build-variants](https://developer.android.com/studio/build/build-variants) for more info about how it works
## Push notification
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment