DEV Community: Pascal C

How to create React Native component library

Pascal C — Sun, 04 Feb 2024 15:18:38 +0000

Introduction

Sharing and reusing code across projects can significantly boost productivity and maintainability of software projects. One of the most efficient ways to share UI components and logic for React Native is by creating a component library. This article will guide you through the process of creating a React Native component library using create-react-native-library, a tool designed to streamline the creation and management of React Native libraries.

Why Create a React Native Library?

Before diving into the how, let's explore the why. Creating a React Native library allows you to:

Reuse code across multiple projects, reducing duplication and effort.
Share components within your team or with the wider community.
Encapsulate and abstract functionality, making your main project cleaner and more focused.

Setting Up the Environment

Ensure Node.js is installed on your machine and the React Native CLI environment was set up following the official React Native setup guide.

Step 1: Creating Your Library

create-react-native-library provides a straightforward command-line interface to scaffold a library. It containts several CLIs to streamline the process. To create a new library, open a terminal and run:

npx create-react-native-library@latest awesome-library

Replace react-native-awesome-component with the name of your library. The tool will generate a new directory with the given name, including a basic project structure. Make sure to select JavaScript library in the upcoming dialogue.

Next, go into the folder via cd react-native-awesome-component and run npm i. It could be that you have to run it with the --legacy-peer-deps option, if you get an error. There seems to be a dependency broken at the moment.

Step 2: Exploring the Generated Structure

Navigate into the library's directory. There are several important files and folders:

src/ - This is where the library's source code for React Native components will reside.
example/ - A generated React Native app to test the library during development.
package.json - Defines the library's dependencies and scripts.

Step 3: Developing a Component

With the library scafolded, it's time to start developing a component. Edit the files within the src/ directory to implement components. For simplicity, we will use the AppButton, created in another tutorial, to use directly in index.tsx file. This is just for the sake of this tutorial. In a real world library, every component should have it's own file and just be imported into the index.tsx:

import React from "react";
import {
  Pressable,
  StyleSheet,
  Text,
  type GestureResponderEvent,
  type ViewStyle,
  type TextStyle,
} from "react-native";

interface Props {
  disabled?: boolean;
  color?: string;
  buttonStyles?: ViewStyle;
  textStyles?: TextStyle;
  accessibilityLabel?: string;
  onPress: (event: GestureResponderEvent) => void;
}

const AppButton: React.FC<Props> = (props) => {
  return (
    <Pressable
      style={({ pressed }) => [
        {
          backgroundColor: props.disabled
            ? "#ccc"
            : pressed
            ? "#aa0000"
            : props.color || "red",
        },
        styles.container,
        props.buttonStyles,
      ]}
      disabled={props.disabled}
      onPress={props.onPress}
      accessible
      accessibilityLabel={props.accessibilityLabel || "A Button"}
    >
      <Text style={[styles.text, props.textStyles]}>
        {props.children || "Press Me"}
      </Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 8,
    alignItems: "center",
    borderRadius: 8,
  },
  text: { color: "white" },
});

export default AppButton;

Step 4: Testing the Component

Leverage the generated example app to test the component:

Navigate to the example/ directory via cd example.
Install dependencies with npm install or yarn.
Run the app on iOS or Android using npx react-native start.

Make sure to import and use the AppButton component in the example app to see it in action:

import * as React from "react";

import { StyleSheet, View, Text } from "react-native";
import AppButton from "react-native-awesome-library";

export default function App() {
  const [result, setResult] = React.useState<number>(0);

  return (
    <View style={styles.container}>
      <AppButton onPress={() => setResult((i) => ++i)}>Multiply</AppButton>
      <Text>Result: {result}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});

Step 5: Hosting the Library

There are several options to host the library:

npm (Node Package Manager)

Public Hosting: npm is the default package manager for Node.js and is the largest ecosystem of open source libraries. The library can be publish to npm to make it publicly available.
Private Hosting: npm also offers private packages as part of its paid plans. This is useful for companies or teams that want to share code internally without exposing it to the public.

GitHub Packages

GitHub Integration: GitHub Packages allows you to host your npm packages directly on GitHub, making it easy to share your packages with others, either publicly or privately within an organization. It integrates closely with GitHub's permissions and workflow, making it a convenient option for teams already using GitHub for source control.
Support for Multiple Registries: Besides npm, GitHub Packages also supports hosting for other package types, such as Docker containers, Maven packages, NuGet packages, and more.

Verdaccio

Private Proxy Registry: Verdaccio is a lightweight, open-source private npm proxy registry. It allows to set up a local npm registry with minimal setup, perfect for teams needing a private registry without the cost of npm's private packages.
Caching and Local Publishing: Verdaccio caches downloaded public packages and allows to publish private packages.

Bit

Component Collaboration: Bit is a tool designed for sharing and collaborating on individual components across projects.
Versioning and Isolation: Bit handles component versioning, dependency isolation, and updates, making it easier to maintain and update components across multiple projects.

Step 6: Publishing the Library

After selecting where to host the library, it can be published.

Ensure that package.json is properly filled out with the library's information and version.
Depending where the library is hosted, the publishConfig has to be updated with the correct link, for example:

"publishConfig": {
    "registry": "https://registry.npmjs.org/"
  },

Run npm run prepare to build the components and create the exports.
Publish the library using npm publish.

Conclusion

Creating a React Native component library is a powerful way to streamline the development process and foster code reuse. Using create-react-native-library simplifies the process of library creation. By following the steps outlined in this guide, it is easy to develop a reusable component library that can enhance any React Native project.

Crafting a Custom Button Component in React Native

Pascal C — Sun, 28 Jan 2024 18:46:26 +0000

Introduction

React Native, a powerful framework for building native apps for iOS and Android using JavaScript, often requires developers to create custom UI components, like a custom button. This article will guide you through creating a custom button in React Native, focusing on different touchable components and explaining why Pressable might be a preferable choice.

Differences Between Touchable Components

In React Native, a button can be created using the built-in Button component or through TouchableOpacity, TouchableHighlight, and Pressable. While Button offers simplicity by providing basic styling, TouchableOpacity and TouchableHighlight provide more options for customization. However, Pressable, introduced in React Native 0.63, is more flexible and nowadays the recommended option to handle touch-based input.

TouchableOpacity

Feedback: Diminishes the opacity of the button on press.
Use Case: Suitable for most cases where a button or an area needs to be clickable.

TouchableHighlight

Feedback: Displays a "highlight" or a different background color on press.
Use Case: Useful when a visual feedback of a color change is needed.

Pressable

Feedback: Highly customizable, can define any kind of visual feedback.
Advantages:
- More extensive customization options for touch interactions.
- Includes features like onPressIn, onPressOut, and onLongPress.
- Handles hover and focus in addition to press states, making it more suitable for a variety of devices.
- Allows to define a HitRect area via the hitSlop prop to widen the area a press is registered without increasing the size of the button. Essentially, hitSlop specifies how far the touch area extends beyond the bounds of the visual element.
Use Case: Recommended for new React Native projects due to its versatility and comprehensive feature set.

Creating a Custom Button

We will now create a new customizable button component, called AppButton:

import { Pressable, StyleSheet, Text } from "react-native";

const AppButton = (props) => {
  return (
    <Pressable
      style={({ pressed }) => [
        {
          backgroundColor: props.disabled
            ? "#ccc"
            : pressed
            ? "#aa0000"
            : props.color || "red",
        },
        styles.container,
        props.buttonStyles,
      ]}
      disabled={props.disabled}
      onPress={props.onPress}
      accessible
      accessibilityLabel={props.accessibilityLabel || "A Button"}
    >
      <Text style={[styles.text, props.textStyles]}>
        {props.children || "Press Me"}
      </Text>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 8,
    alignItems: "center",
    borderRadius: 8,
  },
  text: { color: "white" },
});

export default AppButton;

The AppButton has one required prop, which is the onPress function. It's styles can be adjusted by passing textStyles or buttonStyles. For this component, style can be passed as a function instead of an object. We use this to create a press effect by changing the background color on the press of a finger
for a short time. If the button is disabled we deactivate that effect and set it to a shade of gray to indicate this to the user visually. Last but not least, accessible and accessibilityLabel are set so that people who use VoiceOver or TalkBack know what element they have selected. A screen reader will verbalize this string when the associated element is selected.

You can find an online version of the button here.

Advanced Options

Adding Icons: Icons can be added to the button by using libraries like react-native-vector-icons.
Animations: Animations like changing the background color can be added by using Animated or LayoutAnimation.

Conclusion

Creating a custom button in React Native is a straightforward process and can significantly enhance an app's user experience. By customizing styles and adding features like icons and animations, a button that perfectly fits an app's design can be created. The Pressable component, with its extensive customization options, provides a versatile, future-proof and comprehensive solution for touchable interactions.

Info.plist Basics für React-Native Entwickler

Pascal C — Sun, 21 Jan 2024 13:15:58 +0000

Einleitung

React Native ist ein auf JavaScript basierendes Hybrid-Framework zur Entwicklung von nativen Apps auf iOS und Android. Es macht es Web-Entwicklern einfach den Umstieg zur App-Entwicklung zu finden, da die meißten mit -JavaScript* oder sogar _React* vertraut sein dürften. Schwierig wird es allerdings, wenn es um die Benutzung von Build-tools, wie bsp. Gradle oder der Verwendung der nativen Konfigurationsdateien wie der AndroidManifest.xml oder der Info.plist geht. Letztere Datei, die in jedem iOS-Projekt zu finden ist, spielt eine entscheidende Rolle bei der Definition von App-Einstellungen und Berechtigungen. In diesem Artikel wird erläutert, was die Info.plist-Datei ist und wie man sie effektiv nutzen kann.

Was ist die Info.plist-Datei?

Die Info.plist (Information Property List) ist eine Konfigurationsdatei im XML-Format, die wichtige Informationen über eine iOS-App enthält. Sie definiert Eigenschaften wie den App-Namen, Versionsnummer, Berechtigungen und vieles mehr. Xcode liest diese Datei, um wichtige Informationen eine App zu erhalten.

Warum ist Info.plist für React Native-Entwickler wichtig?

Das Bearbeiten der Info.plist-Datei ist oft notwendig, um:

App-Berechtigungen festzulegen (z.B. Kamerazugriff, Standortdienste).
App-Metadaten wie Version, Anzeigename und unterstützte Geräteorientierungen zu definieren.
Externe Dienste zu integrieren, wie z.B. Push-Benachrichtigungen.

Anpassen der Info.plist

Zugriff auf die Datei

Die Info.plist-Datei befindet sich unter ios/[Projektname]/Info.plist.

Definition von App-Metadaten

Wichtige Keys für Metadaten sind bsp.:

CFBundleDisplayName (Anzeigename der App): Bestimmt den Namen der App, der auf dem Homescreen des Geräts angezeigt wird.
CFBundleShortVersionString (Versionsnummer): Die öffentliche Versionsnummer der App, die im App Store angezeigt wird, z.B. 1.6.9.
CFBundleVersion (Build-Versionsnummer): Interne Versionsnummer, die zur Unterscheidung von Builds innerhalb einer Version verwendet wird. Diese Zahl ist aufsteigend, z.B. 96.

Usage Descriptions

Usage Descriptions (Nutzungsbeschreibungen) in iOS sind erforderlich, um dem Benutzer den Zweck der Anforderung bestimmter Berechtigungen zu erklären:

NSCameraUsageDescription (Kamerazugriff):

<key>NSCameraUsageDescription</key>
<string>Diese App benötigt Zugriff auf Ihre Kamera, um Fotos aufzunehmen.</string>

NSMicrophoneUsageDescription (Mikrofonzugriff):

<key>NSMicrophoneUsageDescription</key>
<string>Diese App benötigt Zugriff auf Ihr Mikrofon, um Sprachaufnahmen zu ermöglichen.</string>

NSLocationWhenInUseUsageDescription und NSLocationAlwaysUsageDescription (Standortdienste):

<key>NSLocationWhenInUseUsageDescription</key>
<string>Diese App benötigt Ihren Standort, um standortbezogene Dienste anzubieten.</string>

NSPhotoLibraryUsageDescription (Fotobibliothekszugriff):

<key>NSPhotoLibraryUsageDescription</key>
<string>Diese App benötigt Zugriff auf Ihre Fotos, um Bilder hochzuladen.</string>

NSContactsUsageDescription (Kontaktezugriff):

<key>NSContactsUsageDescription</key>
<string>Diese App benötigt Zugriff auf Ihre Kontakte, um die Integration zu erleichtern.</string>

App Transport Security (ATS)

ATS (NSAppTransportSecurity) ist eine Sicherheitsfunktion in iOS, die standardmäßig sicherstellt, dass alle HTTP-Verbindungen, die von der App verwendet werden, HTTPS sind. Standardmässig sieht der Eintrag wie folgt aus:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

Unter NSExceptionDomains können Ausnahmen für spezifische Domains definiert werden, für die die ATS-Regeln nicht gelten sollen. Für die App-Entwicklung gibt es standardmässig einen Eintrag für localhost, damit mit der App kommuniziert werden kann.
NSExceptionAllowsInsecureHTTPLoads mit dem Wert true bedeutet, dass für Verbindungen zu localhost unsichere HTTP-Verbindungen erlaubt sind, anstatt HTTPS zu erzwingen. Ansonsten könnten lokal genutzte Dienste (z.B. ein Dev-server) auch nur mit https genutzt werden, was die Einrichtung eines SSL-Zertifikates erfordern würde.

Läuft eine App hinter einem VPN, kann es oft notwendig sein, den Server an dieser Stelle einzutragen und die Ausnahmen korrekt zu konfigurieren.

App-Icons, Launch-Screens und Orientierungen

CFBundleIcons (App-Icons): Bestimmt die Icons, die für die App verwendet werden. In der Regel werden die Icons als Asset-Katalog in Xcode konfiguriert und nicht direkt in der Info.plist-Datei.
UILaunchStoryboardName oder UILaunchImages (Launch-Screen): Definiert die Launch-Screen-Datei oder die Bilder, die beim Starten der App angezeigt werden. Auch hier ist die übliche Methode die Verwendung eines Storyboards oder eines Asset-Katalogs.
UISupportedInterfaceOrientations (Orientierungen):

Legt fest, welche Bildschirmorientierungen die App unterstützt.
Beispiel für Portrait und Landscape:

  <key>UISupportedInterfaceOrientations</key>
  <array>
      <string>UIInterfaceOrientationPortrait</string>
      <string>UIInterfaceOrientationLandscapeLeft</string>
      <string>UIInterfaceOrientationLandscapeRight</string>
  </array>

Schluß

Die Info.plist-Datei ist ein wichtiges Element in der iOS-Entwicklung. Ein tiefes Verständnis dieser Datei ermöglicht es Entwicklern, ihre Apps effektiv für iOS zu konfigurieren und anzupassen. Dies ist für eine erfolgreiche Einreichung im Apple App Store unerlässlich, denn eine Ablehnung der App kann schwerwiegende Folgen wie eine unzufriedene Userbase nach sich ziehen.

Gradle Essentials für React Native Entwickler

Pascal C — Sun, 14 Jan 2024 20:13:41 +0000

Einleitung

Gradle ist für die Entwicklung von React Native Apps auf Android ein unverzichtbares Tool. Dennoch ist es vor allem für React Native-Entwickler ein Buch mit sieben Siegeln, da ein Großteil einen Web-Background hat und somit eher mit JavaScript vertraut ist. In diesem Artikel werden die Essentials behandelt, mit denen man als React Native-Entwickler vertraut sein sollte, um effektiv mit Gradle zu arbeiten.

Grundlagen von Gradle

Gradle ist ein mächtiges Build-Automatisierungstool, das vor allem in der Entwicklung von Android-Anwendungen verwendet wird. Es nutzt eine Domain-Specific Language (DSL) basierend auf Groovy oder Kotlin, um die Build-Konfiguration zu definieren. In React Native wird Groovy verwendet und die wichtigsten Dateien für Entwickler sind die beiden build.gradle Dateien.

Syntax

Ein Gradle-Build besteht aus einem oder mehreren Projekten. Jedes Projekt repräsentiert eine Komponente des Gesamtbuilds (z.B. eine App, ein Library-Modul, ...). Die grundlegenden Aktionseinheiten in einem Gradle-Build sind Tasks. Ein Task repräsentiert eine atomare Build-Aktion (Kompilieren von Quellcode, das Erstellen von Paketen, ...). Über Plugins oder externe Repositories können zusätzliche Funktionen bereitgestellt werden.

Build Gradle Dateien in React Native Projekten

In React Native Projekten gibt es zwei unterschiedliche build.gradle Dateien. Eine im android Ordner (Projektebene), sowie Eine unter android/app (Modulebene).

Projektweite build.gradle Datei

Die Datei direkt im android Ordner dient der Konfiguration des gesamten Projekts. In der Theorie könnte es zusätzlich zu android/app/build.gradle noch weitere verschiedene Module mit jeweils eigenen build.gradle-Dateien geben. In einem frischen React Native Projekt hat sie in der Regel folgendes Format:

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext {
        kotlinVersion = "1.8.0"
        buildToolsVersion = "33.0.0"
        minSdkVersion = 24
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}

buildscript definiert die Umgebung in der das Script ausgeführt wird. Es legt fest, welche Plugins und Dependencies für die Ausführung des Gradle-Build-Scripts selbst benötigt werden.
ext ist zuständig dafür Versionsnummern für Dependencies zu definieren sowie die SDK-Zielversionen festzulegen.
repositories definiert Repositories, von denen Gradle die Plugins und Dependencies herunterladen soll, die für das Build-Script benötigt werden.
dependencies listet die Abhängigkeiten auf, die zum Bauen der App benötigt werden, z.B. das React Native Plugin oder das Kotlin Plugin.

Appweite build.gradle Datei

Die Datei im android/app Ordner ist spezifisch für das verwendete Modul:

Am Anfang der Datei werden die verwendeten Plugins definiert, z.B. apply plugin: 'kotlin-android', welches dafür sorgt dass in der App Kotlin verwendet werden kann.
Der Key android definiert Android-spezifische Einstellungen, wie z.B. die compileSdkVersion, welche auf die in der projektweiten build.gradle definierte Version via rootProject.ext.compileSdkVersion zugreift.
dependences definiert die in diesem Modul verwendeten Abhängigkeiten, wie z.B. das React Native Plugin via implementation("com.facebook.react:react-android").
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project) bezieht sich auf das Einbinden sowie Aufrufen einer Gradle Script - Datei.

Weitere Gradle Dateien

Neben den beiden build.gradle-Dateien, die sicherlich am wichtigsten sind, gibt es noch folgende Dateien:

settings.gradle

In dieser Datei werden alle Module/Subprojekte aufgelistet, die zum Gesamtprojekt gehören, sowie die Pfade zu den nativen Modulen definiert:

rootProject.name = 'ReactNativeDemo'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')

gradle.properties

Hier werden Konfigurationsoptionen und Eigenschaften festgelegt, die sowohl von Gradle als auch von React Native verwendet werden können:

# Project-wide Gradle settings.

# IDE (e.g. Android Studio) users:
# Gradle settings configured through the IDE *will override*
# any settings specified in this file.

# For more details on how to configure your build environment visit
# http://www.gradle.org/docs/current/userguide/build_environment.html

# Specifies the JVM arguments used for the daemon process.
# The setting is particularly useful for tweaking memory settings.
# Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m

# When configured, Gradle will run in incubating parallel mode.
# This option should only be used with decoupled projects. More details, visit
# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
# org.gradle.parallel=true

# AndroidX package structure to make it clearer which packages are bundled with the
# Android operating system, and which are packaged with your app's APK
# https://developer.android.com/topic/libraries/support-library/androidx-rn
android.useAndroidX=true
# Automatically convert third-party libraries to use AndroidX
android.enableJetifier=true

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.182.0

# Use this property to specify which architecture you want to build.
# You can also override it from the CLI using
# ./gradlew <task> -PreactNativeArchitectures=x86_64
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64

# Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
newArchEnabled=false

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=true

gradle-wrapper.properties

Diese Datei definiert die verwendete Gradle-Version und verwaltet weitere Optionen wie z.B. Downloadort:

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-8.0.1-all.zip
networkTimeout=10000
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

Schlusswort

Zusammenfassend lässt sich sagen, dass es für fortgeschrittene React Native-Entwickler unverzichtbar ist, ein zumindest grundlegendes Verständnis von Gradle aufzubauen, auch wenn es zunächst komplex erscheinen mag. Durch das Verständnis der verschiedenen Gradle-Dateien und ihrer spezifischen Rollen kann die Konfiguration des Projekts effektiver verwaltet und angepasst werden. Es ist eine Investition, die sich langfristig auszahlt, denn ein tiefgreifendes Verständnis von Gradle ermöglicht eine flexiblere und leistungsfähigere App-Entwicklung auf Android.

Ordnung im Code-Dschungel: TypeScript Generics erklärt

Pascal C — Sun, 07 Jan 2024 15:57:32 +0000

Einleitung

Typescript ist ein sehr beliebtes Werkzeug um Typsicherheit in JavaScript zu erlangen. Eines der leistungsstärksten Features in diesem System sind Generics, die eine Art von Variablen für Typen darstellen. In diesem Artikel schauen wir uns an, wie Generics in Typescript funktionieren, warum sie nützlich sind und wie sie eine Codebasis flexibler und wiederverwendbarer machen können.

Definition

Generics ermöglichen, wiederverwendbare Code-Komponenten zu schreiben, die mit verschiedenen Typen arbeiten können, ohne den spezifischen Typ im Code zu verlieren. Sie funktionieren ähnlich wie die Generics in anderen Sprachen (Java oder C#). In Typescript erlauben Generics es, Typen als Parameter zu übergeben, wenn man Klassen, Schnittstellen, Funktionen und Typen definiert.

Anwendungsfälle

Basics

Nehmen wir an, wir haben folgende Funktion:

function sortArray(
  array: number[],
  compareFn: (a: number, b: number) => number
): number[] {
  const arrayCopy = [...array];
  arrayCopy.sort(compareFn);
  return arrayCopy;
}

sortArray erwartet ein array vom Typ number sowie eine function die an sort zum sortieren übergeben wird. Jetzt ist diese Funktion nicht sonderlich hilfreich, da man nur Zahlen übergeben kann. Was wäre wenn man auch strings sortieren möchte? Die naive Vorgehensweise wäre Folgende:

function sortArray(
  array: number[] | string[],
  compareFn: (a: number | string, b: number | string) => number
): number[] | string[] {
  const arrayCopy = [...array];
  arrayCopy.sort(compareFn);
  return arrayCopy;
}

Das funktioniert, ist aber nicht sonderlich elegant und fängt schon jetzt an die Lesbarkeit zu erschweren. Was aber wenn wir noch einen dritten, vierten, ... Typ hinzufügen? Eine Möglichkeit wäre den Typ einfach auf any zu ändern, aber dann könnte man ihn auch einfach gleich weglassen, das ist mehr Workaround als Lösung. Hier kommen Generics ins Spiel:

function sortArray<T>(array: T[], compareFn: (a: T, b: T) => number): T[] {
  const arrayCopy = [...array];
  arrayCopy.sort(compareFn);
  return arrayCopy;
}

Was genau passiert hier?

sortArray<T>: Das T in den spitzen Klammern nach dem Funktionsnamen ist eine Konvention und steht für Type (Es spricht nichts dagegen expressivere Namen zu wählen und ist bei komplizierteren Typen auch angeraten).
Dieser Typ T ist ein Platzhalter der nun innerhalb der Funktion für die tatsächlichen Typen verwendet wird. T kann beim Aufruf der Funktion durch jeden Typ ersetzt werden.
So wird beispielsweise aus:

function sortArray<T>(array: T[], compareFn: (a: T, b: T) => number): T[] {

wenn man die Funktion beispielsweise mit einem Array von strings aufruft:

const strings = ["hans", "adam", "egon"];
const sortedStrings = sortArray(strings, (a, b) => a.localeCompare(b));

im Prinzip folgendes:

function sortArray<string>(array: string[], compareFn: (a: string, b: string) => number): string[] {

Und das ist schon die gesamte Magie dahinter. Man kann sortArray jetzt mit jedem Typ aufrufen, durch das Generic wird der Korrekte nun automatisch inferiert.

Weitere Anwendungsfälle

Man kann Generics nicht nur für Funktionen, sondern beispielsweise auch für Typen verwenden. Beliebt ist dies oft bei der Definition von Schnittstellen (API). Nehmen wir an wir haben folgenden type definiert:

type APIResponse = {
  data: {
    user: User;
  };
  error: null | Error;
  status: number;
};

Diese Definition müssten wir nun für jeden möglichen Antworttyp wiederholen. Generics vereinfachen dies. Wir können den Code einfach wie folgt abändern:

type APIResponse<Data> = {
  data: Data;
  error: null | Error;
  status: number;
};

und dann beispielsweise so nutzen:

const res: APIResponse<{ user: User }> = {
  data: {
    user: { id: 6, name: "Beatrice" },
  },
  error: null,
  status: 200,
};

Um dies noch weiter zu vereinfachen, bietet es sich an verschiedene Responsetypen zu definieren, was für dieses Beispiel aber unerheblich ist. Weitere Anwendungsfälle wären z.B. die Definition von Datenstrukturen oder bei der Verwendung von Higher Order Components. Die Möglichkeiten sind vielfältig und die Grenze mehr oder weniger die eigene Fantasie.

Schluss

Generics in TypeScript sind ein mächtiges Werkzeug, das Entwicklern die nötige Flexibilität bietet, um wiederverwendbare und typsichere Komponenten zu erstellen. Durch die Möglichkeit, Typen als Variablen zu behandeln, eröffnen sie ein neues Spektrum an Möglichkeiten, die weit über das hinausgehen, was in reinem JavaScript verfügbar ist. Sie tragen dazu bei, die Komplexität des Codes zu reduzieren, die Wiederverwendbarkeit zu erhöhen und Fehler zu minimieren, die durch inkonsistente Typisierung entstehen können.

Managing iOS Augmented Reality Views with Objective-C in React Native Apps

Pascal C — Sun, 31 Dec 2023 13:02:53 +0000

Introduction

Integrating 3D models into AR applications can significantly enhance the user experience by providing interactive and immersive elements. For iOS applications, using Apple's ARKit with the .usdz file format is often the preferred approach due to its native support and optimization for AR experiences. This introduction will guide you through the steps of integrating a 3D model into an iOS application using ARKit.

This is part four of a multi part article series about the integration of AR services via native modules into a React Native app. While React Native simplifies cross-platform app development, there are scenarios where leveraging native iOS capabilities becomes essential, especially when dealing with advanced features like augmented reality.

You can find the other parts here:

Part one: Setting up a native module via Kotlin.
Part Two: Integrating ARCore
Part Three: Setting up a native module via Objective-C

The full code for this part is here.

3D-Model integration

Unfortunately, using GLB files in iOS AR applications is a bit of a hustle, so it is easier for us the use another format for the iOS version, namely USDZ, instead of using the already obtained GLB file from the Android version in part 2 of this series.

Download a model

Basically, download any model you like from a site like this. I downloaded the pancakes model.

XCode

The next step is to add the downloaded model to XCode. Naturally, with all things Apple, this is far more annoying than it has any right to be:

Right-click on the project's root, select New Group and name it Resources.
Drag the .usdz file from Finder and drop it into the Resources group in Xcode's project navigator.
When you add the file, make sure the options are set correctly in the dialog that appears. Ensure the Copy items if needed is checked. Also, ensure that the file is added to the app's target by checking RN3DWorldExplorer, so it's included in the build.

Update info.plist

The last step is to add the following key to your info.plist file (located at ios/RN3dWorldExplorer):

<key>NSCameraUsageDescription</key>
<string>This app needs access to the camera to create 3D AR experiences.</string>

This is needed as we access the users camera for the 3D-Model, which Apple regards as privacy-sensitive data.

Coding

We will be doing several updates to our RCTARodule.m file in order to use ARKit. At first, add the following imports to the top of the file to leverage the AR capabilities on iOS:

#import <ModelIO/ModelIO.h>
#import <SceneKit/ModelIO.h>
#import <ARKit/ARKit.h>

Now we will be implementing a new interface. Copy this code between the imports and the @implementation RCTARModule:

@interface RCTARModule () <ARSCNViewDelegate>
@property (nonatomic, strong) ARSCNView *sceneView;
@property (nonatomic, strong) SCNNode *modelNode;
@end

In essence, this code is preparing the RCTARModule class to handle AR functionalities. It's setting up an AR SceneView (ARSCNView) to display AR content and a node (SCNNode) to load our 3D model in the AR scene. The module is also prepared to handle ARSCNView events by conforming to the ARSCNViewDelegate protocol.

We will update our showAR function in the now to be able to display the model. This will take several steps. Exchange the current code for this:

RCT_EXPORT_METHOD(showAR:(NSString *)filename)
{
  dispatch_async(dispatch_get_main_queue(), ^{
    RCTLogInfo(@"Loading model: %@", filename);
    [self initializeARView];
    [self loadAndDisplayModel:filename];
    [self presentARView];
  });
}

Now we are logging the passed in parameter filename before we are calling three functions to set up the AR view, load and display the model and present the view to the user in the end. Don't get shocked by the amount of errors popping up, they will go away as we are implementing the functions.

initializeARView

Use this code to implement the function:

- (void)initializeARView {
  self.sceneView = [[ARSCNView alloc] initWithFrame:UIScreen.mainScreen.bounds];
  self.sceneView.delegate = self;

  // Configure AR session
  ARWorldTrackingConfiguration *configuration = [ARWorldTrackingConfiguration new];
  configuration.planeDetection = ARPlaneDetectionHorizontal;
  [self.sceneView.session runWithConfiguration:configuration];
}

In general, the initializeARView method sets up the AR environment for the application. It initializes an ARSCNView to render the AR content, sets up the class as its delegate to handle AR-related events, configures the AR session to include horizontal plane detection, and finally starts the AR session with these configurations.

loadAndDisplayModel

Now implement the function with this code:

- (void)loadAndDisplayModel:(NSString *)filename {
  NSString *filePath = [[NSBundle mainBundle] pathForResource:filename ofType:@"usdz"];
  NSURL *fileURL = [NSURL fileURLWithPath:filePath];

  NSError *error = nil;
  SCNScene *scene = [SCNScene sceneWithURL:fileURL options:nil error:&error];

  // Correctly set the modelNode property
  self.modelNode = [scene.rootNode.childNodes firstObject];
  if (self.modelNode) {
    self.modelNode.scale = SCNVector3Make(0.1, 0.1, 0.1);
    self.modelNode.position = SCNVector3Make(0, -1, -3); // Adjust as needed
    [self.sceneView.scene.rootNode addChildNode:self.modelNode];
  }
}

This method is designed to load a 3D model from the application's main bundle and display it in the AR scene. First it constructs a file path for a 3D model file (usdz format) based on the provided filename. Then, it creates a URL (fileURL) pointing to this file. After that, it creates a SCNScene and adds the model node to the AR scene. Be aware that when you use your own model, you probably want to adjust the scale and position, as it could be too near / far from the camera.

presentARView

Finally, add these two functions to the file:

- (void)presentARView {
    UIViewController *viewController = [UIViewController new];
    [viewController.view addSubview:self.sceneView];

  // Create a close button
  UIButton *closeButton = [UIButton buttonWithType:UIButtonTypeSystem];
  [closeButton setTitle:@"X" forState:UIControlStateNormal];
  [closeButton addTarget:self action:@selector(closeARView) forControlEvents:UIControlEventTouchUpInside];

  CGFloat buttonSize = 44.0;
  CGFloat padding = 16.0;
  closeButton.frame = CGRectMake(viewController.view.bounds.size.width - buttonSize - padding,
     padding,
     buttonSize,
     buttonSize);
  closeButton.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin;
  closeButton.backgroundColor = [UIColor blueColor];
  closeButton.layer.cornerRadius = buttonSize / 2;
  closeButton.clipsToBounds = YES;

  [viewController.view addSubview:closeButton];

    // Assuming you have access to the root view controller or the current view controller
    UIViewController *rootViewController = RCTPresentedViewController();
    [rootViewController presentViewController:viewController animated:YES completion:nil];
}

- (void)closeARView {
    UIViewController *presentingController = self.sceneView.window.rootViewController;
    [presentingController dismissViewControllerAnimated:YES completion:nil];
}

The first half of the presentARView function just adds a close button to the view and assigns the helper function closeARView to it. The latter part of the method concludes by presenting the new view controller modally on top of the current view hierarchy. This is done by retrieving the current application's presented view controller (RCTPresentedViewController()) and calling presentViewController:animated:completion: on it.

Update App.tsx

Now we finally move to our React Native code. Update the Button s onPress method:

await ARModule.showAR(Platform.OS == "ios" ? "pancakes" : "AR-model.glb");

If you use a different model, exchange pancakes for the file name. Don't forget to import { Platform } from "react-native" at the top of the file. Start up the application and test the code.

Conclusion

Successfully integrating a 3D model into an iOS AR application involves several critical steps, from preparing the appropriate file format to coding the interaction with ARKit. While the process might seem daunting initially, especially due to platform-specific requirements like using .usdz files for iOS, the result is a compelling and immersive AR experience.

This concludes this series for now. Eventually there will be some articles about the integration of VR functionality like 360 videos for both platforms, but the setup process is way more complicated than anything explored in this series till now. For example on Android, it involves downloading the Cardboard SDK and surgically integrating it into the Android portion of the app via generating .proto files and .java files.

By now, you should have a basic understanding of the integration of AR services into React Native apps. Your next steps would the integration of advanced functionality like moving the models around or scaling them by using pinch gestures. The sky is the limit from here now on.

Seamlessly Integrating Native Modules in iOS for React Native AR Apps

Pascal C — Thu, 21 Dec 2023 21:11:56 +0000

Introduction

Welcome to the intricate world of iOS development in React Native! In this tutorial, we will be learning how to create native modules for iOS using Objective-C.

This is part three of a multi part article series about the integration of AR services via native modules into a React Native app. While React Native simplifies cross-platform app development, there are scenarios where leveraging native iOS capabilities becomes essential, especially when dealing with advanced features like augmented reality.

You can find the other parts here:

Part one: Setting up a native module via Kotlin.
Part Two: Integrating ARCore
Part Four: Integrating ARKit

The full code for this part is here.

Prerequisites

XCODE is the preferred way to write native modules on iOS. It is an IDE developed by Apple and has some - in theory - useful integrated appliances. In reality, like most of Apples stuff, it is a poorly cobbled together piece of software which will let you run your head through the wall in frustration many times you are forced to interact with it. Anyways, you need it, so if you haven't downloaded it yet, follow the setup for iOS.

Also make sure to have executed the following commands in the project folder:

npm i
npx pod-install

This will install the necessary dependencies and finish the iOS setup. XCode will build the project in the background now. This will take some time, so maybe grab a coffee ☕. You can follow the progress in the upper right corner.

Coding

Apple uses Objective-C or Swift for writing native apps. We will closely follow the docs and use Objective-C for our native module.

Writing the Bridge

The first step is to create our main custom native module header and implementation files. Create a new file called RCTARModule.h. For this:

Open Your React Native Project in Xcode:

Launch Xcode.
Open your React Native project. You should open the .xcworkspace file if you are using CocoaPods, or the .xcodeproj file if not.

Navigate to the Project Directory:

In the Xcode Navigator pane, select the project directory where you want to add your native module. This is typically within the main project directory.

Create a New File:

Right-click on the directory.
Choose New File... from the context menu.

Select the File Type:

In the dialog that appears, you'll be presented with several template options.
Select Header File.
Click Next.

Name the Header File:

In the 'Name' field, enter RCTARModule.h.
Make sure that the project is selected under Targets
Click Create.

Now add the following content to the file:

#import <React/RCTBridgeModule.h>
@interface RCTARModule : NSObject <RCTBridgeModule>
@end

The RCT prefix stands for React Native by the way and it is convention to prepend class names with a substring in Objective-C because of missing namespacing. Now we have to create the Objective-C file. It has the same name as the header file, only with another extension, RCTARModule.m. Like before, create a new file in the same folder, but this time select Objective-C as the type. Then paste the following contents to it:

#import "RCTARModule.h"

@implementation RCTARModule

RCT_EXPORT_MODULE();

@end

There is not much going on here. Basically we only import our previously created header file (which took care of bridging) and export the module. We have have the option to change the name we export the module by passing an argument to RCT_EXPORT_MODULE, but we don't do this and stick with the default name ARModule.

Add a function

Last thing to do is to add a function which will be exposed to JavaScript. Let's add the following code to the RCTARModule.m:

#import <React/RCTLog.h>

RCT_EXPORT_METHOD(showAR:(NSString *)location)
{
 RCTLogInfo(@"Pretending to load a file named %@", location);
}

RCT_EXPORT_METHOD declares a method that JavaScript can call. This method takes a single NSString argument named location. All it does for now is log the string you pass to the method. In the next installment, we will be loading the model here instead.

Now click the play button in the upper left side and the app should be installed to your phone / simulator. Or you run into all the fun Apple specific stuff like selecting a Deveolpment Team, assigning provisioning profiles or certificates, creating an apple id ... 🤮

Conclusion

As we wrap up this part of our journey into iOS native modules with React Native, we have laid a solid foundation for integrating more complex functionalities into our app. In our next installment, we will dive deeper, moving from merely logging a file location to actually loading and manipulating models in our AR environment.

Navigating the AR Landscape in React Native with Kotlin

Pascal C — Fri, 15 Dec 2023 16:26:31 +0000

Introduction

In the first part of this series, we laid the groundwork by setting up Kotlin within our React Native environment, a crucial step in bringing augmented reality (AR) to our applications. This segment is designed for developers who are ready to take the next step in their AR journey, willing to learn how to integrate ARCore into their hybrid apps.

This is part two of a multi part article series about the integration of AR services via native modules into a React Native app. You will learn how to integrate ARCore and how to display a 3D-model in this article.

Part one: Setting up a native module via Kotlin.
Part Three: Setting up a native module via Objective-C
Part Four: Integrating ARKit

The full code for this part is here.

What is ARCore

ARCore is Google's platform for building augmented reality (AR) experiences. It enables phones to understand and interact with the real world. Using three key capabilities – motion tracking, environmental understanding, and light estimation – ARCore makes it possible for apps to merge virtual content with the real world in a seamless and realistic way.

Add dependencies to the project

First we need to add the necessary dependencies to our project. Go into your android/app/build.gradle and add the following implementations to your dependencies section:

// AR
implementation 'com.google.ar:core:1.40.0'
implementation("io.github.sceneview:arsceneview:0.10.0")

It should look like this:

Then we have to bump our minSdkVersion to 24 in our android/build.gradle. Afterwards sync the project.

Download a model

Now we need a 3D model to display. Download one from here for example. Make sure to select the GLB version!

Add file to Android

To add a GLB model to your Android project in Android Studio, you should create an assets folder and place your GLB file there. Here's how to do it:

Create the assets Folder:

Right-click on the app folder in the Android Studio project view.
Go to New > Folder > Assets Folder.
Click Finish in the dialog that appears to create the folder.

Add Your GLB File:

Copy your GLB model file.
Paste it into the assets folder you just created.

Create an Activity XML file

Now we need to create the layout file where our model will be displayed:

Locate the res (Resources) Folder: In your project hierarchy in Android Studio, it is typically found under app > src > main.
Create the layout Folder:

Right-click on the res folder.
Choose New > Directory.
Name the directory layout.

Add Your XML File:

Right-click on the newly created layout folder.
Choose New > Layout resource file.
Name the file ar_activity.xml and click 'OK'.

Android Studio will open the file in Design mode, but we will need to change into Code mode. In order to do this, click on the Code button (should be in the upper right and looks like 5 vertical lines). Copy the following code into the file:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    >

    <io.github.sceneview.ar.ArSceneView
        android:id="@+id/sceneView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="25dp"
        tools:layout_editor_absoluteY="16dp" />

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/sceneView"
        app:layout_constraintTop_toTopOf="@+id/sceneView" />

    <Button
        android:id="@+id/closeButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="30dp"
        android:text="X"
        android:textColor="#fff"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="365dp" />
</androidx.constraintlayout.widget.ConstraintLayout>

If there is a warning / error about a missing package `androidx.constraintlayout.widget.ConstraintLayout´ right click on it, select Show Context Actions and select Add dependency. Android Studio will then add an import and sync the project.

The button at the end is so that we can close the screen, when we want to return to the non-ar part of our app. In order for this button to be displayed correctly, we need to

Update the ARModule file

Now we can reference the created layout file in our module. Open the file ARModule.kt and replace the showAR method with the following:
`

@ReactMethod
  fun showAR(fileName: String) {
      val assetPath = "file:///android_asset/$fileName"
      val intent = Intent(reactContext, ModelDisplayActivity::class.java)
        intent.putExtra("MODEL_PATH", assetPath)

        // If starting the activity from a non-activity context, set this flag
      intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)

      reactContext.startActivity(intent)
  }

We will pass the filename of our model to our native code, which will in turn load it from the assets folder and start a custom Activity to display the model. In simple terms, an activity represents a single screen with a user interface.

Create the Activity file

Right click on the com.rn3dworldexplorer folder and select New > Kotlin Class. Name the file ModelDisplayActivity.kt. Copy the following code into it:

package com.rn3dworldexplorer

import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.Button
import android.widget.ProgressBar
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.ar.core.Config
import io.github.sceneview.ar.ArSceneView
import io.github.sceneview.ar.node.ArModelNode
import io.github.sceneview.ar.node.PlacementMode
import io.github.sceneview.math.Position
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch

class ModelDisplayActivity : AppCompatActivity() {
    private lateinit var progressBar: ProgressBar
    private lateinit var closeButton: Button
    private lateinit var sceneView: ArSceneView
    private lateinit var modelNode: ArModelNode

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.ar_activity)

        // Initialize views
        closeButton = findViewById(R.id.closeButton)
        progressBar = findViewById(R.id.progressBar)
        sceneView = findViewById<ArSceneView>(R.id.sceneView).apply {
            this.lightEstimationMode = Config.LightEstimationMode.DISABLED
        }
        sceneView.onArSessionFailed = { exception: Exception ->
            Log.e("ARModule", "${exception.message}")
            // If AR is not available, we add the model directly to the scene for a 3D only usage
            sceneView.addChild(modelNode)
        }

        // Set close button listener
        closeButton.setOnClickListener {
            finish()
        }

        // Load model if path is provided
        intent.getStringExtra("MODEL_PATH")?.let { modelPath ->
            loadModel(modelPath)

        } ?: showMessage("Model path is null")
    }

    private fun loadModel(glbFileLocation: String) {
        Log.d("ARModule", "loadModel path: $glbFileLocation")
        progressBar.visibility = View.VISIBLE

        CoroutineScope(Dispatchers.Main).launch {
            try {
                modelNode = ArModelNode(sceneView.engine, PlacementMode.INSTANT).apply {
                    loadModelGlbAsync(
                        glbFileLocation = glbFileLocation,
                        scaleToUnits = 1f,
                        centerOrigin = Position(0.0f)
                    )
                    {
                        sceneView.planeRenderer.isVisible = true
                        val materialInstance = it.materialInstances[0]
                    }
                }
                sceneView.addChild(modelNode)
                modelNode.anchor()
                sceneView.planeRenderer.isVisible = false
            } catch (e: Exception) {
                showMessage("Error loading model: ${e.message}")
                Log.e("ARModule", "Error occurred: ${e.message}")
            } finally {
                progressBar.visibility = View.GONE
            }
        }
    }

    private fun showMessage(message: String) {
        Toast.makeText(this, message, Toast.LENGTH_LONG).show()
    }
}

Here is a brief overview of the file:

Properties

UI Elements: The class defines UI elements like a ProgressBar, a Button (closeButton), and an ArSceneView (for AR content display).
Model Node: modelNode of type ArModelNode is used to represent the 3D model in AR.

onCreate Method

UI Setup: In the onCreate method (called when the activity is starting), it sets up the user interface from a layout resource (R.layout.ar_activity).
Initializing Views: Finds and initializes views like the close button, progress bar, and AR scene view.
AR Session Failure Handling: Sets an error handling mechanism for the AR session. If AR is not available, it directly adds the model to the scene for non-AR 3D viewing.
Close Button Listener: Implements an action for the close button - when clicked, it finishes (closes) the activity.
Model Loading: Checks if a model path is provided via the intent; if so, it calls loadModel to load the model.

loadModel Method

Functionality: This method loads the 3D model (GLB format) for display in the AR scene.
Coroutine: Uses a coroutine for asynchronous execution to avoid blocking the UI thread.
Model Node Setup: Configures the modelNode with the model path, scale, and origin. Once the model is loaded, it is anchored to a position in the AR scene.
Visibility Settings: Manages the visibility of the plane renderer and progress bar based on the model loading status.
Error Handling: Catches exceptions, logs errors, and shows error messages if model loading fails.

showMessage Method

Functionality: A utility method to show a toast message on the screen. It's used to provide feedback to the user (like successful model loading or error messages).

Added the necessary permissions to the Androidmanifest.xml file

Replace the contents of your AndroidManifest.xml with this one:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" /> <!-- You may need these if doing any screen recording from within the app -->
    <uses-feature
        android:name="android.hardware.vr.headtracking"
        android:required="true"
        android:version="1" />

    <uses-permission android:name="android.permission.NFC" />
    <uses-permission android:name="android.permission.WAKE_LOCK" /> <!-- Other camera related features -->
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature
        android:name="android.hardware.camera.autofocus"
        android:required="false"
        tools:replace="required" />
    <uses-feature android:name="android.hardware.camera.ar" /> <!-- Specifying OpenGL version or requirements -->
    <uses-feature
        android:glEsVersion="0x00030000"
        android:required="false"
        tools:node="remove"
        tools:replace="required" /> <!-- Usage of accelerometer and gyroscope -->
    <uses-feature
        android:name="android.hardware.sensor.accelerometer"
        android:required="false"
        tools:replace="required" />
    <uses-feature
        android:name="android.hardware.sensor.gyroscope"
        android:required="false"
        tools:replace="required" />

    <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">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
        <activity android:name=".ModelDisplayActivity" />

        <meta-data
            android:name="com.google.ar.core"
            android:value="optional"
            tools:replace="android:value" />
    </application>
</manifest>

We request several device features needed for AR like the gyroscope as well as register our custom activity via this line: <activity android:name=".ModelDisplayActivity" />. Not all of them may be used in the end, so it is your responsibility to choose carefully. This list just aims to be as comprehensive as possible out of convenience.

Adjust our JavaScript React code

We are finally back in the cozy surroundings of your JavaScript code. All that is left is to adjust our ARModule.tsx and our App.tsx. For the ARModule file, adjust your showAR function to this showAR(path: string): Promise<void>; to reflect the new type signature. After that, in the App.tsx you can adjust the onPress function of the button to pass the name of your chosen model. For me it is like this:
onPress={async () => await ARModule.showAR("AR-model.glb")}.

Now just press the button and it should look similar to this:

Conclusion

As we conclude this second part of our series, we have navigated through the integration of ARCore in a React Native environment via Kotlin. It can be pretty overwhelming if you haven't delved too deep into native code integration, but hopefully, it was manageable. From here on out, you can expand on the basic functionality and create your own features.

Moving forward, we will be doing the setup for native modules using Objective C in iOS in the next entry.

Building AR Experiences with React Native: Bridging the Gap with Kotlin

Pascal C — Sun, 10 Dec 2023 18:56:04 +0000

Introduction

Recently I got assigned an interesting project which required having AR capabilities in a React Native app for cross platform purposes. The initial idea was integrating ViroReact, but this very quickly turned out to be a bad idea. Missing features for the 3D-Models (model animations, ...) and it's general incompatibility with the newest React Native Version (0.72) made it unsufficient for our use case. So the decision was made to implement the functionality via native modules. And so began my descent into dependency hell 💾🔥...

This is part one of a multi part article series about the integration of AR services via native modules into a React Native app. The first half of this series will be about the integration into an Android app, using ARCore and SceneView. In this part, you will learn how to set up Kotlin to write native modules.

Part Two: Integrating ARCore
Part Three: Setting up iOS with Objective-C
Part Four: Integrating ARKit

You can follow along or download the full code of part one here.

Coding

Prerequisites

I am using the React Native CLI for this project on a real device (simulators don't work well with AR APIs). Make sure to have finished the setup for new React Native apps on Android. Also download Android Studio. You will need it.

Setting up a new React Native project

Open up your favorite terminal on the OS of your choice (I am on Ubuntu 22.04.3 LTS) and use the following command to setup a new React Native project:

npx react-native init RN3DWorldExplorer

Then add the folder to the workspace of your favorite editor and change into the directory via cd RN3DWorldExplorer.

Kotlin

When writing native modules, you have the choice to use Kotlin or Java. We will be using Kotlin for this tutorial.

Kotlin is a modern but already mature programming language. It's concise, safe, interoperable with Java and other languages, and provides many ways to reuse code between multiple platforms for productive programming.

Unfortunately, it does not work out of the box (This may change in future React Native versions). We have to do the following steps to make it work with React Native:

Add kotlinVersion = "1.8.0" to the buildscript { ext section of your android/build.gradle nad classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion") to the dependencies section. It should look like this:
Add apply plugin: 'kotlin-android' to the top of your android/app/build.gradle
Add implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlinVersion" to the dependencies` section of the same file
Sync the project with Gradle via the elephant button in the upper right

Now try running the app via npm run start and type a for Android. The app should build and run now.

Bridging native modules to React Native

Creating a native module

Following the steps outlined from the docs, we will be creating our AR module.

For this, open up Android Studio, navigate via the project pane (upper left) to the app/java/com.rn3dworldexplorer folder, right click on it, select new -> Kotlin Class and name it ARModule.kt. Then add the following code to the file:
`

package com.rn3dworldexplorer

import android.content.Intent
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod

class ARModule(private val reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
    override fun getName(): String {
        return "ARModule"
    }

    @ReactMethod
    fun showAR(promise: Promise) {
       promise.resolve("Hello ARWorld")
    }
}

With the getName() function, we will be able to access our module in our React Native code.
The showAR() function takes a Promise as a parameter for now. The reason is that these methods can't return values directly to JavaScript due to the asynchronous nature of the bridge between native code and JavaScript. In part 2, we will integrate a custom activity to display a 3D-model instead.

Registering the native module

Now we need to register the module with React Native:

In order to do so, you need to add your native module to a ReactPackage and register the ReactPackage with React Native. During initialization, React Native will loop over all packages, and for each ReactPackage, register each native module within.

Create a new Kotlin file called ArPackage.kt and copy this code into it:

package com.rn3dworldexplorer

import android.view.View
import com.facebook.react.ReactPackage
import com.facebook.react.bridge.NativeModule
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.uimanager.ReactShadowNode
import com.facebook.react.uimanager.ViewManager

class GLBPackage : ReactPackage {
    override fun createViewManagers(
        reactContext: ReactApplicationContext
    ): MutableList<ViewManager<View, ReactShadowNode<*>>> = mutableListOf()


    override fun createNativeModules(
        reactContext: ReactApplicationContext
    ): MutableList<NativeModule> = listOf(GLBModule(reactContext)).toMutableList()
}

This file imports the created native AR - module and instantiates it via the createNativeModules function and returns it as a list of NativeModules to register.

Now we just must add the ARPackage.kt to ReactNativeHost's getPackages() method. Open up MainApplication.java and add this inside the method: packages.add(new ARPackage());

It should look like this:

This bridges our native module with the JavaScript part of our application. Sync the project one last time.

Add the native module to the app

It is best practice to create a file for every native module in your code. So in the root of your project, create a new folder modules and inside it a file named ARModule.tsx. Copy this code inside it:

import { NativeModules } from "react-native";
const { ARModule } = NativeModules;

interface ARModuleInterface {
  showAR(): Promise<string>;
}

export default ARModule as ARModuleInterface;

Doing it this way allows us to properly type our module and be able to import it anywhere simply via import ARModule from "./modules/ARModule";

Update App.tsx

Right now we have the boilerplate setup for new React Native projects in our App.tsx. Update the file with this code instead:

import React from "react";
import type { PropsWithChildren } from "react";
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  View,
  Button,
} from "react-native";
import ARModule from "./modules/ARModule";

type SectionProps = PropsWithChildren<{
  title: string,
  description: string,
}>;

const Section: React.FC<SectionProps> = ({ children, title, description }) => (
  <View style={styles.sectionContainer}>
    <Text style={[styles.sectionTitle]}>{title}</Text>
    <Text style={styles.sectionDescription}>{description}</Text>
    {children}
  </View>
);

const App: React.FC<{}> = () => (
  <SafeAreaView>
    <StatusBar barStyle="light-content" />
    <ScrollView contentInsetAdjustmentBehavior="automatic">
      <View>
        <Section title="AR" description="Render the native AR module">
          <Button
            title="Show AR"
            onPress={async () => {
              const res = await ARModule.showAR();
              console.log(res);
            }}
          />
        </Section>
      </View>
    </ScrollView>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  sectionContainer: { marginTop: 32, paddingHorizontal: 24 },
  sectionTitle: { fontSize: 24, fontWeight: "600" },
  sectionDescription: {
    marginTop: 8,
    marginBottom: 16,
    fontSize: 18,
    fontWeight: "400",
  },
});

export default App;

Run the app now, press the "Show AR" button and you should see a console.log "Hello ARWorld" in your terminal.

Conclusion

This concludes the first part of this series on integrating AR services into React Native. This part focused on setting up a Kotlin environment to write native modules, a crucial step in bridging the gap between the high-level React Native framework and the low-level efficiency of native Android development. Looking ahead, the established groundwork here will allow us to dive into the world of AR development in Android. The next part of this series will explore the integration of ARCore and SceneView.