In this tutorial we will create app or dmg file that is ready to be run on macOS systems which does not need to have JRE or JDK installed. We will use IntelliJ and maven, but it still can give an idea how to do it using gradle or Eclipse or other variations.

Prerequisites:

• IntelliJ
• Java 14 (JAVA_HOME)
• JavaFX 14 (PATH_TO_FX)

If you don't have above setup, please setup your system and environment variables accordingly then tune in here back again.

openjfx.io has already a very good "Getting Started" page:https://openjfx.io/openjfx-docs/

We will do the similar but instead of Java12 I will use Java14. You can still use v12 and it should work.

Create a new project and select Maven on the left menu (you may be tempted to click JavaFX but we want to use maven as the orchestrator). In order to add JavaFX library to this project we will use archetype. Use below values for the archetype:

After you add this, archetype will be selected in the list. Without changing this selection click next and GroupId and ArtifactId to you project. Values are up to you but mine was as below:

In the next window change the archetypeArtifactId to "javafx-archetype-fxml". We need this to use xml files for our windows/views. This is similar to layout xml files in Android. Click next and finish creating a new project from archetype.

This tutorial is only about how to turn this program into a standalone app. So I will not give any details about the code. It's just the bare template. However we will change the version for the javafx-maven-plugin in pom.xml file:

            <plugin>
                <groupId>org.openjfx</groupId>
                <artifactId>javafx-maven-plugin</artifactId>
                <version>0.0.4</version>
                <configuration>
                    <mainClass>biz.aliustaoglu.App</mainClass>
                </configuration>
            </plugin>

In Maven Projects pane (View > Tool Windows > Maven Projects) see options javafx:jlink and javafx:run

Now in the console type below commands:

mvn clean install
mvn javafx:run

Your basic GUI app from template will run.

Now we want to create a standalone app file. In order to do that first let's create the necessary files:

mvn javafx:jlink

This will create a sibling folder for src called target. And inside target/image we have all the files we need in order to run this app in any mac machine. Target macOS machine does not need to have JRE or JDK installed. This is one of Apple's requirements for you to publish apps to App Store. Apps should not require installation of a separate app or framework.

Go to target/image folder in your terminal and type below:

./bin/java -m YOUR_GROUPID/YOUR_MAIN_CLASS
# for me it was like below:
# ./bin/java -m biz.aliustaoglu/biz.aliustaoglu.App

And see that the app is running. Now how to turn this into a single file with .app extension? We will use a small tool:

Appify

Appify is a small bash script to turn this bundle into a single file. Copy this content and paste into a file called appify.

You will need to make this file executable using chmod +x appify. Preferably you also need to add its location to PATH environment variable.

Now create a new file called run.command (filename is not important but we will need to remember this file name for later) and also apply chmod +x run.command command on it and place it under target/image folder.

#!/bin/bash
cd -- "$(dirname -- "$BASH_SOURCE")"
cd bin
./java -m biz.aliustaoglu/biz.aliustaoglu.App
exit 0
 

Now run this command to create the app bundle:

appify run.command MyJavaFXApp

After this step you cannot change your app name so choose the name you like at this point. Or you can always repeat this step of course. If you double click this app it will not run. Yet.

Now copy all the files and folders next to this MyJavaFXApp.app file. Then right click on MyJavaFXApp.app and click Show Package Contents and paste all files into Contents/MacOS/ folder. Now you can double click app file and see that it still runs as expected.

How to Create dmg file from an app file

This is the easy part:

• Create a new folder and place MyJavaFXApp.app into it
• Open Disk Utility and click File > New Image > Image From Folder
• Select this folder you create in step-1
• Type the dmg file name and save it to disk.
• Now you have a dmg file with app file in it.
• Distribute it to you friends

Apple will have more requirements for you if you want to publish this app to App Store of course but this step was definitely the most important one.

React Native is pretty strong with Native Modules. You aren't really limited to using JavaScript. However, documentation for native modules is not that great. You need to dig some functionalities yourself. ViewGroupManager is one of them.

I will assume that you are familiar with Native Modules and have developed at least one native module using SimpleViewManager<View>

https://facebook.github.io/react-native/docs/native-components-android

View's are great placeholders but they cannot contain other views. Let's say you have this simplest Native View.

public class NativeView extends SimpleViewManager<View> {

    public static final String REACT_CLASS = "NativeView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    public View createViewInstance(ThemedReactContext context) {
        View v = new View(context);
        v.setBackgroundColor(Color.RED);
        return v;
    }

}

And call it using JS

const NativeView = requireNativeComponent('NativeView')
...

<NativeView style={{ height: 100, width: 100 }} />

You will see a square shape (100x100) view with red background. This is what we expect using the code. But if you change the JS code to below:

      <NativeView style={{height: 100, width: 100}}>
        <Text>I am a text view inside a native view</Text>
      </NativeView>

you will get an error:

android.view.View cannot be cast to android.view.ViewGroup

This is because we are trying to add a textview inside a view. NativeView object is a simple Android View object. It cannot hold another view. Only ViewGroup can hold other views. You need to use layouts if you want to have parent-child relationship with views. Layout classes like LinearLayout or RelativeLayout etc. are sub classes of ViewGroup.

So instead of SimpleViewManager<View> , we need to use ViewGroupManager<LinearLayout> or ViewGroupManager<ViewGroup> etc. Let's create a new class that extends LinearLayout:

public class NativeLinearLayout extends LinearLayout {
    public NativeLinearLayout(Context context) {
        super(context);
    }
}

and call it from our main class that used to extend SimpleViewManager:

public class NativeView extends ViewGroupManager<NativeLinearLayout> {

    public static final String REACT_CLASS = "NativeView";

    @Override
    public String getName() {
        return REACT_CLASS;
    }

    @Override
    public NativeLinearLayout createViewInstance(ThemedReactContext context) {
        NativeLinearLayout nativeLinearLayout = new NativeLinearLayout(context);
        return nativeLinearLayout;
    }

}

This will work and insert the Text object created from JS into the NativeLinearLayout object.

We can also create another TextView from inside the native layout and combine them together:

But now since you're handling views a bit low level, React Native or CSS is not going to help with styling or the layouts. You need to handle it yourself using the native commands like setLayoutParams etc.

iOS equivalent of View is UIView and they can hold subviews. So, in iOS you don't need another solution. The default configuration of Native UI Components documentation will just work.

Python is great and it's not only for data scientists. You can also build desktop and mobile apps for Android, iOS, macOS, Linux and Windows. But it's very easy to get stuck because of dependencies and mismatching versions.

There are some tools that help us to make apps using Python.

CONDA

Conda is a dependency manager and makes it extremely easy to work with different versions of Python and its dependencies too. To be honest, at first I didn't like using it and did not find it very useful when I  can manage everything using pip commands inside a docker container. Docker and Conda are of course completely 2 different things, but they both try to solve similar problems.

Docker is more general but still works quite good with Python dependency management especially when you're working with console or web applications. But, Conda is more specialised on managing Python and may be inevitable if you're working with graphical interfaces. So, with kivy library it's better to use Conda.

Usage is quite straightforward and does not have many commands to remember. So let's install Conda for our environment.

https://docs.anaconda.com/anaconda/install/

After installation, Conda will have a default environment called "base".

And now create a new environment for kivy and Python 3.5 using below command:

conda create --name kivy python=3.5
conda activate kivy
conda install kivy

If your terminal supports, you'll see the active environment.  (similar to your active git branch). See below how my default environment (base) changed to kivy.

Kivy

Kivy technically is just another python library. But it's not an ordinary one. It's a framework for creating user interfaces that works on multiple platforms including Android, iOS, Windows, Linux and macOS. You can think it as an alternative to React Native, Flutter, Corona SDK etc. But Kivy is for Python lovers.

Installing Kivy with Conda is easy.

conda install kivy -c conda-forge

Let's create a very simple example from official documents. An accordion controller.

https://kivy.org/doc/stable/api-kivy.uix.accordion.html

Create a file called main.py and fill it with below content:

from kivy.uix.accordion import Accordion, AccordionItem
from kivy.uix.label import Label
from kivy.app import App

class AccordionApp(App):
    def build(self):
        root = Accordion()
        for x in range(5):
            item = AccordionItem(title='Title %d' % x)
            item.add_widget(Label(text='Very big content\n' * 10))
            root.add_widget(item)
        return root


if __name__ == '__main__':
    AccordionApp().run()

And run:

python main.py

That's it. Just a few lines and we have a good looking UI that will work in any environment.

Now let's compile an iOS app from source code. Of course you will need macOS and Xcode for this and other than that we need a tool called kivy-ios.

git clone https://github.com/kivy/kivy-ios.git 
cd kivy-ios
conda install --yes --file requirements.txt -c conda-forge
pip install pbxproj==2.5.1

# Build kivy-ios. This may take a while
python toolchain.py build python3 kivy

Note that toolchain.py file is inside this kivy-os folder. So, when you need to run it you may need to use either absolute or relative path unless you're already inside the folder. Also library pbxproj could not be found in any of the conda channels. So that's why I used pip. It's not good to mix pip and conda but if inevitable you can go for it. Last step when we build recipes may take a while.

Luckily we won't be building kivy-ios for every project. But we will use it to create the Xcode project what we'll be working on.

python toolchain.py create <title> <app_directory>

When you execute above command, make sure that app-folder is the one that contains the main.py file. I used it like below:

python /absolute/path/to/kivy-ios/toolchain.py create my-awesome-app /absolute/path/to/myproject 

In your project folder next to main.py, A directory named <title>-ios is created. eg. my-awesome-app-ios. Find the xcodeproj and open. Click the run button and see the application is running in iOS simulator.

If the run button throws an error, try cleaning the project and running it again. That's what happened to me. Whenever you make a change to python file just click the run button again and it the changes will be reflected. And since this is an Xcode project, app signing and steps needed to submit an app to App Store is no different than a native app.

Note: I'm not an iOS fan that ignores Android completely but using buildozer for Android is quite troublesome and I couldn't manage to make it run on macOS. I'll do a Part-2 on creating deliverables for Android and other operating systems ;)

It may sound like a forced companionship but it actually is a perfect harmony if you want to develop games with Phaser3 for mobile and any desktop environments. Of course you can still use Phaser without Ionic, React or TypeScript but there is too much to gain from the combination.

So what do we gain from each?

Components

TypeScript

TypeScript provides static type checking. But it also provides code completion in most modern text editors like Vscode, Atom etc. These editors are clever enough to provide code completion even without TypeScript. But this only happens inside the closure or class (depending on your context). Outside the closure, due to JavaScript's dynamic behaviour, editors will not know about the types. So, especially if you're starting to learn a framework (Phaser3 in our case) you do need code completion anywhere in your code. With code completion you will not even need to check documentation every time you type something. Take a look at below example:

import road from './road.png'

class MainScene extends Phaser.Scene {
    constructor(){
        this.myRoad = new Road(this)
    }
    
    preload(){
        // You can get code completion here without TypeScript
        this.load.image('road', road)
    }
}

class Road extends Phaser.GameObjects.Container {
    constructor(scene){
        // !!!You won't get any code completion here!!!
        scene.add.image(0, 0, 'road')
    }
}

Above example, without TypeScript you can still gain from code completion inside the MainScene class. Because, inside the class code editor already knows that "this" refers to "Phaser.Scene" and it will fetch the metadata from this class and will provide you code completion even if you don't use TypeScript. But inside the Road class constructor, editor will not know what the type of the "scene" is, so it won't provide you any code completion. Because it can be anything. Number, string, boolean or a json object. If we used TypeScript, we would be using the Container class as below

class Road extends Phaser.GameObjects.Container {
    
    constructor(scene: Phaser.Scene){
        // We get code completion
        scene.add.image(0, 0, 'road')
    }
}

I have to admit. For me I love TypeScript because of its code completion rather than static type checking. It's super useful when I'm using learning a new framework. I don't need to go to documentation as it's already provided to me whenever I type a "dot".

React

React may not be indispensable for a Phaser3 project. But it may make things easier if you want to use your existing React skills and you don't want to prepare complex GUI for your game. With React you can create place holders for your Phaser.Game to mount. You can create the "About" and "Settings" page inside the React app. Otherwise these pages will need to be a Phaser.Scene which will take a good amount of development time. Of course a game app looks more professional if the all scenes are created within the framework. But even if you later on choose this path, React will give no harm giving a host to your Phaser.Game object other than few more kilobytes to add on top of your bundle. But for me, having a Phaser3 game embedded inside a React gives nice flexibility to scale the app.

Webpack

A Phaser game is HTML5 but you cannot simply double click index.html file and expect it to work inside the browser. It will need resources such as images, sounds, videos and many different file types. Accessing these files from your file system requires OS level permissions and your browser will throw errors. So you need to run your app from a local server. Webpack will bundle your files and then serve them locally, handle dynamic reloading as you change your code while developing, map the exact code you type to the one that runs inside the browser so you can debug, minify the code and many more. You will not need webpack dev server to run your production ready code. It's only to get to production ready code. When you get that code it's still a static web page and you can host it using Amazon S3, Nginx or any other server. To run it with Android and iOS or on Windows, Linux or macOS; we will use the help of Ionic Capacitor.

Ionic Capacitor

Capacitor is a great new tool from Ionic team that can turn any web app into a cross platform app. It's similar to Cordova but Capacitor makes the process extremely easy and any web app could be turned to an apk, ipa, exe, dmg etc. Capacitor does not dictate you a structure as long as you have a valid package.json file and and output folder that has a starting point. It creates the native bridge for each environment. All you need to do is to focus on your development.

As opposed to React Native, Ionic Capacitor does not provide you sophisticated debugging tools other than "console.log" but you don't need extreme debugging in native environments. You can debug your app using the browser and expect it to work exactly the same in the native environments. But for rare cases you can use "console.log" and check native environment logs (eg. Logcat for Android) for problem solving.

Application

So now let's combine all components to create a boilerplate that we can use for our Phaser3 applications from now on.

Below repository will be the similar to what we create in this tutorial. However, I may be optimising this repo over time. So, the code may not match exactly but it'll be quite similar.

https://github.com/aliustaoglu/boilerplates/tree/master/phaser3-capacitor-react-typescript-starter

Let's init our node app:

mkdir phaser3-starter
cd phaser3-starter
npm init

Now let's add below libraries using yarn

yarn add -D webpack webpack-cli webpack-dev-server
yarn add -D typescript ts-loader source-map-loader
yarn add -D style-loader css-loader file-loader
yarn add -D @types/react-dom @types/react

Create a new folder /src and add an empty index.tsx file in it.

Create webpack.config.js in root folder and add below content:

module.exports = {
  mode: process.env.NODE_ENV === "production" ? "production" : "development",
  devtool: "inline-source-map",
  entry: "./src/index.tsx",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js",
  },
  devServer: {
    inline: true,
    contentBase: "./build",
    port: 3000,
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { test: /\.tsx?$/, exclude: /node_modules/, loader: "ts-loader" },
      { test: /\.js$/, use: ["source-map-loader"], enforce: "pre" },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
    ],
  },
  plugins: [],
};

Create a "tsconfig.json" file inside root folder and below content:

{
  "compilerOptions": {
    "outDir": "./www/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "resolveJsonModule": true,
    "skipLibCheck" : true,
    "esModuleInterop": true
  },
  "include" : [
      "./src/**/*"
  ],
  "exclude" : [
      "./test/**/*"
  ]
}

Change package.json file so it's like below:

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open",
    "devbuild": "webpack --mode development",
    "build": "webpack --mode production"
  }
}

Now if you run "npm start" your terminal should compile everything successfully and open a blank page in your browser. It will say "Cannot GET /" but that's because we have no content.

Let's create a new folder called "www" and index.html inside it with below content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="bundle.js"></script>
</html>

Now "npm start" should still have no errors in console and open an empty page with no errors. Now TypeScript and Webpack running smoothly let's add React.

yarn add react react-dom

Enter below content to "src/index.tsx"

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'

ReactDOM.render(<App />, document.getElementById('root'))

Create a new folder called "components" inside and add App.tsx file so it's location "src/components/App.tsx"

import React from 'react'

type AppProps = {}
type AppState = {}

class App extends React.Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props)
  }

  render() {
    return <>Hello from React</>
  }
}

export default App

npm start

And see React hello world app is running:

Now let's Phaser libraries:

yarn add phaser

Change render function of App.tsx file:

  render() {
    return <>
      <div id="game-root"></div>
      This is React
    </>
  }

Add a new folder /src/game and create file MainScene.ts. Note that this is a "ts" file not "tsx".

import Phaser from 'phaser'

class MainScene extends Phaser.Scene {
  constructor() {
    super('MainScene')
  }
}

export default MainScene

Now change the content of App.tsx file as below:

import React from 'react'
import Phaser from 'phaser'
import MainScene from '../game/MainScene'

type AppProps = {}
type AppState = {}

class App extends React.Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props)
    const game = new Phaser.Game({
      parent: 'game-root',
      type: Phaser.AUTO,
      width: 300,
      height: 500,
      scene: [MainScene]
    })
  }

  render() {
    return <>
      <div id="game-root"></div>
      This is React
    </>
  }
}

export default App

We create a new Phaser.Game instance with MainScene. The game is mounted inside the div with id="game-root".

Now let's add some geometric shapes inside this blank app. Just add a new function inside MainScene.ts file

create(){
    this.add.rectangle(100,100, 100, 100, 0xff0000)
  }

Now let's add the final step. Add Ionic Capacitor library so we can turn it into Android (or iOS) app.

https://capacitor.ionicframework.com/docs/getting-started/

yarn add -D @capacitor/cli @capacitor/core

Below command will create config file for capacitor. All it needs is a /www folder that has the bundle. Run npm run build before if you haven't done already.

npx cap init

Notice that it creates a file called "capacitor.config.json" inside root folder.

Let's create Android project from this web project

npx cap add android

And open Android Studio:

npx cap open android

Let the gradle build for sometime and run it using emulator or physical device:

You can do the same with iOS or Electron.

Of course we have a very quick and dirty setup and our app does not look like a game. It does not even look like an app. But this is your boilerplate. Change it, add spritesheets and make it look like a game. And let the Capacitor, Webpack, React and TypeScript do the dirty job for you.

In the first part, I have covered how to use native modules in Android for TomTom maps. Please take a look if you haven't already:

https://cuneyt.aliustaoglu.biz/en/using-tomtom-maps-in-react-native-with-android/

We want to use the same JavaScript file for both environments.

import React from 'react'
import { View, requireNativeComponent, StyleSheet, Platform } from 'react-native'

// IOS removes the suffix "Manager" from the native module if there is one
const moduleName = Platform.OS === 'ios' ? 'MapView' : 'MapViewManager'

const TomTomMap = requireNativeComponent(moduleName)

class App extends React.Component {
  constructor(props){
    super(props)
  }
  onMapReady = () => {
    alert('MAP READY')
  }

  render () {
    return (
      <>
        <TomTomMap
          onMapReady={this.onMapReady}
          markers={[{ lat: 40.9175, lng: 38.3927, label: 'Giresun' }, { lat: 40.9862, lng: 37.8797, label: 'Ordu' }]}
          mapZoom={7}
          mapCenter={{ lat: 40.9175, lng: 38.3927 }}
          style={StyleSheet.absoluteFillObject}
        />
      </>
    )
  }
}

export default App

Now let's start Xcode and add native modules to use TomTom map with React Native.

Add a "New Group with Folder" and type "NativeModules", so we will separate RN's boilerplate from our code.

Inside NativeModules create a new Objective C file and call it NativeBridge. Also create a new Swift file called "MapViewManager.swift". It will warn you to add a bridging header. Click "Create Bridging Header" and don't change the default name.

Add another swift file called TomTomMap. After creating all the files the folder structure should look like below:

Those files are all empty. Let's implement the same functionality that we've done in Android.

One important thing is that if an IOS native component ends with suffix 'Manager', React Native ignores it. For example our component is called MapViewManager but when we 'require' this component from JavaScript we need to require it as MapView not MapViewManager. But this does not apply to Android for some reason. So I had to  add below to JavaScript file.

const moduleName = Platform.OS === 'ios' ? 'MapView' : 'MapViewManager'
const TomTomMap = requireNativeComponent(moduleName)

We will implement this solution in Swift. But to export Swift classes and functions to JavaScript, we need to use Objective-C as the bridge. When Swift and Objective-C files exist together in a project, Xcode creates a file called Bridging-Header. That's why Xcode generated that file automatically after you added a Swift file to the project.

Before we start we need to add TomTom map library. Since version 60, React Native is using CocoaPods by default. Add below to your Podfile:

pod 'TomTomOnlineSDKMaps'

If you want to use all modules you can add the all using below. But for this tutorial we will only use the map not the APIs.

  pod 'TomTomOnlineSDKMaps'
  pod 'TomTomOnlineSDKSearch'
  pod 'TomTomOnlineSDKRouting'
  pod 'TomTomOnlineSDKTraffic'
  pod 'TomTomOnlineSDKMapsUIExtensions'
  pod 'TomTomOnlineSDKMapsStaticImage'
  pod 'TomTomOnlineSDKGeofencing'

Now edit info.plist file and add your API key. We only need to add OnlineMap.Key for this tutorial.

Now under ./ios folder run pod install to install the dependencies.

We've installed the IOS SDK. So now let's add below to NativeBridge.m file

#import <Foundation/Foundation.h>
#import "React/RCTViewManager.h"

@interface RCT_EXTERN_MODULE(MapViewManager, RCTViewManager)
  RCT_EXPORT_VIEW_PROPERTY(mapZoom, NSNumber)
  RCT_EXPORT_VIEW_PROPERTY(mapCenter, NSDictionary)
  RCT_EXPORT_VIEW_PROPERTY(markers, NSArray)
  RCT_EXPORT_VIEW_PROPERTY(onMapReady, RCTDirectEventBlock)
@end

It may look familiar. Those are the props that we send from JavaScript. ReadableMap in Java becomes NSDictionary and ReadableArray becomes NSArray in ObjectiveC and Swift. We don't implement anything in Objective C. It is just an interface. We will create the implementation in a better looking language called Swift :)

Edit MapViewManager.swift file as below

import Foundation
import TomTomOnlineSDKMaps

@objc(MapViewManager)
class MapViewManager: RCTViewManager {
  
  override func view() -> TTMapView {
    let ttMap = TomTomMap(frame: CGRect(x:0, y:0, width: 0, height: 0))
    return ttMap
  }
}

Here RCTViewManager is equivalent to the SimpleViewManager in Java. It is also just a wrapper and will pass all the logic into the real map component.

Edit TomTomMap.swift file as below:

import Foundation
import TomTomOnlineSDKMaps

class TomTomMap: TTMapView {
  
  @objc var mapZoom: NSNumber!
  @objc var mapCenter: NSDictionary = [:]
  @objc var onMapReady: RCTDirectEventBlock?
  @objc var markers: NSArray!
  
  override init(frame: CGRect) {
    super.init(frame: frame)
  }
  
  override func didSetProps(_ changedProps: [String]!) {
    let mapView = TTMapView(frame: self.bounds)
    let lat = self.mapCenter.object(forKey: "lat") as! Double
    let lng = self.mapCenter.object(forKey: "lng") as! Double
    
    let zoom = self.mapZoom as! Double
    
    for i in 0...self.markers.count-1 {
      let marker = self.markers[i] as! NSDictionary
      let mLat = marker.object(forKey: "lat") as! Double
      let mLng = marker.object(forKey: "lng") as! Double
      let lbl = marker.object(forKey: "label") as! String
      
      let anno = TTAnnotation(coordinate: CLLocationCoordinate2D( latitude: mLat,longitude: mLng))
      self.annotationManager.add(anno)
    }
    
    mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    self.center(on: CLLocationCoordinate2D( latitude: lat,longitude: lng), withZoom: zoom )
    
    self.onMapReady!([:])
  }
  
  required init(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
  
  
}

First 4 lines of the class are mapped to ObjectiveC file which links it to the JavaScript file as props. @objc decorator is needed when we want to use a Swift variable in ObjectiveC.

@objc var mapZoom: NSNumber!
@objc var mapCenter: NSDictionary = [:]
@objc var onMapReady: RCTDirectEventBlock?
@objc var markers: NSArray!

This decorator creates the setters automatically. So, whenever a prop gets changed, it triggers "didSetProps" function with changedProps parameter with the changed prop names list. This is the parameter you want to check when you want to optimize this function.

As we did in Java, we are setting the zoom, map center and 2 markers. And also triggers onMapReady callback in JavaScript. Now run the project in Xcode and start the simulator.

So, you can use this simple project as a starting point and extend it further if you don't want to use Google Maps in React Native.

There's no reliable React Native library for TomTom maps. The only way is to implement your own solution using the native SDK. Luckily, TomTom maps has good documentation and an easy to understand SDK. But still, those documents are prepared for those who are using the native environment. Activity, Fragment, Context etc. do not really mean anything to a React Native developer. So, I wanted to write a guide for those who are struggling to use native SDKs for React Native.

Let's start from scratch. First init a new application:

react-native init reactNativeTomTomMap
cd reactNativeTomTomMap

Now run Android Studio and open reactNativeTomTomMap/android folder. For most of the parts, we just need to follow official Android SDK documentation. But since we're developing a React Native app, not a "native" Native app, some parts will be different.

https://developer.tomtom.com/maps-android-sdk/map-initialization

Installation

On the left menu under Gradle Sripts, open build.gradle (Module:app) file and below line under dependencies:

dependencies{
    ....
    implementation("com.tomtom.online:sdk-maps:2.4207")
    ....
}

TomTom SDK does not exist in the default repository, so we need to tell Android Studio where to find the SDK. Now edit below file:

build.gradle (Project: reactNativeTomTomMap)

allprojects{
  ...
  repositories{
    ...
    maven {
         url 'https://maven.tomtom.com:8443/nexus/content/repositories/releases/'
      }
    ...
  }
}

If you try to sync gradle, you might get this error:

So, let's do the suggested solution and add tools:replace="android:allowBackup" to AndroidManifest.xml. But, make sure to add xmlns:tools="http://schemas.android.com/tools" to manifest element. File will look something like below:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
  package="com.reactnativetomtommap">
    
    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      tools:replace="android:allowBackup"
        >

Now, if you try to sync you might get below error:

Cannot fit requested classes in a single dex file (# methods: 85892 > 65536)

For that, we need to enable multiDex.

Look at https://developer.android.com/studio/build/multidex for more info. Add this to build.gradle(module: app).

android {
....
    defaultConfig {
        ....
        multiDexEnabled true
    }
....
}
....
dependencies {
    ....
    implementation 'com.android.support:multidex:1.0.3'
    ....
}

Now it should sync without any errors. But if you run the application, it may fail. multiDex can only be enabled with minSdkVersion is 21 or above. Make sure to make that change:

buildscript {
    ext {
        ....
        minSdkVersion = 21
        ....
    }
}

We need to add TomTom API key to AndroidManifest. Create a free account on tomtom.com and generate a new key and add it into AnroidManifest.

<meta-data
            android:name="OnlineMaps.Key"
            android:value="PASTE_API_KEY_HERE" />

Implementing a Static Native Map

Now let's setup a Native UI module:

Under app > java > com.reactnativetomtommap create a new package called NativeModules. And under NativeModules, create a file called MapViewManager.java

We will extend it further. But for now let's just implement it as below.

package com.reactnativetomtommap.NativeModules;

import android.view.View;
import android.widget.TextView;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;

import javax.annotation.Nonnull;

public class MapViewManager extends SimpleViewManager<View> {
    @Nonnull
    @Override
    public String getName() {
        return "MapViewManager";
    }

    @Nonnull
    @Override
    protected View createViewInstance(@Nonnull ThemedReactContext reactContext) {
        TextView tw = new TextView(reactContext);
        tw.setText("Map component will be here");
        return tw;
    }
}

under com.reactnativetomtommap package, create a new file called NativePackage that implements ReactPackage and registers MapViewManager as a module.

package com.reactnativetomtommap;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.reactnativetomtommap.NativeModules.MapViewManager;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class NativePackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new MapViewManager()
        );
    }
}

My left panel in Android Studio looks like this:

In MainApplication.java make below changes:

@Override
    protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      packages.add(new NativePackage()); // ADD THIS LINE
      return packages;
    }

In App.js, remove all content and replace it with below:

import React from 'react'
import { View, requireNativeComponent, StyleSheet } from 'react-native'

const TomTomMap = requireNativeComponent('MapViewManager')

const App = () => {
  return <>
  <TomTomMap style={StyleSheet.absoluteFillObject} />
  </>
}

export default App

You should be able to sync and run the application without any errors. You will see a simple text "Map component will be here". Now we are ready to replace that text with a real TomTom map :) Replace createViewInstance method as below and see your success:

@Nonnull
    @Override
    protected View createViewInstance(@Nonnull ThemedReactContext reactContext) {
        MapView mapView = new MapView(reactContext);
        return  mapView;
    }

It's very good so far but it's just a static map. Let's try to control this map from JavaScript as it's the whole point we're using React Native.

Implementing a Dynamic Native Map

Under NativeModules package, create a new class called TomTomMap and extend it from MapView of TomTom library. Instead of the ViewManager, we will use this class to interact with the map itself. ViewManager will be the place where we will manage the bridge between JavaScript and Java.

package com.reactnativetomtommap.NativeModules;

import android.content.Context;

import androidx.annotation.NonNull;

import com.tomtom.online.sdk.map.MapView;

public class TomTomMap extends MapView {
    public TomTomMap(@NonNull Context context) {
        super(context);
    }


}

And edit MapViewManager class as below:

    @Nonnull
    @Override
    protected View createViewInstance(@Nonnull ThemedReactContext reactContext) {
        TomTomMap tomTomMap = new TomTomMap(reactContext);
        tomTomMap.onResume();
        return tomTomMap;
    }

Map is still static but we just separated the View from ViewManager. Now is the time to add some @ReactProp. If you're not familiar with adding native UI modules, take a look at the documentation below and come back.

https://facebook.github.io/react-native/docs/native-components-android

Now I want to zoom, set the center of the map and add some markers from JavaScript:

onMapReady(){
  alert('Map is ready!')
}

<TomTomMap
  onMapReady={this.onMapReady}
  markers={[{ lat: 40.9175, lng: 38.3927, label: 'Giresun' }, { lat: 40.9862, lng: 37.8797, label: 'Ordu' }]}
  mapZoom={7}
  mapCenter={{ lat: 40.9175, lng: 38.3927 }}
  style={StyleSheet.absoluteFillObject}
/>

Let's prepare native side for those props:

Edit MapViewManager as below. ViewManager gets the props from JavaScript and passes it to our TomTomMap class extended from MapView. There are 2 types of props. First one is object props which could be a primitive JS object, any JSON object or an array. Second one is the callback props eg. onSomethingReady, onSomethingLoad, onSomethingClick etc. Examine the code below:

package com.reactnativetomtommap.NativeModules;

import android.view.View;


import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.common.MapBuilder;
import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.facebook.react.uimanager.annotations.ReactProp;


import java.util.Map;

import javax.annotation.Nonnull;
import javax.annotation.Nullable;

public class MapViewManager extends SimpleViewManager<View> {
    @Nonnull
    @Override
    public String getName() {
        return "MapViewManager";
    }

    @Nonnull
    @Override
    protected View createViewInstance(@Nonnull ThemedReactContext reactContext) {
        TomTomMap tomTomMap = new TomTomMap(reactContext);
        tomTomMap.onResume();
        return tomTomMap;
    }

    @ReactProp(name = "mapCenter")
    public void setCenter(TomTomMap mapView, @Nullable ReadableMap center) {
        mapView.setMapCenter(center);
    }

    @ReactProp(name = "markers")
    public void setMarkers(TomTomMap mapView, @Nullable ReadableArray markers) {
        mapView.setMarkers(markers);
    }

    @ReactProp(name = "mapZoom")
    public void setMapZoom(TomTomMap mapView, @Nullable Integer zoom) {
        mapView.setMapZoom(zoom);
    }


    @Nullable
    @Override
    public Map getExportedCustomBubblingEventTypeConstants() {
        return MapBuilder.builder()
                .put("onMapReady", MapBuilder.of("phasedRegistrationNames", MapBuilder.of("bubbled", "onMapReady")))
                .build();
    }


}

First set of props are gathered using @ReactProp. To read JavaScript's JSON object we need to use Java's ReadableMap and for. Same relationship is between Array and ReadableArray. You cannot set the callbacks using the ReactProp decorator. Every event should be registered as a bubbling event type.

Now edit the TomTomMap class as below and see how it manipulates the the real map object to add markers, zoom and set center.

package com.reactnativetomtommap.NativeModules;

import android.content.Context;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReadableArray;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.uimanager.events.RCTEventEmitter;
import com.tomtom.online.sdk.common.location.LatLng;
import com.tomtom.online.sdk.map.CameraPosition;
import com.tomtom.online.sdk.map.MapView;
import com.tomtom.online.sdk.map.MarkerBuilder;
import com.tomtom.online.sdk.map.OnMapReadyCallback;
import com.tomtom.online.sdk.map.SimpleMarkerBalloon;
import com.tomtom.online.sdk.map.TomtomMap;

public class TomTomMap extends MapView implements OnMapReadyCallback {

    private int _zoom;
    private ReadableArray _markers;
    private ReadableMap _center;
    private Boolean isMapReady = false;
    private TomtomMap _tomTomMap;


    public TomTomMap(@NonNull Context context) {
        super(context);
        this.addOnMapReadyCallback(this);
    }

    protected void setMapCenter(ReadableMap center) {
        _center = center;
        if (isMapReady){
            _tomTomMap.centerOn(_center.getDouble("lat"), center.getDouble("lng"));
        }
    }

    protected void setMarkers(ReadableArray markers) {
        _markers = markers;
        if (isMapReady){
            _tomTomMap.removeMarkers();
            drawMarkers();
        }
    }

    protected void setMapZoom(Integer zoom) {
        _zoom = zoom;
        if (isMapReady){
            _tomTomMap.zoomTo(_zoom);
        }
    }


    @Override
    public void onMapReady(@NonNull TomtomMap tomtomMap) {
        isMapReady = true;
        _tomTomMap = tomtomMap;
        reactNativeEvent("onMapReady", null);
        LatLng mapCenter = new LatLng(_center.getDouble("lat"), _center.getDouble("lng"));
        tomtomMap.centerOn(CameraPosition.builder(mapCenter).zoom(_zoom).build());
        drawMarkers();
    }

    private void drawMarkers(){
        for (int i = 0; i < _markers.size(); i++) {
            ReadableMap marker = _markers.getMap(i);
            SimpleMarkerBalloon balloon = new SimpleMarkerBalloon(marker.getString("label"));
            LatLng markerCenter = new LatLng(marker.getDouble("lat"), marker.getDouble("lng"));
            _tomTomMap.addMarker(new MarkerBuilder(markerCenter).markerBalloon(balloon));
        }
    }

    protected void reactNativeEvent(String eventName, WritableMap eventParams) {
        ReactContext reactContext = (ReactContext) this.getContext();
        reactContext
                .getJSModule(RCTEventEmitter.class)
                .receiveEvent(this.getId(), eventName, eventParams);
    }
}

Here, the most important part is the way we implement "onMapReady" delegate. It is an asynchronous process. So, be careful. Because the initial props will be set before the map is ready. Therefore, we used class variables and used them later on when the map became ready. But, onMapReady is called only when map is created or resumed (when app comes from background). But, props could be changed from JavaScript at anytime. For example; setMapZoom will be called at anytime to zoom prop changed in JavaScript. So, if the map is already available; we invoke the relevant functions to manipulate the map.

Now try to change the props in JavaScript side by adding some buttons on the screen. Add your hometown and neighbour city for instance :)

To implement the equivalent solution in IOS. Go ahead for Part 2:

https://cuneyt.aliustaoglu.biz/en/using-tomtom-maps-in-react-native-part-2-ios/

I generally use React Native to build mobile applications. But I also like how easy it is to setup multi platform apps using Cordova. With React Native you're limited to react native libraries, however with Cordova you can pretty much use any npm library. Anyway this tutorial is not about comparison. It's how to setup a minimal React & Webpack & Babel application in Cordova so you can build Android, IOS, Windows etc. applications.

The boilerplate that I am going to build now could be found here:

https://github.com/aliustaoglu/cordova-react-starter

Install cordova as global if you haven't already. Then create a new app and add Android as platform. Instead of com.cordova.react you can change it to the Android package name that you would like to create.

npm install -g cordova
cordova create cordova-react-starter com.cordova.react
cd cordova-react-starter
cordova platform add android

Now let's add some dependencies. Of course later on we can add redux and all other libraries that you use with React. But we will keep it minimal.

yarn add react react-dom
yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react
yarn add -D webpack webpack-cli

Add cordova webpack plugin:

cordova plugin add cordova-plugin-webpack

Add a new webpack configuration

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'www'),
    filename: 'index.bundle.js'
  },
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

And create .babelrc file

{ "presets": ["@babel/preset-env", "@babel/preset-react"] }

Run prepare and build commands

cordova prepare
cordova build -- --webpackConfig webpack.config.js

This will add index.bundle.js into your www folder. This is a generated bundle file so better if you add this to your gitignore file.

Now let's do some cleaning. Remove all bloat from css, index and css files:

First index.html file. Update it as below:

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
        <link rel="stylesheet" type="text/css" href="css/index.css">
        <title>Hello World</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="index.bundle.js"></script>
    </body>
</html>

Note that I've removed "js/index.js" file and instead, placed the bundle that webpack generates. But we need the content of js/index.js. So copy the content of this file and paste into "src/index.js" (the source for the webpack). But we still need to modify some stuff. So, update this file as below and notice how we mount the React App when the device is ready. After this App.js will manage the whole content.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App';

var app = {
  // Application Constructor
  initialize: function() {
      document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
  },

  // deviceready Event Handler
  //
  // Bind any cordova events here. Common events are:
  // 'pause', 'resume', etc.
  onDeviceReady: function() {
      ReactDOM.render(<App />, document.getElementById('app'))
  },
};

app.initialize();

Clear "www/css/index.css" file too. And here's the App.js content:

import React from 'react'

const App = () => {
  return <div style={{ display: 'flex', justifyContent: 'center' }}>Hello from React</div>
}

export default App

My directory structure is like this:

├── hooks
├── node_modules
├── platforms
│   └── android
├── plugins
│   ├── cordova-plugin-webpack
│   └── cordova-plugin-whitelist
├── src
│   ├── App.js
│   └── index.js
├── www
│   ├── index.bundle.js
│   └── index.html
├── .babelrc
├── config.xml
├── package.json
└── webpack.config.js

Now run below commands to deploy the app.

cordova build -- --webpackConfig webpack.config.js
cordova run android 

To enable livereload run below. So, when you make a change you don't need to create the bundle file and upload apk again.

cordova run -- --livereload

Minimal React application is mounted inside Cordova:

You wouldn't want to check-in your API keys to the source code. Instead, you would like to embed them into your application generated by build tools using an external file that is ignored by your source controller. For Android there's already a standard file that's used for this purpose called local.properties.

AndroidManifest.xml is an xml file obviously and we cannot write scripts there. Instead, we can write a small script in build.gradle file, read api key from local.properties and assign it to a variable. AndroidManifest can read this variable from gradle file.

Let's say we want to add Google Maps API Key:

AndroidManifest.xml

<meta-data android:name="com.google.android.geo.API_KEY" android:value="${googleMapApiKey}"/>

googleMapApiKey is the variable that I want to create in build.gradle. Add below lines right before android{} section in your build.gradle(Module: app)

build.gradle

Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())
def googleMapApiKey = properties.getProperty('google.map.key')

android {
}

This will look for "google.map.key" variable in local.properties file. So add your API key as below in local.properties file.

local.properties

## This file must *NOT* be checked into Version Control Systems,
# as it contains information specific to your local configuration.
#
# Location of the SDK. This is only used by Gradle.
# For customization when using a Version Control System, please read the
# header note.
google.map.key = AIzaS*******-**********-*******

Sync your project with Gradle files and it should be all fine now.

Using Environment Variables

But you need to keep in mind that local.properties will not be checked into your source code. So, if you're using CI/CD (eg. appcenter), it will fail. local.properties is only good when you're a sole developer, generating apk in your local environment and uploading it manually.

But if you're in a team and using CI/CD the best way would be to use environment variables. Your AndroidManifest.xml will be the same

AndroidManifest.xml

<meta-data android:name="com.google.android.geo.API_KEY" android:value="${googleMapApiKey}"/>

But gradle.build will be like below:

build.gradle

def googleMapApiKey = System.getenv("googleMapApiKey")

android {
}

Now we need to set the environment variables. Open up your bash_profile file and

nano ~/.bash_profile

And paste your credentials.

export googleMapApiKey=AIzxxxxx-xxxxx-xxxx

It is important that you need to add this into ~/.bash_profile even if you're using zsh or other terminals. In my machine gradle sync did not read zsh config.

For Windows instead of export, you need to use SET  command

set googleMapApiKey=AIzxxxxx-xxxxx-xxxx

React Native uses Objective-C by default for native libraries. This tutorial covers how to use Swift for UI libraries in IOS using Cocoapods.

I made this tutorial for a demo I've presented in a RN meetup group in Auckland. Also wanted to share here:

Using Native iOS Libraries in React Native

Thursday, Jun 13, 2019, 6:30 PM

Vista Entertainment Solutions
60 Khyber pass road Auckland, NZ

34 Reactors Went

Our guest speaker Cuneyt will show us how to implement a simple video player in iOS with native libraries and use it in a React Native app. In this meetup, you will learn how to build your own native library from cocoapods and plug it into a React Native app. This is a very useful technique to using out of the box native libraries without depending...

Check out this Meetup →

This application uses CocoaPods

Please refer to CocoaPods to make the installation:
https://guides.cocoapods.org/using/getting-started.html

After you've installed Cocoapods to your machine, we need to set it up for our project.

cd ios
pod init
pod install

You may get below error. This is a bug and it is actually declared twice. Just remove one of the instances from ios/Podfile. Then re-run pod install.

$ pod install
Analyzing dependencies
[!] The target `rnAKLMeetupDemo-tvOSTests` is declared multiple times.

We won't even be using tvOS, so I can remove that one too. My pod file will look like below:

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

target 'rnAKLMeetupDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  # use_frameworks!

  # Pods for rnAKLMeetupDemo

  # pod "PlayerKit" // I will add PlayerKit later ;)

end

After this I can run pod install again:

As shown in the picture above, we don't have any dependencies yet.

I want to implement Vimeo's PlayerKit component:

https://cocoapods.org/pods/PlayerKit

Let's add below to ios/Podfile under the line # Pods for rnAKLMeetupDemo

pod "PlayerKit"

and run pod install again

It should print below message this time

Pod installation complete! There is 1 dependency from the Podfile and 1 total pod installed.

Now if you open Xcode, under Pods you will see PlayerKit. Run the application to see the classic "Welcome to React Native" message, so we know that everything compiles.

Under rnAKLMeetupDemo:

1. Create NativeModules directory (we don't have to but I want to be a bit tidy)
2. Add a new Swift file called CustomPlayer
3. Xcode will ask you to create a bridging header. Say yes to it. You can change the name but default name is also OK. I used the default name
4. Bridging header will only be created once. Next time you want to add another Swift file you will not need and should not create another bridging header.

React Native does not work with Swift-only setup yet. So, we need to create Objective-C files just to export our Swift files. Don't worry, Objective C files will be minimal. You can think them as interfaces to the implementation we do in Swift.

Under the same folder (NativeModules), this time create an Objective-C file called

Now we have 3 files:

1. CustomPlayer.swift
2. rnAKLMeetupDemo-Bridging-Header.h
3. CustomPlayer.m

Let's first update bridging header with the below imports that is needed by Swift file

#import "React/RCTBridgeModule.h"
#import "React/RCTViewManager.h"

Then update CustomPlayer.swift to use PlayerKit

import Foundation
import UIKit
import PlayerKit
import AVFoundation

@objc(CustomPlayer)
class CustomPlayer: RCTViewManager {
  
  override func view() -> UIView! {
    let player = RegularPlayer()
    player.set(AVURLAsset(url: URL.init(string: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")!))
    return player.view
  }
  
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

We need to create a class that extends RCTViewManager. This way we tell React Native that we will manage UI from the native side. JavaScript will decide when and where to render this control.

We use @objc decorator for any class, method or property we want to export to JavaScript. But before going to JavaScript, it needs to go to Objective-C first.

Now open CustomPlayer.m to see how we export Swift class to JavaScript:

#import <Foundation/Foundation.h>
#import "React/RCTViewManager.h"

@interface RCT_EXTERN_MODULE(CustomPlayer, RCTViewManager)

@end

Here we just exported the module. You may have seen RCT_EXPORT_MODULE macro. That is when you use Objective-C modules only. If the module you're exporting from is a Swift class, you need to use RCT_EXPORT_MODULE instead.

So, that is it from the native side. Pretty tiny. But you can see that we only exported the module. We haven't exported or implemented any methods (pause, play, ff, rw etc.) But first I just want to see if this works:

Now go to App.js (of course in real life you may wanna use another file but for simplicity we use App.js)

import React, { Component } from 'react';
import { StyleSheet, Text, View, requireNativeComponent } from 'react-native';

const CustomPlayer = requireNativeComponent('CustomPlayer')

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Welcome to React Native!</Text>
        <CustomPlayer style={{ width: 300, height: 300 }} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});

With requireNativeComponent, we import the UIView class from the Swift thru Objective-C. Name of the component should be what you use in the brackets of the decorator objc(CustomPlayer).

We need to specify height and width to see the video player.

It works!

But video does not play because we did not implement anything about it. If you add player.play() before you return the view, you see it automatically plays the video.

    player.play()
    return player.view

But let's do this by using a prop so user can decide whether the video should autoplay or not. And also let's not hardcode filename.

<CustomPlayer 
  autoPlay={true} 
  filename="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
  style={{ width: 300, height: 300 }} />

Before doing that, let's separate our View logic from ViewManager.

Add a file named PlayerView.swift next to your ViewManager.

import Foundation
import UIKit

class PlayerView: UIView {
  
  
  override init(frame:CGRect) {
    super.init(frame: frame)
    self.addSubview(UIView())
  }
  
  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
    
}

and update CustomPlayer.swift file as below:

@objc(CustomPlayer)
class CustomPlayer: RCTViewManager {

  
  override func view() -> UIView! {
    return PlayerView(frame: CGRect(x:0, y:0, width: 300, height: 300))
  }
  
  override static func requiresMainQueueSetup() -> Bool {
    return true
  }
}

Now we have a view that does not do anything. Just ignore required init? bit and take it as it is now.

Let's change PlayerView as below

  import PlayerKit
  import AVFoundation
  ...
  override init(frame:CGRect) {
    super.init(frame: frame)
    player = RegularPlayer()
    player.set(AVURLAsset(url: URL.init(string: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")!))
    player.play()
    player.view.frame = frame
    self.addSubview(player.view)
  }

Now, PlayerView is ready to be called from JavaScript. So, let's update JavaScript as below:

import { requireNativeComponent } from 'react-native';

...

<CustomPlayer style={{ width: 300, height: 300 }} />

Now run the application again. Everything is hard coded. But works smoothly.

Now let's add autoPlay and filename props to the React element and manage it from the native side.

To export the prop we use RCT_EXPORT_VIEW_MODULE macro in the Objective-C.

#import <Foundation/Foundation.h>
#import "React/RCTViewManager.h"

@interface RCT_EXTERN_MODULE(CustomPlayer, RCTViewManager)
  RCT_EXPORT_VIEW_PROPERTY(autoPlay, BOOL)
  RCT_EXPORT_VIEW_PROPERTY(filename, NSString)
@end

Now where to add autoPlay and filename to Swift?

Update your PlayerView.swift file as below and pay attention to autoPlay and filename variables. We added @objc decorator to sign them as exportable to Objective-C and then JavaScript.

Also setters work asyncronously, so you cannot use these props in the init() function. When the props are set, didSetProps() function is called. It is called with changedProps parameters which include an array of prop names. This was also one of my reasons to separate UIView logic from RCTViewManager. I can easily override lifecycle functions and have tidier components.

import Foundation
import UIKit
import PlayerKit
import AVFoundation

class PlayerView: UIView {
  
  @objc var autoPlay: Bool = false
  @objc var filename: NSString = ""
  var player: RegularPlayer!
  
  override init(frame:CGRect) {
    super.init(frame: frame)
    player = RegularPlayer()
    player.view.frame = frame
    self.addSubview(player.view)
  }
  
  override func didSetProps(_ changedProps: [String]!) {
    player.set(AVURLAsset(url: URL.init(string: self.filename as String)!))
    if (self.autoPlay == true){
      player.play()
    }
  }
  
  required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
  
}

And our javascript file is not hard to guess:

<CustomPlayer 
  autoPlay={true}
  filename="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
  style={{ width: 300, height: 300 }} />

So, the parameters are no longer hard-coded in the native side.

autoPlay prop is very useful but not enough. I want to keep it but also want to control the video manually. I want to be able to do this by 2 ways.

1. By clicking on the video
2. By clicking on a  that was created in the JavaScript.

First one is easy. I will just override tochesBegan (or end) function of my view.

Update PlayerView.swift as below. And the code is self explanatory.

  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if (self.player.playing) {
      self.player.pause()
    } else {
      self.player.play()
    }
  }

For the second method, we need to send a command from JS to Native. Things will get a little bit complicated. We need to get the UIView's node handle number to send commands. To get the "node handle" we need to use "ref". And then using UIManager's command dispatcher. Let's add some new classes from react-native library.

I will implement the play/pause functionality again, but this time from JavaScript button. JS will send a command to Swift and UIViewManager of IOS will respond to my JS command.

import { ... UIManager, findNodeHandle, createRef } from 'react-native'
const playerRef = React.createRef();
...
render(){
  ...
    <CustomPlayer ref={playerRef} ... ></CustomPlayer>
    <Button
      title="Toggle play"
      onPress={() => {
        const nativeCommands = UIManager.getViewManagerConfig('CustomPlayer').Commands;
        const playerNodeHandle = findNodeHandle(playerRef.current);
        UIManager.dispatchViewManagerCommand(playerNodeHandle, nativeCommands.togglePlay, []);
      }}
    />
}

• First we created a ref and added as ref prop of CustomPlayer.
• Then get the node handle from the ref.
• Get native commands that are created with @objc in the view manager.
• Using dispatchViewManagerCommand I've triggered a command called togglePlay (which I haven't implemented yet)

Let's implement this command in Swift:

update CustomPlayer.swift as below:

....
class CustomPlayer: RCTViewManager {
  var playerView: PlayerView!
  
  override func view() -> UIView! {
    playerView = PlayerView(frame: CGRect(x:0, y:0, width: 300, height: 300))
    return playerView
  }
   
  ...  
  
  @objc public func togglePlay(_ node:NSNumber){
    playerView.togglePlay()
  }

  
}

ViewManager will call the same named function of the PlayerView class.
And update PlayerView as below:

...
  public func togglePlay(){
    if (self.player.playing) {
      self.player.pause()
    } else {
      self.player.play()
    }
  }
...

Also we need to update objective-c file as below so that the Swift method will be accessible from JS.

...
RCT_EXTERN_METHOD(togglePlay:(nonnull NSNumber *)node)
...

Works pretty good. But, Objective-C is very weird especially for JS developers. This example does not send any params to Swift. When I first tried Objective-C, it took me some time to figure out how to send multiple parameters using an Objc function. So let's do another example where we can change the filename that PlayerKit plays.

...
<TextInput
    style={{ width: 300, height: 40, backgroundColor: '#ddd' }}
    value={this.state.videoUrl}
    onChange={e => this.setState({ videoUrl: e.nativeEvent.text })}
  />
<Button
    title="Change video"
    onPress={() => {
      const playerNodeHandle = findNodeHandle(playerRef.current);
      UIManager.dispatchViewManagerCommand(playerNodeHandle, this.nativeCommands.changeVideo, [
        this.state.videoUrl,
        'dummy param'
      ]);
    }}
/>

...

This time we invoke a function called changeVideo and send 2 string parameters. One is a new url and the second one is just a dummy parameter just to show how to add more params. We won't use it. Just check togglePlay does not send any params (other than node handle) and changeVideo sends 2 params.

RCT_EXTERN_METHOD(togglePlay:(nonnull NSNumber *)node)
RCT_EXTERN_METHOD(changeVideo:(nonnull NSNumber *)node
                  url:(nonnull NSString *)url
                  extraParam:(nonnull NSString *)extraParam)

first parameter in the array that we dispatch will be assigned to url and second param will be assigned to extraParam. playerNodeHandle is assigned to node variable that we will not use. But, RN/Swift uses that in the background.

CustomPlayer.swift

...
  @objc public func changeVideo(_ node:NSNumber, url:NSString, extraParam:NSString){
    playerView.changeVideo(url: url, extraParam: extraParam)
  }
...

PlayerView.swift

  public func changeVideo(url:NSString, extraParam:NSString){
    player.set(AVURLAsset(url: URL.init(string: url as String)!))
    player.play()
  }

You can use the below gist that I've forked from somewhere else to test this new function with different URLs.

https://gist.github.com/aliustaoglu/68d5f9a59c83a9b3f116fa8438c6d14c

We need to cover one more thing. Sending a command from Swift to JS. We can do this by using a JS prop. Remember we used autoPlay={true}. What happens if we use prop like this: onVideoFinished={ e => doSomething() }. Then this function would be invoked from Swift and JS would do anything with the returned params.

For this better if we could use delegates. PlayerKit implements a delegate called PlayerDelegate. It does not have a function when video finishes but it does have one function as the time changes. So when player.time >= player.duration we can say the video is finished.

CustomPlayer.swift

class PlayerView: UIView, PlayerDelegate {
  func playerDidUpdateState(player: Player, previousState: PlayerState) {
    
  }
  
  func playerDidUpdatePlaying(player: Player) {
    
  }
  
  func playerDidUpdateTime(player: Player) {
    if (player.time>=player.duration) {
      self.onVideoFinished!(["message": "I am finished", "foo": "bar"])
    }
  }
  
  func playerDidUpdateBufferedTime(player: Player) {
    
  }

  ...
  @objc var onVideoFinished:RCTDirectEventBlock? = nil
  ...

  init(){
    ...
    player.delegate = self as PlayerDelegate
  }

CustomPlayer.m

...
RCT_EXPORT_VIEW_PROPERTY(onVideoFinished, RCTDirectEventBlock)
...

App.js

        <CustomPlayer
          ...
          onVideoFinished={e => {
            alert(e.nativeEvent.message);
            console.log(e.nativeEvent);
          }}
        />

Using UI Native Modules on Android

I have also made a tutorial about using UI native modules on Android. It's not for a video player though but it does not matter. It's for an application that uses Google Maps. I needed to use lots of markers, but it was extremely slow using the react-native-maps. So, I implemented a solution that uses Google Maps Android SDK. I needed to solve similar problems with Android in this tutorial.

https://cuneyt.aliustaoglu.biz/en/how-to-improve-google-maps-performance-in-react-native-for-android/

Very famous npm package called "react-native-maps" is easy to use and configure, but it can be remarkably slow when you're working with lots of markers. I noticed this when using an Android device in particular. This is mostly because of React's declarative way of rendering things.

In most npm packages for Google Maps, markers and all other map objects are declared as a React component. As you touch the map, hundreds of React components are being triggered. They may not being re-rendered or mounted, but render() and other lifecycle methods are being called and checked. This causes the extreme lag.

In my opinion, Google Maps API is not built to be used declarative. It should be used imperative be it JavaScript API or Android SDK. I had the same issues when I used a React wrapper instead of using Javascript API directly. If you need more performance, you should create the map, get reference and create all the objects using the direct methods and let Google API handle the rest.

Enough talk, let me try to explain how I solved my problems using native code. This tutorial may not be suitable for people who are just starting to use react and/or react-native.

• Create a new application:

react-native init reactNativeGoogleMapNativeAndroid
cd reactNativeGoogleMapNativeAndroid
yarn install

• Open reactNativeGoogleMapNativeAndroid/android folder using Android Studio
• Add below dependencies to build.gradle (Module:app) file. After adding below lines, gradle will start syncing.

dependencies {
        implementation 'com.google.maps.android:android-maps-utils:0.5+'
        implementation 'com.google.android.gms:play-services-maps:16.1.0'
        implementation 'com.google.android.gms:play-services-base:16.1.0'
    }

• Add your Google Maps API key into AndroidManifest.xml

<application>
    <meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/>
</application>

• Below is how my Android Studio will look like after I add java files:

• Add a new package called NativeModules and create a new Java class that extends SimpleViewManager<MapView>. Name it as `GMap`. This will be our React Component on JavaScript side.
• You will need to overwrite 2 methods(createViewInstance and getName)

package com.reactnativegooglemapnativeandroid.NativeModules;

import com.facebook.react.uimanager.SimpleViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import com.google.android.gms.maps.MapView;

import javax.annotation.Nonnull;

public class GMap extends SimpleViewManager<MapView> {

    @Nonnull
    @Override
    public String getName() {
        return "GMap";
    }

    @Nonnull
    @Override
    protected MapView createViewInstance(@Nonnull ThemedReactContext reactContext) {
        MapView view = new MapView(reactContext);
        view.onCreate(null);
        view.onResume();

        return view;
    }
}

• Now, we need to add this Module into a package that extends ReactPackage and add our GMap reference into ViewManager list in createViewManagers method. Below createNativeModules is empty because we did not add a headless native module. View manager is also a native module but it's a specialised one. Create a file called NativePackages and edit it as below. I normally use this module to include every NativeModule or ViewManager I create. So, I add it into root folder of my main package.

package com.reactnativegooglemapnativeandroid;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import com.reactnativegooglemapnativeandroid.NativeModules.GMap;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class NativePackages implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Arrays.<ViewManager>asList(
                new GMap()
        );
    }

    @Override
    public List<NativeModule> createNativeModules(
            ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        return modules;
    }

}

• Now we will add this module MainApplication.java. I only added new NativePackages() part. The rest was previously created by react-native init command.

package com.reactnativegooglemapnativeandroid;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new NativePackages()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

• Finally, some time for JavaScript. Call your native SimpleViewManager (MapView) from App.js. For simplicity let's remove all content that was created by react-native init, and add below. This will replace whole page with native Google Map.

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, requireNativeComponent} from 'react-native';
import Map from './app/Map'

const GMap = requireNativeComponent('GMap')

export default class App extends Component {
  render() {
    return (
      <GMap style={StyleSheet.absoluteFillObject} />
    );
  }
}

Start it with your favourite emulator and see it's loading a bare minimum native google map.

We are not done yet. Now let's see how we can add markers to this map. I will fetch a json file in JS side, and will send it to a native method to render. Let's find some sample data. I have found this perfect example (forked from GitHub user Miserlou). Top 1000 most populated cities in USA. We will see if the natively implemented google maps has a good performance.

https://gist.githubusercontent.com/aliustaoglu/4a8b2d0bef679023742bbb90c5248eab/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json

We can add this file into our repo or fetch async. For the sake of simplicity for now I have added it as a file called us_cities.json to my root folder.

Let's make the changes to our GMap class to handle adding markers which are fetched in JS side of react-native. MapView has a method called getMapAsync(). As the name suggests it's an asynchronous method that gets the map instance as a GoogleMap object. With this instance we can use everything that Android SDK has to offer.

Let's extend our java class to implement interface called OnMapReadyCallback:

public class GMap extends SimpleViewManager<MapView> implements OnMapReadyCallback {}

And change the createViewInstance method to get the map instance.

Then override the onMapReady method from the interface.

Also add class variables for GoogleMap, ClusterManager and ReactContext

    private GoogleMap googleMap;
    private ClusterManager mClusterManager;
    private ThemedReactContext context;

    protected MapView createViewInstance(@Nonnull ThemedReactContext reactContext) {
        context = reactContext;
        MapView view = new MapView(reactContext);
        view.onCreate(null);
        view.onResume();
        view.getMapAsync(this);

        return view;
    }

    @Override
    public void onMapReady(GoogleMap gmap) {
        googleMap = gmap;
        mClusterManager = new ClusterManager<MyClusterItem>(context, googleMap);
        sendEvent(context, "onMapReady", null);
    }
    
    private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
    }

When map object finishes loading, it invokes the onMapReady method. Here we are ready to create markers. But we also need to send a signal to JS side of our project. After this signal, JavaScript code can send the markers. We have created sendEvent method that can send any signal that could be listened by addListener method in JS.

Update App.js file so it looks like this:

import React, {Component} from 'react';
import {DeviceEventEmitter, StyleSheet, requireNativeComponent, UIManager, findNodeHandle} from 'react-native';
import cities from './us_cities.json'

const mapRef = React.createRef()
const GMap = requireNativeComponent('GMap')

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {}
    this.onMapReady = this.onMapReady.bind(this)
  }

  onMapReady(){
    cities.map((city, i) => {
      UIManager.dispatchViewManagerCommand(this.mapViewHandle, 0, [
        'marker' + 0,
        city.latitude,
        city.longitude,
        city.city,
        city.state,
        city.population
      ]);
    });
  }

  componentDidMount(){
    this.mapViewHandle = findNodeHandle(mapRef.current);
    DeviceEventEmitter.addListener('onMapReady', this.onMapReady);
  }

  render() {
    return (
      <GMap ref={mapRef} style={StyleSheet.absoluteFillObject} />
    );
  }
}

Above "onMapReady" listener is the event we dispatched from Java when the map object was created. This listener needs to be added on DeviceEventEmitter, not on window object. Now the JavaScript knows that the map is ready, we can create markers.

But, how to trigger a method in Java from JavaScript. Normally when we use a NativeModule we can easily invoke methods that are created with @ReactMethod using NativeModules object of react-native. But MapView is not a NativeModule, it's a ViewManager. receiveCommand should be used.

Implement receiveCommand of ViewManager (in GMap.java)

    // Receives commands from JavaScript using UIManager.dispatchViewManagerCommand
    @Override
    public void receiveCommand(MapView view, int commandId, @Nullable ReadableArray args) {
        super.receiveCommand(view, commandId, args);
        switch (commandId) {
            case 0:
                addMarker(args); // we havent implemented this yet. Read on..
                break;
        }

    }

When we send a command to Java, we need to use a unique command id (eg. 0, 1, 2 etc.) Then depending on this id, we can decide what to do. If you have noticed, in JavaScript file we used UIManager's dispatchViewManager method with view handle, an integer and an array. This integer will be the commandId in receiveCommand method. Last parameter will be an array of our custom parameters that we want to send. I want to send marker parameters (eg. marker id, lat, lng, Info Window title and content etc.)

UIManager.dispatchViewManagerCommand(this.mapViewHandle, 0, [
        'marker' + 0,
        city.latitude,
        city.longitude,
        city.city,
        city.state,
        city.population
      ]);

MapView object (Gmap) in Java and the React component (also called GMap) are actually identical. So, to convert the React object into a form that Java method understands, we need to use findNodeHandle method. findNodeHandle accepts object ref. So create a ref for it using React.createRef().

Finally, let's add addMarker method in Java side

    public void addMarker(@Nullable final ReadableArray args) {
        MyClusterItem ci = new MyClusterItem(
                args.getString(0),
                new LatLng(args.getDouble(1),
                        args.getDouble(2)),
                args.getString(3),
                args.getString(4),
                args.getString(5)
                );
        mClusterManager.addItem(ci);
        mClusterManager.cluster();
    }

We will be adding lots of markers. So, I always prefer using clusters for this. Let's create a custom cluster item. Create a new file called MyClusterItem.java and edit it as below:

package com.reactnativegooglemapnativeandroid.NativeModules;


import com.google.android.gms.maps.model.LatLng;
import com.google.maps.android.clustering.ClusterItem;

public class MyClusterItem implements ClusterItem {

    private LatLng position;
    private String title;
    private String snippet;
    private String population;
    public String tag;

    public MyClusterItem(String g, LatLng pos, String t, String s, String p){
        tag = g;
        position =pos;
        title = t;
        snippet = s + "\n" + p;
    }

    @Override
    public LatLng getPosition() {
        return position;
    }

    @Override
    public String getTitle() {
        return title;
    }

    @Override
    public String getSnippet() {
        return snippet;
    }

    public String getTag(){
        return tag;
    }
}

We are ready to run:

But, if you zoom in or click the clusters, you'll notice that clusters are not updated. This is not what we want. We want the cluster manager to respond the zoom and bounds change events dynamically. Ad below lines into onMapReady method

googleMap.setOnCameraIdleListener(mClusterManager);
googleMap.setOnMarkerClickListener(mClusterManager);
googleMap.setOnInfoWindowClickListener(mClusterManager);

Those will responde to camera & zoom changes and info window click event. If we want to zoom in when we click clusters, we need to implement setOnClusterClickListener of cluster manager. Add below lines into onMapReady method:

mClusterManager.setOnClusterClickListener(new ClusterManager.OnClusterClickListener() {
            @Override
            public boolean onClusterClick(Cluster cluster) {
                LatLng clusterPos = new LatLng(cluster.getPosition().latitude, cluster.getPosition().longitude);
                float newZoom = googleMap.getCameraPosition().zoom + 2;
                if (newZoom > googleMap.getMaxZoomLevel())
                    newZoom = googleMap.getMaxZoomLevel();
                googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(clusterPos, newZoom));
                return true;
            }
        });

Now we have a native, ultra fast Google Maps running in a React Native app.

You can find the complete code for this tutorial below. Clone it, edit AndroidManifest.xml file then you can run it:

https://github.com/aliustaoglu/react-native-google-map-native-android

If you use react-native-maps in React Native, by default you'll be using Apple Maps for IOS and Google Maps for Android. If you want to use Google Maps for IOS, you'll need to make some changes. Like most things in XCode, this is can get a bit tricky.

This tutorial assumes that you're already using Apple Maps in your IOS part of React Native project. You want to use provider as google.

<MapView
          mapType="satellite"
          provider="google"
          style={StyleSheet.absoluteFillObject}
          ...
          />

When you make this change, your beautiful map will not render anymore and you'll get below screen:

console.error: "react-native-maps: AirGoogleMaps dir must be added to your XCode project to support GoogleMaps on iOS"

First of all add a line `pod 'GoogleMaps'` to your Podfile. Below is my whole podfile:

# File contents of "ios/Podfile"
platform :ios, '9.0'
 
target 'worldsurfforecast' do
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge',
    'DevSupport',
    # the following ones are the ones taken from "Libraries" in Xcode:
    'RCTAnimation',
    'RCTActionSheet',
    'RCTBlob',
    'RCTGeolocation',
    'RCTImage',
    'RCTLinkingIOS',
    'RCTNetwork',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket'
  ]
 
  pod 'GoogleMaps' #ADD THIS LINE TO YOUR CODE IF YOU WANT GOOGLEMAPS IN IOS

  # the following dependencies are dependencies of React native itself.
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
 
  # your other libraries will follow here!
end
 
# The following is needed to ensure the "archive" step works in XCode.
# It removes React from the Pods project, as it is already included in the main project.
post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"
      target.remove_from_project
    end
  end
end

To be sure that pods are installed correctly run below commands:

cd ios
rm -rf Pods/
pod install

Now how to add the folder to XCode?

Navigate to node_modules/react-native-maps/lib/ios and find the folder AirGoogleMaps. Move the folder under your <ProjectName>. Choose the option "Create Groups" when moving:

So you'll see "AirGoogleMaps" folder with the same colour as the rest of the folders.

Also we need to provide API key to the native code for IOS. Find file AppDelegate.m and make below changes:

Add line @import GoogleMaps; before @implementation AppDelegate

Add line [GMSServices provideAPIKey:@"YOUR_API_KEY"]; after NSURL *jsCodeLocation;

So, it will look like below:

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@import GoogleMaps;
@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;
  [GMSServices provideAPIKey:@"AIzaSyDbTO1Zu-zBBmX9hgk-uUpZz001i-V3Ffo"];
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"worldsurfforecast"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [UIColor blackColor];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

Finally add HAVE_GOOGLE_MAPS=1 to Preprocessor Macros both for debug and release. That is found under Build Settings > Preprocessor Macros. Make sure All selected not Basic.

If you miss this step you'll get below error:

After this we're ready to change Apple maps into Google maps just by changing provider="google". If you remove this tag it'll switch back to Apple Maps.

Debugging in React Native is not straightforward. But it's not hard to set up. Here's a complete guide on how to set up a React Native application and enable debugging.

Install react native cli globally.

npm install -g react-native-cli

Note that we install "react-native-cli" but use the command "react-native". Don't install react-native globally.

I will use Genymotion as the emulator. There are other alternatives or you can use your Android device directly but it's faster to use an emulator. Download and install it from here:

https://www.genymotion.com

You need to create a personal account and login. Genymotion is free for personal projects but you need to purchase a subscription for commercial projects. Then add a virtual device using the plus button. I've added Google Pixel 2 on Android 8.0. But it does not matter much. And start the instance.

If you don't want to hassle with GenyMotion, you can always use the free, official emulator from Android Studio.

Now create a new project using:

react-native init my-rn-project

Add below scripts to package.json

{
  "bundle-android": "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 && react-native run-android",
  "bundle-ios": "react-native bundle --dev false --entry-file index.js --bundle-output ios/main.jsbundle --platform ios",
  "postinstall": "rndebugger-open --port 8081"
}

If you run any of those scripts, it will fail. Because by default '/assets' folder under 'android/app/src/main' does not exist. Create this empty folder so when you run the script it will fail creating the file "index.android.bundle" under this folder.

Now run:

npm run bundle-android

If this fails, probably your ANDROID_HOME variable is not set. Find your Android SDK location and save it in environment variables. For me it was like below:

export ANDROID_HOME=/Users/cuneytaliustaoglu/Library/Android/sdk

If still fails with error code INSTALL_FAILED_VERIFICATION_FAILURE, run below that allows adb to install apps from unknown resources.

adb shell settings put global verifier_verify_adb_installs 0
adb shell settings put global package_verifier_enable 0

Now run below commands. But before running this make sure that GenyMotion is running a virtual Android image. Make sure npm install is run.

npm install
adb reverse tcp:8081 tcp:8081
react-native run-android
react-native start

Now we should be able to see "Welcome to React Native!" message.

But we are not finished. We need to be able to debug this application.

Install react-native-debugger standalone application from below:

https://github.com/jhen0409/react-native-debugger

For Mac ```brew update && brew cask install react-native-debugger``` will install it using Brew. Or you can install it using the binaries.

Also install the npm package for this and save it as dev dependencies. This is needed to open the standalone react-native debugger from the emulator when we click "Remote JS Debugging".

https://github.com/jhen0409/react-native-debugger/tree/master/npm-package

npm i --save-dev react-native-debugger-open

Now add another script to package.json

and run ```npm run postinstall```

Now on your Android Emulator shake or press menu button for dev menu and click "Debug JS Remotely". It will open React Native Debugger and you'll be able to put breakpoints. Below see the familiar debugger which comes with Redux Devtools.

Access to your non transpiled code (ES6 code) under RNDebuggerWorker.js and put breakpoints. You can also enable hot reloading from the same menu.

There's WineHQ to run Windows applications on Linux (and macOS). But, what about other way around? What if you want to run Linux applications on Windows (and Mac). Docker is the answer but it if you think that Docker only can run terminal applications then you're wrong.

Q: Why would you like to run GUI applications inside Docker?

A: Bad question. I don't know. This tutorial is not about the reason. It could be any reason.

Q: How can you run GUI applications inside a Docker container on Windows, Linux and Mac hosts?

A: Good question. I know the answer.

I am using a simple Docker image that I have created and uploaded into DockerHub. You can use it directly or make your own. It's as simple as this:

FROM ubuntu:14.04

RUN apt-get update
RUN apt-get -y install firefox

CMD ["firefox"]

For Windows

• Install  VcXsrv Windows X Server using the address below

https://sourceforge.net/projects/vcxsrv/

• Install & start XLaunch with usual Windows setup (a.k.a. next next) until you get to Extra Settings. Check all options as below and finish configuration. It's important to disable access control. Otherwise, the request from Docker will be rejected.

• Get your IP address using ipconfig command (My IP address was 192.168.1.68 yours might be different)
• Run Firefox GUI as below

docker run --rm -it -e DISPLAY=192.168.1.68:0.0 aliustaoglu/firefox

This will create a container and from this container Firefox will run. When you finish with it, the container will be removed (--rm)

Quite easy

For Mac

For macOS we need to install xQuartz. You can use brew:

brew cask install xQuartz

Or download the dmg file:

https://www.xquartz.org/

After installing xQuartz, run it and check the option "Allow connections from network clients". Keep xQuarts running.

Now find your local IP address using ifconfig or any other method you know. My address was 192.168.1.76. And run bellow command:

xhost + 192.168.1.76

Now we are ready to run the docker image:

docker run --rm -e DISPLAY=192.168.1.76:0 -v /tmp/.X11-unix:/tmp/.X11-unix aliustaoglu/firefox

For Linux

X11 (X Windows System) is the GUI environment in Unix operating systems. Since it's a native Linux platform we don't need to install xQuartz or XLaunch as Linux already has it. We only need to run this command:

docker run --rm -e DISPLAY -v /tmp/.X11-unix:/tmp/.X11-unix aliustaoglu/firefox

MIDI files are great if you play harmonica. They have all the notes you need whether you have chromatic or diatonic harmonica in whichever key. If you have the right software any MIDI file can become a tab source.

Luckily there's this awesome software called MuseScore and its absolutely free. It may look like it's for note readers not tab but you'll be very wrong if you think so.

https://musescore.org/

Download and install it if you haven't done so.

And let's find a popular and easy song to transcribe. "Hey Jude" from Beatles is one of the most popular songs on harmonica tabs websites. Just google and find one like below:

https://earlybeatles.com/heyjude.html

MuseScore can open MIDI files. Just open this and you'll see something like below:

But those are music notes not harmonica. For harmonica we need to download a plugin that converts notes into harp tabs. Navigate to below page and download harmonica_tablature.qml file. (Or you can download whole repository as a zip file and get the file we need)

https://github.com/lasconic/harmonica_tablature

Now go to Preferences and find where the Plugins folder is located:

Find this folder and place harmonica_tablature.qml inside it. Now from the menu go toPlugins > Plugin Manager , select harmonica_tablature and click OK.

Now you will notice that plugin installed if you click Plugins menu again:

MuseScore, by default, shows all tracks. We don't want to see guitar, piano etc. tracks. We want to get only the vocal track for this song.

Now click the Harmonica Tablature and see that it works. Feel free to add titles and export as pdf. Also if the songs key does not match your harmonica, you can transpose it into the whatever key you have be it diatonic or chromatic.

Now google your favourite song and find a MIDI file for it.

I am using Claudia.js (http://claudia.js) to deploy my Lambda functions to AWS and link them to my API Gateway or S3 bucket. Real easy solution. No extra YML or learning process. Just an npm package installed globally and hooked into your package.json scripts. But if you use your local machine to deploy Lambda, you might run into some problems with the artifacts not matching AWS environment. It may not be a problem if all your dependencies are pure JavaScript; but, if you have any dependencies that use low level C/C++ add ons (eg. https://github.com/lovell/sharp) you will face problems.

Below simple lambda function will not run (assuming your local machine is not compatible with Amazon) if you add sharp library to your dependencies and upload the zip (or deploy using Claudia)

npm install --save sharp

const sharp = require('sharp')

exports.handler = async event => {
    console.log('Hello')
};

You will get below error:

module initialization error: Error
at Object.hasVendoredLibvips (/var/task/node_modules/sharp/lib/libvips.js:61:13)
at Object.<anonymous> (/var/task/node_modules/sharp/lib/constructor.js:9:22)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/var/task/node_modules/sharp/lib/index.js:3:15)

It's also always good to compile/transpile the code with the same Node version as AWS Lambda has. Using EC2 or virtual machine would be the most perfect solution if it wasn't impractical (and it will cost too). We will use Docker. At the moment AWS is using Node 8.10. So, we will use an image that has this version. This image mimics the live AWS Lambda environment.

https://hub.docker.com/r/lambci/lambda/

Since Claudia.js will work inside the Docker, we will need to pass AWS credentials to Docker. In my local machine credentials are stored in  ~/.aws/credential , but in the image it's under /root/.aws/credential. So, when I will create a volume that will do this mapping. Also, I need to copy all my working documents (including package.json and all my code) into Docker. I can also create volume for this. I will map my working folder ($PWD) into /claudia folder inside the container.

Create a bash script (eg. claudia-deploy.sh) and update it's content like below:

docker run -v $PWD:/claudia -v $HOME/.aws:/root/.aws --rm lambci/lambda:build-nodejs8.10 /bin/bash -c "\
cd /claudia
rm -rf node_modules
npm install -g claudia
npm run claudia-deploy
"

And make this script runnable

chmod +x claudia-deploy.js

Add below scripts inside package.json

{
"scripts": {
    "claudia-deploy": "claudia create --no-optional-dependencies --name my-aws-function --handler index.handler",
    "claudia-update": "claudia update --no-optional-dependencies",
    "deploy": "./claudia-deploy.sh",
    "update": "./claudia-update.sh",
  }
}

You should not run npm run claudia-deploy or npm run claudia-update in our local machine. It needs to be run inside the container. We need to execute npm run claudia-deploy inside our local machine and it will run the claudia scripts inside the container.

npm run build

For update, we need another bash script (claudia-update.sh)

docker run -v $PWD:/claudia -v $HOME/.aws:/root/.aws --rm lambci/lambda:build-nodejs8.10 /bin/bash -c "\
cd /claudia
rm -rf node_modules
npm install -g claudia
npm run claudia-update
"

Then run

npm run update

Using this method we make sure that all the artifacts that we generate are fully compatible with AWS. Like I said before, if you're not using any dependencies or your dependencies are simple JS libraries you'll most likely be OK. But, if you use libraries like sharp (to reduce the size of the images uploaded into S3 bucket), you need a solution like this.