In this article, I will go over an example project structure you can use for your React Native projects. This of couse my opinion so feel free to tweak the structure to your needs/preferences.
Link to project Link to Docz Website Project Structure . ├── android ├── app.json ├── App.tsx ├── babel.config.js ├── .buckconfig ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── docs ├── doczrc.js ├── .eslintrc.js ├── gatsby-node.js ├── .gitignore ├── .
...
A bit of backstory when I first started developing React Native apps, I found there weren’t any good example of Gitlab CI files. So in this article, I will show you an example .gitlab-ci.yml file you can use with your React Native app. You can of course tweak and makes changes as required by your project.
CI/CD Before we dive straight into the CI file itself, let’s do a quicker refresher on some basic concepts.
...
In this article, we will talk about how you can use React Native with Firebase Cloud Functions. We will also go over how we can automate the process of updating the cloud functions using Gitlab CI.
Firebase is a cloud-based platform developed by Google to aid in the development of Web and Mobile applications. It is tightly coupled with the Google Cloud Platform (GCP), so much so that there are certain actions you can only do using the GCP GUI, such as increasing the RAM of your cloud function “containers”.
...
In this article, I will show you how you can change the theme of your app depending on the time of the day. We will change the theme of the app depending on if the sun has set or risen.
Our Application To get started we will create a new React Native app by running the following command, react-native init ExampleApp --template typescript.
Note: We are using path aliases so ~ is the same as saying src/, this keeps the import paths cleaner.
...
In this article, we will go over how you can use add the new adaptive app icons to your Android app. In his article I will be using a React Native project, so the structure of your Android app may vary.
Adaptive Icons Adaptive icons are a new feature introduced in Android 8.0 (API level 26). It allows your app icon to be displayed using multiple shapes across different devices and launchers, more information available here.
...
In this article, I will show you how can automate the publishing of your AAB/APK to the Google Play Console. We will be using the Gradle Play Publisher (GPP) plugin to do automate this process for us. Using this plugin we cannot only automate the publishing and release of our app, we can also update the release notes, store listing (including photos) all from GitLab CI.
Note: In this article I will assume that you are using Linux and React Native version >= 0.
...
In this article I will show how you can use the GitLab CI with React Native to create a binary which can be published to the Google Play Store.
Prerequisites Google Developers Account A working React Native Android project Keystore First, we have to generate a keystore which we will use to sign our APK. To do this run the commands below, follow all the instructions and keep the file safe.
...
In this article, we will create a simple React Native (with Expo) application using React Navigation, for moving between screens/pages within our app. We will create an app which had a Stack Navigator nested in a Tab Navigator, nested within a Drawer Navigator.
This might sound a bit complicated so let’s take a look gif below.
We have three main pages in the Drawer Navigator Home (purple), Settings (red) and About (blue) pages.
...
Recently whilst developing a React Native app (with Expo), I built a simple tab navigator using React Navigation library. I wanted to theme the app so that the header would change colour depending on which page you’re on. For example on the primary page it would be red and on the secondary page, when you change tabs, the header would become blue.
I ended up being able to do it using Redux.
...
Running Expo/React Native in a Docker container can sometimes cause issues. In this example, I will be running Docker 🐳 within a guest VM (Ubuntu) which will run on my host machine (Windows). My host machine will also be running another VM as the Android emulator (Genymotion) for Expo to connect to. You can get a more detailed post about how to connect two VMs together here, #Plug 🔌🔌🔌. Since I’ve set up networking on those two VMs already as far as Expo is concerned it might as well be running on the host machine (Windows).
...
The core logic of my React Native app involves using WebViews because I need to access the HTML5 canvas. Whilst developing this code there are bound to be errors and issues with the WebView code. Figuring out how to debug code within the WebView isn’t so obvious.
Option 1: Chrome Inspect Start your Expo/React Native app*. Open and chrome and then go to the following URL, chrome://inspect. Then click on the inspect button, click the top link to open the latest WebView, you should see something similar to Figure 2.
...
Visual Studio Code and WebStorm are two popular editors for developing React Native/Expo apps. These editors have lots of useful features, such as syntax highlighting, git integration and auto completion. However working out to debug Expo apps can be a bit confusing.
One of the main advantages of working in an editor/IDE (let us be honest Visual Studio Code is pretty close to an IDE) is being able to use a debugger (and breakpoints) to go through your code line by line and see which part of your code is not running as expected.
...
My home PC runs Windows for various conveniences, such as gaming. However, for development, I run an Ubuntu virtual machine (VM) and Genymotion (on Windows) for testing my app. Genymotion also uses VirtualBox to run its Android emulators. So we work out how to let two VMs running on the same host communicate with each other (Ubuntu and Android Emulator).
Please Note: This will also work for VMWare Player.
Solution There are a few networking options we can choose from when setting up a VM.
...