Skip to content

Commit f3483d4

Browse files
authored
Merge pull request #796 from superpoweredSDK/ivannador/react-native-example-update
Updated React Native example to 0.78, added Turbo native module
2 parents 840fcd1 + 302d6a6 commit f3483d4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+4339
-3220
lines changed

Examples_ReactNative/SuperpoweredPlayerWithEffects/.gitignore

+11-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ DerivedData
2020
*.hmap
2121
*.ipa
2222
*.xcuserstate
23-
ios/.xcode.env.local
23+
**/.xcode.env.local
2424

2525
# Android/IntelliJ
2626
#
@@ -33,6 +33,7 @@ local.properties
3333
.cxx/
3434
*.keystore
3535
!debug.keystore
36+
.kotlin/
3637

3738
# node.js
3839
#
@@ -56,11 +57,19 @@ yarn-error.log
5657
*.jsbundle
5758

5859
# Ruby / CocoaPods
59-
/ios/Pods/
60+
**/Pods/
6061
/vendor/bundle/
6162

6263
# Temporary files created by Metro to check the health of the file watcher
6364
.metro-health-check*
6465

6566
# testing
6667
/coverage
68+
69+
# Yarn
70+
.yarn/*
71+
!.yarn/patches
72+
!.yarn/plugins
73+
!.yarn/releases
74+
!.yarn/sdks
75+
!.yarn/versions

Examples_ReactNative/SuperpoweredPlayerWithEffects/App.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
import React, { useState, useEffect } from 'react';
2-
import { StyleSheet, Text, View, NativeModules, Button, Switch } from 'react-native';
2+
import { StyleSheet, Text, View, Button, Switch } from 'react-native';
3+
4+
import NativeSuperpoweredEngine from './specs/NativeSuperpoweredEngine';
35

46
const App = () => {
57

6-
const { SuperpoweredModule } = NativeModules;
78
const [isFlangerEnabled, setFlangerEnabled] = useState(true);
89

910
const initializeSuperpoweredModule = () => {
10-
SuperpoweredModule.initSuperpowered();
11+
NativeSuperpoweredEngine.initSuperpowered();
1112
};
1213

1314
const onPress = () => {
14-
SuperpoweredModule.togglePlayback();
15+
NativeSuperpoweredEngine.togglePlayback();
1516
};
1617

1718
const handleFlangerChange = () => {
1819
const newFlangerState = !isFlangerEnabled;
1920
setFlangerEnabled(newFlangerState);
20-
SuperpoweredModule.enableFlanger(newFlangerState);
21+
NativeSuperpoweredEngine.enableFlanger(newFlangerState);
2122
};
2223

2324
useEffect(() => {

Examples_ReactNative/SuperpoweredPlayerWithEffects/Gemfile

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,8 @@ source 'https://rubygems.org'
33
# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
44
ruby ">= 2.6.10"
55

6-
gem 'cocoapods', '~> 1.12'
6+
# Exclude problematic versions of cocoapods and activesupport that causes build failures.
7+
gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
8+
gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
9+
gem 'xcodeproj', '< 1.26.0'
10+
gem 'concurrent-ruby', '< 1.3.4'

Examples_ReactNative/SuperpoweredPlayerWithEffects/README.md

+16-10
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,31 @@
22

33
This Sample App demonstrates how to integrate Superpowered SDK with React Native.
44

5-
## How to run:
6-
* Android: `npm run android`
7-
* iOS: Before the first install please make sure to run `pod install` from the `ios` folder. After you can call: `npm run ios`.
8-
95
## Prerequisites
10-
Ensure that you have `node` and `npm` or `yarn` installed. See [React Native's Getting Started Guide](https://reactnative.dev/docs/environment-setup).
6+
Ensure that you have `node` and `npm` or `yarn` installed.
7+
8+
See [React Native's Getting Started Guide](https://reactnative.dev/docs/environment-setup).
9+
10+
To try out this example project:
11+
12+
* Run `npm install` or `yarn install`.
13+
14+
## How to run:
15+
* Android: `npm run android` or `yarn run android`
16+
* iOS: Before the first install please make sure to run `pod install` from the `ios` folder. After you can call: `npm run ios` or `npm run ios`.
1117

12-
## Create a Native Module
13-
In order to use the Superpowered SDK in a React Native application you need to set up a native module that you can import in your JavaScript code. You need to create a separate native module for all platforms that you support. See React Native's [Native Modules documentation](https://reactnative.dev/docs/native-modules-intro).
18+
## Create a Turbo Native Module
19+
In order to use the Superpowered SDK in a React Native application you need to set up a Turbo native module that you can import in your JavaScript code. You need to create a separate native module for all platforms that you support. See React Native's [Turbo Native Modules documentation](https://reactnative.dev/docs/next/turbo-native-modules-introduction).
1420

1521
### iOS Native Module
1622
Integrate the Superpowered SDK into the React Native generated iOS project by following the [iOS Integration Guide](https://docs.superpowered.com/getting-started/how-to-integrate/ios?lang=cpp).
1723

18-
You can put together your module in a [Swift file](ios/SuperpoweredModule.swift) and only expose the methods that you will need to call from JavaScript. To export the Swift methods you need to create an [Objective-C file](ios/SuperpoweredModule.m) that marks the methods external.
24+
You can put together your module in an [Objective-C file](ios/RCTNativeSuperpoweredEngine.mm) and only expose the methods that you will need to call from JavaScript. For further info check out [this guide](https://reactnative.dev/docs/next/turbo-native-modules-introduction?platforms=ios#4-write-your-native-platform-code).
1925

2026
### Android Native Module
2127
Integrate the Superpowered SDK into the React Native generated Android project by following the [Android Integration Guide](https://docs.superpowered.com/getting-started/how-to-integrate/android?lang=cpp).
2228

23-
You can put together your module in a [Java/Kotlin file](android/app/src/main/java/com/superpoweredplayerwitheffects/SuperpoweredModule.java) and only expose the methods that you will need to call from JavaScript. The methods you want to export are marked with `@ReactMethod.`
29+
You can put together your module in a [Java/Kotlin file](android/app/src/main/java/com/superpoweredplayerwitheffects/NativeSuperpoweredEngineModule.java) and only expose the methods that you will need to call from JavaScript. For further info check out [this guide](https://reactnative.dev/docs/next/turbo-native-modules-introduction?platforms=android#4-write-your-native-platform-code).
2430

2531
### Using the Native Module from JavaScript
26-
After the native module is set up you can import it and call it in your [JavaScript code](./App.tsx).
32+
After the Turbo native module is set up you can import it and call it in your [JavaScript code](./App.tsx).

Examples_ReactNative/SuperpoweredPlayerWithEffects/__tests__/App.test.tsx

+5-9
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,12 @@
22
* @format
33
*/
44

5-
import 'react-native';
65
import React from 'react';
6+
import ReactTestRenderer from 'react-test-renderer';
77
import App from '../App';
88

9-
// Note: import explicitly to use the types shiped with jest.
10-
import {it} from '@jest/globals';
11-
12-
// Note: test renderer must be required after react-native.
13-
import renderer from 'react-test-renderer';
14-
15-
it('renders correctly', () => {
16-
renderer.create(<App />);
9+
test('renders correctly', async () => {
10+
await ReactTestRenderer.act(() => {
11+
ReactTestRenderer.create(<App />);
12+
});
1713
});

Examples_ReactNative/SuperpoweredPlayerWithEffects/android/app/CMakeLists.txt

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
cmake_minimum_required(VERSION 3.10)
2-
project(SuperpoweredPlayerWithEffects)
1+
cmake_minimum_required(VERSION 3.22.1)
2+
project(appmodules)
3+
4+
include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)
35

46
set(CMAKE_VERBOSE_MAKEFILE on)
57
# Set C++ standard to C++17
@@ -15,7 +17,6 @@ set(CMAKE_C_FLAGS_RELEASE "${CMAKE_C_FLAGS} -Os")
1517
set(CMAKE_CXX_FLAGS_DEBUG "${CMAKE_CXX_FLAGS} -g -UNDEBUG -DDEBUG=1")
1618
set(CMAKE_CXX_FLAGS_RELEASE "${CMAKE_CXX_FLAGS} -Os")
1719

18-
1920
file(TO_CMAKE_PATH ${PATH_TO_SUPERPOWERED} PATH_TO_SUPERPOWERED)
2021
include_directories(${PATH_TO_SUPERPOWERED})
2122

@@ -27,10 +28,11 @@ add_library(SuperpoweredPlayerWithEffects SHARED
2728
)
2829

2930
# link the native library against the following libraries
30-
target_link_libraries (
31+
target_link_libraries(
3132
SuperpoweredPlayerWithEffects
3233
log
3334
android
3435
OpenSLES
3536
${PATH_TO_SUPERPOWERED}/libSuperpoweredAndroid${ANDROID_ABI}.a
3637
)
38+
target_link_libraries(appmodules SuperpoweredPlayerWithEffects)
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
// This C++ file is part of the default configuration used by apps and is placed
9+
// inside react-native to encapsulate it from user space (so you won't need to
10+
// touch C++/Cmake code at all on Android).
11+
//
12+
// If you wish to customize it (because you want to manually link a C++ library
13+
// or pass a custom compilation flag) you can:
14+
//
15+
// 1. Copy this CMake file inside the `android/app/src/main/jni` folder of your
16+
// project
17+
// 2. Copy the OnLoad.cpp (in this same folder) file inside the same folder as
18+
// above.
19+
// 3. Extend your `android/app/build.gradle` as follows
20+
//
21+
// android {
22+
// // Other config here...
23+
// externalNativeBuild {
24+
// cmake {
25+
// path "src/main/jni/CMakeLists.txt"
26+
// }
27+
// }
28+
// }
29+
30+
#include <DefaultComponentsRegistry.h>
31+
#include <DefaultTurboModuleManagerDelegate.h>
32+
#include <autolinking.h>
33+
#include <fbjni/fbjni.h>
34+
#include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
35+
#include <rncore.h>
36+
37+
#ifdef REACT_NATIVE_APP_CODEGEN_HEADER
38+
#include REACT_NATIVE_APP_CODEGEN_HEADER
39+
#endif
40+
#ifdef REACT_NATIVE_APP_COMPONENT_DESCRIPTORS_HEADER
41+
#include REACT_NATIVE_APP_COMPONENT_DESCRIPTORS_HEADER
42+
#endif
43+
44+
namespace facebook::react {
45+
46+
void registerComponents(
47+
std::shared_ptr<const ComponentDescriptorProviderRegistry> registry) {
48+
// Custom Fabric Components go here. You can register custom
49+
// components coming from your App or from 3rd party libraries here.
50+
//
51+
// providerRegistry->add(concreteComponentDescriptorProvider<
52+
// MyComponentDescriptor>());
53+
54+
// We link app local components if available
55+
#ifdef REACT_NATIVE_APP_COMPONENT_REGISTRATION
56+
REACT_NATIVE_APP_COMPONENT_REGISTRATION(registry);
57+
#endif
58+
59+
// And we fallback to the components autolinked
60+
autolinking_registerProviders(registry);
61+
}
62+
63+
std::shared_ptr<TurboModule> cxxModuleProvider(
64+
const std::string& name,
65+
const std::shared_ptr<CallInvoker>& jsInvoker) {
66+
// Here you can provide your CXX Turbo Modules coming from
67+
// either your application or from external libraries. The approach to follow
68+
// is similar to the following (for a module called `NativeCxxModuleExample`):
69+
//
70+
// if (name == NativeCxxModuleExample::kModuleName) {
71+
// return std::make_shared<NativeCxxModuleExample>(jsInvoker);
72+
// }
73+
74+
// And we fallback to the CXX module providers autolinked
75+
return autolinking_cxxModuleProvider(name, jsInvoker);
76+
77+
return nullptr;
78+
}
79+
80+
std::shared_ptr<TurboModule> javaModuleProvider(
81+
const std::string& name,
82+
const JavaTurboModule::InitParams& params) {
83+
// Here you can provide your own module provider for TurboModules coming from
84+
// either your application or from external libraries. The approach to follow
85+
// is similar to the following (for a library called `samplelibrary`):
86+
//
87+
// auto module = samplelibrary_ModuleProvider(name, params);
88+
// if (module != nullptr) {
89+
// return module;
90+
// }
91+
// return rncore_ModuleProvider(name, params);
92+
93+
// We link app local modules if available
94+
#ifdef REACT_NATIVE_APP_MODULE_PROVIDER
95+
auto module = REACT_NATIVE_APP_MODULE_PROVIDER(name, params);
96+
if (module != nullptr) {
97+
return module;
98+
}
99+
#endif
100+
101+
// We first try to look up core modules
102+
if (auto module = rncore_ModuleProvider(name, params)) {
103+
return module;
104+
}
105+
106+
// And we fallback to the module providers autolinked
107+
if (auto module = autolinking_ModuleProvider(name, params)) {
108+
return module;
109+
}
110+
111+
return nullptr;
112+
}
113+
114+
} // namespace facebook::react
115+
116+
JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM* vm, void*) {
117+
return facebook::jni::initialize(vm, [] {
118+
facebook::react::DefaultTurboModuleManagerDelegate::cxxModuleProvider =
119+
&facebook::react::cxxModuleProvider;
120+
facebook::react::DefaultTurboModuleManagerDelegate::javaModuleProvider =
121+
&facebook::react::javaModuleProvider;
122+
facebook::react::DefaultComponentsRegistry::
123+
registerComponentDescriptorsFromEntryPoint =
124+
&facebook::react::registerComponents;
125+
});
126+
}

Examples_ReactNative/SuperpoweredPlayerWithEffects/android/app/build.gradle

+16-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
apply plugin: "com.android.application"
2+
apply plugin: "org.jetbrains.kotlin.android"
23
apply plugin: "com.facebook.react"
34

45
/**
@@ -7,14 +8,14 @@ apply plugin: "com.facebook.react"
78
*/
89
react {
910
/* Folders */
10-
// The root of your project, i.e. where "package.json" lives. Default is '..'
11-
// root = file("../")
12-
// The folder where the react-native NPM package is. Default is ../node_modules/react-native
13-
// reactNativeDir = file("../node_modules/react-native")
14-
// The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
15-
// codegenDir = file("../node_modules/@react-native/codegen")
16-
// The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
17-
// cliFile = file("../node_modules/react-native/cli.js")
11+
// The root of your project, i.e. where "package.json" lives. Default is '../..'
12+
// root = file("../../")
13+
// The folder where the react-native NPM package is. Default is ../../node_modules/react-native
14+
// reactNativeDir = file("../../node_modules/react-native")
15+
// The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
16+
// codegenDir = file("../../node_modules/@react-native/codegen")
17+
// The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
18+
// cliFile = file("../../node_modules/react-native/cli.js")
1819

1920
/* Variants */
2021
// The list of variants to that are debuggable. For those we're going to
@@ -48,6 +49,9 @@ react {
4849
//
4950
// The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
5051
// hermesFlags = ["-O", "-output-source-map"]
52+
53+
/* Autolinking */
54+
autolinkLibrariesWithApp()
5155
}
5256

5357
/**
@@ -59,21 +63,22 @@ def enableProguardInReleaseBuilds = false
5963
* The preferred build flavor of JavaScriptCore (JSC)
6064
*
6165
* For example, to use the international variant, you can use:
62-
* `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
66+
* `def jscFlavor = io.github.react-native-community:jsc-android-intl:2026004.+`
6367
*
6468
* The international variant includes ICU i18n library and necessary data
6569
* allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
6670
* give correct results when using with locales other than en-US. Note that
6771
* this variant is about 6MiB larger per architecture than default.
6872
*/
69-
def jscFlavor = 'org.webkit:android-jsc:+'
73+
def jscFlavor = 'io.github.react-native-community:jsc-android:2026004.+'
7074

7175
def superpowered_sdk_path = new File(projectDir, '../../../../Superpowered')
7276

7377
android {
7478
ndkVersion rootProject.ext.ndkVersion
7579

76-
compileSdkVersion rootProject.ext.compileSdkVersion
80+
buildToolsVersion rootProject.ext.buildToolsVersion
81+
compileSdk rootProject.ext.compileSdkVersion
7782

7883
namespace "com.superpoweredplayerwitheffects"
7984
defaultConfig {
@@ -127,17 +132,9 @@ dependencies {
127132
// The version of react-native is set by the React Native Gradle Plugin
128133
implementation("com.facebook.react:react-android")
129134

130-
debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
131-
debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
132-
exclude group:'com.squareup.okhttp3', module:'okhttp'
133-
}
134-
135-
debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
136135
if (hermesEnabled.toBoolean()) {
137136
implementation("com.facebook.react:hermes-android")
138137
} else {
139138
implementation jscFlavor
140139
}
141140
}
142-
143-
apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

Examples_ReactNative/SuperpoweredPlayerWithEffects/android/app/src/debug/AndroidManifest.xml

+1-5
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
33
xmlns:tools="http://schemas.android.com/tools">
44

5-
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
6-
75
<application
86
android:usesCleartextTraffic="true"
97
tools:targetApi="28"
10-
tools:ignore="GoogleAppIndexingWarning">
11-
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
12-
</application>
8+
tools:ignore="GoogleAppIndexingWarning"/>
139
</manifest>

0 commit comments

Comments
 (0)