Skip to main content

FAQs

Who can review a Merge Request​

Everyone developer working on the project, and in the Native Apps Chapter on Slack should be able to! A merge request for this project requires at least 2 approvals from any developer at Entain Australia Group, and at least 1 approval from a core group of developers who have worked on this project for a long time (you will find the list of approvers on the MR page itself, or when creating one, under Approval Rules).

Once you have an MR ready for review, simply share it with the channel and people will get to it as soon as they can. It is OK for you to post reminders in the #chapter-native-apps channel on Slack.

Make sure to wait before merging if someone has reacted to your post with 👀 (even if you already have 2 approvals!) as they might have a constructive suggestion or feedback about your work.

How we work with GraphQL​

We're steadily migrating individual parts of the app to GraphQL. This is a process that can be done by anyone, although it is very time consuming and requires a good knowledge of our data structure. The best people to talk to about this are in #project-graphql (this is a private channel, ask your team leader for an invitation!).

Some of the sections of the app using GraphQL include:

  1. The Home tab
  2. The Next To Go tab
  3. The Racing tab
  4. The Meeting Races screen
  5. The Race Card screen

It's worth noting that some of these screens, e.g. the Sports screens, are currently duplicated and sit behind a feature flag in code, so that we can easily switch back to Vuex in the case of an emergency.

For more information, check out the GraphQL project.

Why Vuex​

When the native apps project was started, there was a need to be able to quickly reuse the front-end data store layer instead of rebuilding it from scratch, due to the short development cycle imposed for launching new native apps using React Native. As such, the Vuex store and logic being used in the frontend project was imported, by importing all of the frontend project as a dependency (a less than favourable, but necessary, choice).

See also our section on ongoing efforts to migrate away from using Vuex in our native apps.

Icons​

Please see the dedicated wiki page here.

Brand specific files​

Most of our components and code is reusable across the app, independent of which brand we are building the app for. In some instances, however, a brand will require different styling or functionality. In those cases, we may need to create an entirely separate, brand-specific versions of a component or file, so that we don't end up with one gigantic file with a lot of brand specific logic where half of it takes up memory but isn't being utilised.

The way we handle this situation is by creating copies of the file in question under the brand folder (e.g. ladbrokes/) rather than the main app folder (i.e. app/). Let's say our component is called BrandSpecificComponent.tsx. The two components will be very similar, except for perhaps styling or some functional differences. They can be imported, at once, wherever they need to be used, by using the @brand alias in the import path, which then Babel will resolve to the right brand folder depending on which app is being compiled.

e.g.

import { BrandSpecificComponent } from "@brand/components/core/BrandSpecificComponent";

Be aware that if you take this approach, there will HAVE to be a version in each brand folder (i.e. ladbrokes/components/core/BrandSpecificComponent.tsx and neds/components/core/BrandSpecificComponent.tsx) otherwise the app will crash on load due to the missing import. Even creating a stub file, whilst things are still in development will work.

e.g.

export const BrandSpecificComponent = (): null => null;

How do we build the app (android CI, iOS is local)​

Please see the dedicate wiki page here.

What are the oldest versions of iOS and Android we support?​

  • iOS 12.4 (Last updated from iOS 11 to support ReactNative 0.69)
  • Android 6.0 Marshmallow
    • Android API v23

      Note: M1 Macs cannot emulate the above version, so we may update the Android min to version 7.0/API v24 soon..

What are the min-max screen sizes we support​

iOS

  • The smallest iPhone we support that can run iOS 12.4 is the iPhone 5s at 320dp x 568dp
  • The largest iPhone we support that can run iOS 12.4 is currently the iPhone 13 Pro Max at 428dp x 926dp

Android

TBD: Most recent slack thread raise on the topic: https://entainaus.slack.com/archives/C020RBF7T4H/p1660780325146449

Why does my Podfile.lock file keep changing?​

With regards to unexpected changes to Podfile.lock, there is only one Spec Checksum that is constantly changing that should not be committed, should be ignored, and therefore the changes to the Podfile.lock reverted, and that is FBReactNativeSpec. This is a known issue in our current version of React Native (0.64.2), and will be fixed once we update to 0.65.

For every other pod that is coming up with a new checksum in your local Podfile.lock - ask yourself whether you’ve inadvertently run gem update or bundle update without intentionally looking to update our dependencies as part of work. If you have, then you probably want to reconsider as any such updates should be discussed with everyone first, if they aren’t part of planned and scoped work as they will affect everyone.

If you DIDN’T update the pods specifically, and the changed checksum is coming from some pod named like react-native-some-other-words-here, chances are that a Node dependency was updated via npm. If you DID intend to update said node dependency, which happens to be a react native library, which in turn may have some native modules (i.e. a CocoaPods pod), then you do want to commit that change in the Podfile.lock just like you would commit the change in the NPM’s package-lock.json file.

How can I run multiple instances of the same app, e.g. two brands at the same time on different devices​

You will need to start a separate metro bundler for each brand on different ports, example below:

Emulator 1 (Lads):

  • yarn setup
  • yarn ladbrokes
  • yarn ios:ladbrokes -- --simulator=‘iPhone 12’ (separate iTerminal)

This will be running off port 8081 (default port)

Emulator 2 (Neds):

  • Start up a second emulator manually (emu menu -> file -> open simulator -> iOS 15 -> iPhone 13)
  • yarn neds -- --port 8082
  • yarn ios:neds -- --simulator=‘iPhone 13’ (separate iTerminal)
  • Shake the device (emu menu -> device -> shake)
  • Click: configure bundler
  • IP address should be your laptop’s VPN, IP port: 8082

This will be running off port 8082

Unit test are not triggered automatically on my MR (Merged Request)​

For an MR to automatically run the unit tests, which are a mandatory part of a successful pipeline, the MR has to be created with either/both of the Ready To Deploy and Needs Review labels. If an MR is missing those labels the unit tests must be manually run.

Sending Adjust install_referrer broadcast​

adb shell am broadcast -a com.android.vending.INSTALL_REFERRER -n com.nedsapp/com.adjust.sdk.AdjustReferrerReceiver --es "referrer" "utm_source=test_source\&utm_medium=test_medium\&utm_term=test_term\&utm_content=test_content\&utm_campaign=test_name"
adb shell am broadcast -a com.android.vending.INSTALL_REFERRER -n com.ladbrokesapp/com.adjust.sdk.AdjustReferrerReceiver --es "referrer" "utm_source=test_source\&utm_medium=test_medium\&utm_term=test_term\&utm_content=test_content\&utm_campaign=test_name"

Why can't I see network requests in the debugger?​

If you have connected the app to the React-Native Debugger (https://github.com/jhen0409/react-native-debugger), then you may need to enable the Network Inspect setting in order to view it.

  1. Right-click on the Redux inspector
  2. Click Enable Network Inspect from the context menu that appears

image

How do I permanently enable inspecting network requests?​

In order to avoid having to manually toggle Network Inspect every time you reopen React-Native Debugger, you can change the config setting to enable it by default.

  1. Click on Debugger dropdown at the top of the screen
  2. Click on Open Config File from the dropdown menu

image

  1. Confirm .rndebuggerrc file opens in a text editor
  2. Change defaultNetworkInspect config flag to true

image

  1. Save and then close the file
  2. Restart both the debugger and then the app

If the app is connected to the debugger, you should now see network requests coming in.