5 |
6 | #include "SuperclusterHostObject.h"
7 |
8 | using namespace facebook;
9 | using namespace std;
10 |
11 | namespace clusterer {
12 |
13 | void install(jsi::Runtime &jsiRuntime);
14 | void cleanup();
15 | } // namespace clusterer
16 |
--------------------------------------------------------------------------------
/example/.bundle/config:
--------------------------------------------------------------------------------
1 | BUNDLE_PATH: "vendor/bundle"
2 | BUNDLE_FORCE_RUBY_PLATFORM: 1
3 |
--------------------------------------------------------------------------------
/example/.ruby-version:
--------------------------------------------------------------------------------
1 | 2.7.6
2 |
--------------------------------------------------------------------------------
/example/.watchmanconfig:
--------------------------------------------------------------------------------
1 | {}
--------------------------------------------------------------------------------
/example/Gemfile:
--------------------------------------------------------------------------------
1 | source 'https://rubygems.org'
2 |
3 | # You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
4 | ruby File.read(File.join(__dir__, '.ruby-version')).strip
5 |
6 | gem 'cocoapods', '~> 1.11', '>= 1.11.3'
7 |
--------------------------------------------------------------------------------
/example/_node-version:
--------------------------------------------------------------------------------
1 | 18
2 |
--------------------------------------------------------------------------------
/example/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 | apply plugin: "com.facebook.react"
3 |
4 | import com.android.build.OutputFile
5 |
6 | /**
7 | * This is the configuration block to customize your React Native Android app.
8 | * By default you don't need to apply any configuration, just uncomment the lines you need.
9 | */
10 | react {
11 | /* Folders */
12 | // The root of your project, i.e. where "package.json" lives. Default is '..'
13 | // root = file("../")
14 | // The folder where the react-native NPM package is. Default is ../node_modules/react-native
15 | // reactNativeDir = file("../node_modules/react-native")
16 | // The folder where the react-native Codegen package is. Default is ../node_modules/react-native-codegen
17 | // codegenDir = file("../node_modules/react-native-codegen")
18 | // The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
19 | // cliFile = file("../node_modules/react-native/cli.js")
20 |
21 | /* Variants */
22 | // The list of variants to that are debuggable. For those we're going to
23 | // skip the bundling of the JS bundle and the assets. By default is just 'debug'.
24 | // If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
25 | // debuggableVariants = ["liteDebug", "prodDebug"]
26 |
27 | /* Bundling */
28 | // A list containing the node command and its flags. Default is just 'node'.
29 | // nodeExecutableAndArgs = ["node"]
30 | //
31 | // The command to run when bundling. By default is 'bundle'
32 | // bundleCommand = "ram-bundle"
33 | //
34 | // The path to the CLI configuration file. Default is empty.
35 | // bundleConfig = file(../rn-cli.config.js)
36 | //
37 | // The name of the generated asset file containing your JS bundle
38 | // bundleAssetName = "MyApplication.android.bundle"
39 | //
40 | // The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
41 | // entryFile = file("../js/MyApplication.android.js")
42 | //
43 | // A list of extra flags to pass to the 'bundle' commands.
44 | // See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
45 | // extraPackagerArgs = []
46 |
47 | /* Hermes Commands */
48 | // The hermes compiler command to run. By default it is 'hermesc'
49 | // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
50 | //
51 | // The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
52 | // hermesFlags = ["-O", "-output-source-map"]
53 | }
54 |
55 | /**
56 | * Set this to true to create four separate APKs instead of one,
57 | * one for each native architecture. This is useful if you don't
58 | * use App Bundles (https://developer.android.com/guide/app-bundle/)
59 | * and want to have separate APKs to upload to the Play Store.
60 | */
61 | def enableSeparateBuildPerCPUArchitecture = false
62 |
63 | /**
64 | * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
65 | */
66 | def enableProguardInReleaseBuilds = false
67 |
68 | /**
69 | * The preferred build flavor of JavaScriptCore (JSC)
70 | *
71 | * For example, to use the international variant, you can use:
72 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
73 | *
74 | * The international variant includes ICU i18n library and necessary data
75 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
76 | * give correct results when using with locales other than en-US. Note that
77 | * this variant is about 6MiB larger per architecture than default.
78 | */
79 | def jscFlavor = 'org.webkit:android-jsc:+'
80 |
81 | /**
82 | * Private function to get the list of Native Architectures you want to build.
83 | * This reads the value from reactNativeArchitectures in your gradle.properties
84 | * file and works together with the --active-arch-only flag of react-native run-android.
85 | */
86 | def reactNativeArchitectures() {
87 | def value = project.getProperties().get("reactNativeArchitectures")
88 | return value ? value.split(",") : ["armeabi-v7a", "x86", "x86_64", "arm64-v8a"]
89 | }
90 |
91 | android {
92 | ndkVersion rootProject.ext.ndkVersion
93 |
94 | compileSdkVersion rootProject.ext.compileSdkVersion
95 |
96 | namespace "com.clustererexample"
97 | defaultConfig {
98 | applicationId "com.clustererexample"
99 | minSdkVersion rootProject.ext.minSdkVersion
100 | targetSdkVersion rootProject.ext.targetSdkVersion
101 | versionCode 1
102 | versionName "1.0"
103 | }
104 |
105 | splits {
106 | abi {
107 | reset()
108 | enable enableSeparateBuildPerCPUArchitecture
109 | universalApk false // If true, also generate a universal APK
110 | include (*reactNativeArchitectures())
111 | }
112 | }
113 | signingConfigs {
114 | debug {
115 | storeFile file('debug.keystore')
116 | storePassword 'android'
117 | keyAlias 'androiddebugkey'
118 | keyPassword 'android'
119 | }
120 | }
121 | buildTypes {
122 | debug {
123 | signingConfig signingConfigs.debug
124 | }
125 | release {
126 | // Caution! In production, you need to generate your own keystore file.
127 | // see https://reactnative.dev/docs/signed-apk-android.
128 | signingConfig signingConfigs.debug
129 | minifyEnabled enableProguardInReleaseBuilds
130 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
131 | }
132 | }
133 |
134 | // applicationVariants are e.g. debug, release
135 | applicationVariants.all { variant ->
136 | variant.outputs.each { output ->
137 | // For each separate APK per architecture, set a unique version code as described here:
138 | // https://developer.android.com/studio/build/configure-apk-splits.html
139 | // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
140 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
141 | def abi = output.getFilter(OutputFile.ABI)
142 | if (abi != null) { // null for the universal-debug, universal-release variants
143 | output.versionCodeOverride =
144 | defaultConfig.versionCode * 1000 + versionCodes.get(abi)
145 | }
146 |
147 | }
148 | }
149 | }
150 |
151 | dependencies {
152 | // The version of react-native is set by the React Native Gradle Plugin
153 | implementation("com.facebook.react:react-android")
154 |
155 | implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
156 |
157 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
158 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
159 | exclude group:'com.squareup.okhttp3', module:'okhttp'
160 | }
161 |
162 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
163 | if (hermesEnabled.toBoolean()) {
164 | implementation("com.facebook.react:hermes-android")
165 | } else {
166 | implementation jscFlavor
167 | }
168 | }
169 |
170 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
171 |
--------------------------------------------------------------------------------
/example/android/app/debug.keystore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/debug.keystore
--------------------------------------------------------------------------------
/example/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
--------------------------------------------------------------------------------
/example/android/app/src/debug/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/example/android/app/src/debug/java/com/clustererexample/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.clustererexample;
8 |
9 | import android.content.Context;
10 | import com.facebook.flipper.android.AndroidFlipperClient;
11 | import com.facebook.flipper.android.utils.FlipperUtils;
12 | import com.facebook.flipper.core.FlipperClient;
13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping;
17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
20 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
21 | import com.facebook.react.ReactInstanceEventListener;
22 | import com.facebook.react.ReactInstanceManager;
23 | import com.facebook.react.bridge.ReactContext;
24 | import com.facebook.react.modules.network.NetworkingModule;
25 | import okhttp3.OkHttpClient;
26 |
27 | /**
28 | * Class responsible of loading Flipper inside your React Native application. This is the debug
29 | * flavor of it. Here you can add your own plugins and customize the Flipper setup.
30 | */
31 | public class ReactNativeFlipper {
32 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
33 | if (FlipperUtils.shouldEnableFlipper(context)) {
34 | final FlipperClient client = AndroidFlipperClient.getInstance(context);
35 |
36 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
37 | client.addPlugin(new DatabasesFlipperPlugin(context));
38 | client.addPlugin(new SharedPreferencesFlipperPlugin(context));
39 | client.addPlugin(CrashReporterPlugin.getInstance());
40 |
41 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
42 | NetworkingModule.setCustomClientBuilder(
43 | new NetworkingModule.CustomClientBuilder() {
44 | @Override
45 | public void apply(OkHttpClient.Builder builder) {
46 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
47 | }
48 | });
49 | client.addPlugin(networkFlipperPlugin);
50 | client.start();
51 |
52 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
53 | // Hence we run if after all native modules have been initialized
54 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
55 | if (reactContext == null) {
56 | reactInstanceManager.addReactInstanceEventListener(
57 | new ReactInstanceEventListener() {
58 | @Override
59 | public void onReactContextInitialized(ReactContext reactContext) {
60 | reactInstanceManager.removeReactInstanceEventListener(this);
61 | reactContext.runOnNativeModulesQueueThread(
62 | new Runnable() {
63 | @Override
64 | public void run() {
65 | client.addPlugin(new FrescoFlipperPlugin());
66 | }
67 | });
68 | }
69 | });
70 | } else {
71 | client.addPlugin(new FrescoFlipperPlugin());
72 | }
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/example/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
12 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/clustererexample/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.clustererexample;
2 |
3 | import com.facebook.react.ReactActivity;
4 | import com.facebook.react.ReactActivityDelegate;
5 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
6 | import com.facebook.react.defaults.DefaultReactActivityDelegate;
7 |
8 | public class MainActivity extends ReactActivity {
9 |
10 | /**
11 | * Returns the name of the main component registered from JavaScript. This is used to schedule
12 | * rendering of the component.
13 | */
14 | @Override
15 | protected String getMainComponentName() {
16 | return "ClustererExample";
17 | }
18 |
19 | /**
20 | * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
21 | * DefaultReactActivityDelegate} which allows you to easily enable Fabric and Concurrent React
22 | * (aka React 18) with two boolean flags.
23 | */
24 | @Override
25 | protected ReactActivityDelegate createReactActivityDelegate() {
26 | return new DefaultReactActivityDelegate(
27 | this,
28 | getMainComponentName(),
29 | // If you opted-in for the New Architecture, we enable the Fabric Renderer.
30 | DefaultNewArchitectureEntryPoint.getFabricEnabled(), // fabricEnabled
31 | // If you opted-in for the New Architecture, we enable Concurrent React (i.e. React 18).
32 | DefaultNewArchitectureEntryPoint.getConcurrentReactEnabled() // concurrentRootEnabled
33 | );
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/example/android/app/src/main/java/com/clustererexample/MainApplication.java:
--------------------------------------------------------------------------------
1 | package com.clustererexample;
2 |
3 | import android.app.Application;
4 | import com.facebook.react.PackageList;
5 | import com.facebook.react.ReactApplication;
6 | import com.facebook.react.ReactNativeHost;
7 | import com.facebook.react.ReactPackage;
8 | import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
9 | import com.facebook.react.defaults.DefaultReactNativeHost;
10 | import com.facebook.soloader.SoLoader;
11 | import java.util.List;
12 |
13 | public class MainApplication extends Application implements ReactApplication {
14 |
15 | private final ReactNativeHost mReactNativeHost =
16 | new DefaultReactNativeHost(this) {
17 | @Override
18 | public boolean getUseDeveloperSupport() {
19 | return BuildConfig.DEBUG;
20 | }
21 |
22 | @Override
23 | protected List getPackages() {
24 | @SuppressWarnings("UnnecessaryLocalVariable")
25 | List packages = new PackageList(this).getPackages();
26 | // Packages that cannot be autolinked yet can be added manually here, for example:
27 | // packages.add(new MyReactNativePackage());
28 | return packages;
29 | }
30 |
31 | @Override
32 | protected String getJSMainModuleName() {
33 | return "index";
34 | }
35 |
36 | @Override
37 | protected boolean isNewArchEnabled() {
38 | return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
39 | }
40 |
41 | @Override
42 | protected Boolean isHermesEnabled() {
43 | return BuildConfig.IS_HERMES_ENABLED;
44 | }
45 | };
46 |
47 | @Override
48 | public ReactNativeHost getReactNativeHost() {
49 | return mReactNativeHost;
50 | }
51 |
52 | @Override
53 | public void onCreate() {
54 | super.onCreate();
55 | SoLoader.init(this, /* native exopackage */ false);
56 | if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
57 | // If you opted-in for the New Architecture, we load the native entry point for this app.
58 | DefaultNewArchitectureEntryPoint.load();
59 | }
60 | ReactNativeFlipper.initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/drawable/rn_edit_text_material.xml:
--------------------------------------------------------------------------------
1 |
2 |
16 |
21 |
22 |
23 |
32 |
33 |
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/example/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | ClustererExample
3 |
4 |
--------------------------------------------------------------------------------
/example/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/example/android/app/src/release/java/com/clustererexample/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Meta Platforms, Inc. and affiliates.
3 | *
4 | * This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.clustererexample;
8 |
9 | import android.content.Context;
10 | import com.facebook.react.ReactInstanceManager;
11 |
12 | /**
13 | * Class responsible of loading Flipper inside your React Native application. This is the release
14 | * flavor of it so it's empty as we don't want to load Flipper.
15 | */
16 | public class ReactNativeFlipper {
17 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
18 | // Do nothing as we don't want to initialize Flipper on Release.
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/example/android/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | ext {
5 | buildToolsVersion = "33.0.0"
6 | minSdkVersion = 21
7 | compileSdkVersion = 33
8 | targetSdkVersion = 33
9 |
10 | // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
11 | ndkVersion = "23.1.7779620"
12 | }
13 | repositories {
14 | google()
15 | mavenCentral()
16 | }
17 | dependencies {
18 | classpath("com.android.tools.build:gradle:7.3.1")
19 | classpath("com.facebook.react:react-native-gradle-plugin")
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/example/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
14 |
15 | # When configured, Gradle will run in incubating parallel mode.
16 | # This option should only be used with decoupled projects. More details, visit
17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
18 | # org.gradle.parallel=true
19 |
20 | # AndroidX package structure to make it clearer which packages are bundled with the
21 | # Android operating system, and which are packaged with your app's APK
22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
23 | android.useAndroidX=true
24 | # Automatically convert third-party libraries to use AndroidX
25 | android.enableJetifier=true
26 |
27 | # Version of flipper SDK to use with React Native
28 | FLIPPER_VERSION=0.125.0
29 |
30 | # Use this property to specify which architecture you want to build.
31 | # You can also override it from the CLI using
32 | # ./gradlew -PreactNativeArchitectures=x86_64
33 | reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
34 |
35 | # Use this property to enable support to the new architecture.
36 | # This will allow you to use TurboModules and the Fabric render in
37 | # your application. You should enable this flag either if you want
38 | # to write custom TurboModules/Fabric components OR use libraries that
39 | # are providing them.
40 | newArchEnabled=false
41 |
42 | # Use this property to enable or disable the Hermes JS engine.
43 | # If set to false, you will be using JSC instead.
44 | hermesEnabled=true
45 |
--------------------------------------------------------------------------------
/example/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiriHoffmann/react-native-clusterer/da3b7088052be4bf994e9e2b08591ad581c1a0b6/example/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/example/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.5.1-all.zip
4 | zipStoreBase=GRADLE_USER_HOME
5 | zipStorePath=wrapper/dists
6 |
--------------------------------------------------------------------------------
/example/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | #
4 | # Copyright © 2015-2021 the original authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | #
21 | # Gradle start up script for POSIX generated by Gradle.
22 | #
23 | # Important for running:
24 | #
25 | # (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
26 | # noncompliant, but you have some other compliant shell such as ksh or
27 | # bash, then to run this script, type that shell name before the whole
28 | # command line, like:
29 | #
30 | # ksh Gradle
31 | #
32 | # Busybox and similar reduced shells will NOT work, because this script
33 | # requires all of these POSIX shell features:
34 | # * functions;
35 | # * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
36 | # «${var#prefix}», «${var%suffix}», and «$( cmd )»;
37 | # * compound commands having a testable exit status, especially «case»;
38 | # * various built-in commands including «command», «set», and «ulimit».
39 | #
40 | # Important for patching:
41 | #
42 | # (2) This script targets any POSIX shell, so it avoids extensions provided
43 | # by Bash, Ksh, etc; in particular arrays are avoided.
44 | #
45 | # The "traditional" practice of packing multiple parameters into a
46 | # space-separated string is a well documented source of bugs and security
47 | # problems, so this is (mostly) avoided, by progressively accumulating
48 | # options in "$@", and eventually passing that to Java.
49 | #
50 | # Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
51 | # and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
52 | # see the in-line comments for details.
53 | #
54 | # There are tweaks for specific operating systems such as AIX, CygWin,
55 | # Darwin, MinGW, and NonStop.
56 | #
57 | # (3) This script is generated from the Groovy template
58 | # https://github.com/gradle/gradle/blob/master/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
59 | # within the Gradle project.
60 | #
61 | # You can find Gradle at https://github.com/gradle/gradle/.
62 | #
63 | ##############################################################################
64 |
65 | # Attempt to set APP_HOME
66 |
67 | # Resolve links: $0 may be a link
68 | app_path=$0
69 |
70 | # Need this for daisy-chained symlinks.
71 | while
72 | APP_HOME=${app_path%"${app_path##*/}"} # leaves a trailing /; empty if no leading path
73 | [ -h "$app_path" ]
74 | do
75 | ls=$( ls -ld "$app_path" )
76 | link=${ls#*' -> '}
77 | case $link in #(
78 | /*) app_path=$link ;; #(
79 | *) app_path=$APP_HOME$link ;;
80 | esac
81 | done
82 |
83 | APP_HOME=$( cd "${APP_HOME:-./}" && pwd -P ) || exit
84 |
85 | APP_NAME="Gradle"
86 | APP_BASE_NAME=${0##*/}
87 |
88 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
89 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
90 |
91 | # Use the maximum available, or set MAX_FD != -1 to use that value.
92 | MAX_FD=maximum
93 |
94 | warn () {
95 | echo "$*"
96 | } >&2
97 |
98 | die () {
99 | echo
100 | echo "$*"
101 | echo
102 | exit 1
103 | } >&2
104 |
105 | # OS specific support (must be 'true' or 'false').
106 | cygwin=false
107 | msys=false
108 | darwin=false
109 | nonstop=false
110 | case "$( uname )" in #(
111 | CYGWIN* ) cygwin=true ;; #(
112 | Darwin* ) darwin=true ;; #(
113 | MSYS* | MINGW* ) msys=true ;; #(
114 | NONSTOP* ) nonstop=true ;;
115 | esac
116 |
117 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
118 |
119 |
120 | # Determine the Java command to use to start the JVM.
121 | if [ -n "$JAVA_HOME" ] ; then
122 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
123 | # IBM's JDK on AIX uses strange locations for the executables
124 | JAVACMD=$JAVA_HOME/jre/sh/java
125 | else
126 | JAVACMD=$JAVA_HOME/bin/java
127 | fi
128 | if [ ! -x "$JAVACMD" ] ; then
129 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
130 |
131 | Please set the JAVA_HOME variable in your environment to match the
132 | location of your Java installation."
133 | fi
134 | else
135 | JAVACMD=java
136 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
137 |
138 | Please set the JAVA_HOME variable in your environment to match the
139 | location of your Java installation."
140 | fi
141 |
142 | # Increase the maximum file descriptors if we can.
143 | if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
144 | case $MAX_FD in #(
145 | max*)
146 | MAX_FD=$( ulimit -H -n ) ||
147 | warn "Could not query maximum file descriptor limit"
148 | esac
149 | case $MAX_FD in #(
150 | '' | soft) :;; #(
151 | *)
152 | ulimit -n "$MAX_FD" ||
153 | warn "Could not set maximum file descriptor limit to $MAX_FD"
154 | esac
155 | fi
156 |
157 | # Collect all arguments for the java command, stacking in reverse order:
158 | # * args from the command line
159 | # * the main class name
160 | # * -classpath
161 | # * -D...appname settings
162 | # * --module-path (only if needed)
163 | # * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
164 |
165 | # For Cygwin or MSYS, switch paths to Windows format before running java
166 | if "$cygwin" || "$msys" ; then
167 | APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
168 | CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
169 |
170 | JAVACMD=$( cygpath --unix "$JAVACMD" )
171 |
172 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
173 | for arg do
174 | if
175 | case $arg in #(
176 | -*) false ;; # don't mess with options #(
177 | /?*) t=${arg#/} t=/${t%%/*} # looks like a POSIX filepath
178 | [ -e "$t" ] ;; #(
179 | *) false ;;
180 | esac
181 | then
182 | arg=$( cygpath --path --ignore --mixed "$arg" )
183 | fi
184 | # Roll the args list around exactly as many times as the number of
185 | # args, so each arg winds up back in the position where it started, but
186 | # possibly modified.
187 | #
188 | # NB: a `for` loop captures its iteration list before it begins, so
189 | # changing the positional parameters here affects neither the number of
190 | # iterations, nor the values presented in `arg`.
191 | shift # remove old arg
192 | set -- "$@" "$arg" # push replacement arg
193 | done
194 | fi
195 |
196 | # Collect all arguments for the java command;
197 | # * $DEFAULT_JVM_OPTS, $JAVA_OPTS, and $GRADLE_OPTS can contain fragments of
198 | # shell script including quotes and variable substitutions, so put them in
199 | # double quotes to make sure that they get re-expanded; and
200 | # * put everything else in single quotes, so that it's not re-expanded.
201 |
202 | set -- \
203 | "-Dorg.gradle.appname=$APP_BASE_NAME" \
204 | -classpath "$CLASSPATH" \
205 | org.gradle.wrapper.GradleWrapperMain \
206 | "$@"
207 |
208 | # Use "xargs" to parse quoted args.
209 | #
210 | # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
211 | #
212 | # In Bash we could simply go:
213 | #
214 | # readarray ARGS < <( xargs -n1 <<<"$var" ) &&
215 | # set -- "${ARGS[@]}" "$@"
216 | #
217 | # but POSIX shell has neither arrays nor command substitution, so instead we
218 | # post-process each arg (as a line of input to sed) to backslash-escape any
219 | # character that might be a shell metacharacter, then use eval to reverse
220 | # that process (while maintaining the separation between arguments), and wrap
221 | # the whole thing up as a single "set" statement.
222 | #
223 | # This will of course break if any of these variables contains a newline or
224 | # an unmatched quote.
225 | #
226 |
227 | eval "set -- $(
228 | printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
229 | xargs -n1 |
230 | sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
231 | tr '\n' ' '
232 | )" '"$@"'
233 |
234 | exec "$JAVACMD" "$@"
235 |
--------------------------------------------------------------------------------
/example/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto execute
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto execute
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :execute
68 | @rem Setup the command line
69 |
70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
71 |
72 |
73 | @rem Execute Gradle
74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
75 |
76 | :end
77 | @rem End local scope for the variables with windows NT shell
78 | if "%ERRORLEVEL%"=="0" goto mainEnd
79 |
80 | :fail
81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
82 | rem the _cmd.exe /c_ return code!
83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
84 | exit /b 1
85 |
86 | :mainEnd
87 | if "%OS%"=="Windows_NT" endlocal
88 |
89 | :omega
90 |
--------------------------------------------------------------------------------
/example/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'ClustererExample'
2 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
3 | include ':app'
4 | includeBuild('../node_modules/react-native-gradle-plugin')
5 |
--------------------------------------------------------------------------------
/example/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ClustererExample",
3 | "displayName": "Clusterer Example"
4 | }
5 |
--------------------------------------------------------------------------------
/example/babel.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const pak = require('../package.json');
3 |
4 | module.exports = {
5 | presets: ['module:metro-react-native-babel-preset'],
6 | plugins: [
7 | [
8 | 'module-resolver',
9 | {
10 | extensions: ['.tsx', '.ts', '.js', '.json'],
11 | alias: {
12 | [pak.name]: path.join(__dirname, '..', pak.source),
13 | },
14 | },
15 | ],
16 | ],
17 | };
18 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import { AppRegistry } from 'react-native';
2 | import App from './src/App';
3 | import { name as appName } from './app.json';
4 |
5 | AppRegistry.registerComponent(appName, () => App);
6 |
--------------------------------------------------------------------------------
/example/ios/.xcode.env:
--------------------------------------------------------------------------------
1 | export NODE_BINARY=$(command -v node)
2 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample-Bridging-Header.h:
--------------------------------------------------------------------------------
1 | //
2 | // Use this file to import your target's public headers that you would like to expose to Swift.
3 | //
4 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample.xcodeproj/xcshareddata/xcschemes/ClustererExample.xcscheme:
--------------------------------------------------------------------------------
1 |
2 |
5 |
8 |
9 |
15 |
21 |
22 |
23 |
24 |
25 |
30 |
31 |
33 |
39 |
40 |
41 |
42 |
43 |
53 |
55 |
61 |
62 |
63 |
64 |
70 |
72 |
78 |
79 |
80 |
81 |
83 |
84 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample.xcworkspace/contents.xcworkspacedata:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
7 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | IDEDidComputeMac32BitWarning
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample/AppDelegate.h:
--------------------------------------------------------------------------------
1 | #import
2 | #import
3 |
4 | @interface AppDelegate : RCTAppDelegate
5 |
6 | @end
7 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample/AppDelegate.mm:
--------------------------------------------------------------------------------
1 | #import "AppDelegate.h"
2 |
3 | #import
4 |
5 | @implementation AppDelegate
6 |
7 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
8 | {
9 | self.moduleName = @"ClustererExample";
10 | // You can add your custom initial props in the dictionary below.
11 | // They will be passed down to the ViewController used by React Native.
12 | self.initialProps = @{};
13 |
14 | return [super application:application didFinishLaunchingWithOptions:launchOptions];
15 | }
16 |
17 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
18 | {
19 | #if DEBUG
20 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
21 | #else
22 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
23 | #endif
24 | }
25 |
26 | /// This method controls whether the `concurrentRoot`feature of React18 is turned on or off.
27 | ///
28 | /// @see: https://reactjs.org/blog/2022/03/29/react-v18.html
29 | /// @note: This requires to be rendering on Fabric (i.e. on the New Architecture).
30 | /// @return: `true` if the `concurrentRoot` feature is enabled. Otherwise, it returns `false`.
31 | - (BOOL)concurrentRootEnabled
32 | {
33 | return true;
34 | }
35 |
36 | @end
37 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample/Images.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "iphone",
5 | "scale" : "2x",
6 | "size" : "20x20"
7 | },
8 | {
9 | "idiom" : "iphone",
10 | "scale" : "3x",
11 | "size" : "20x20"
12 | },
13 | {
14 | "idiom" : "iphone",
15 | "scale" : "2x",
16 | "size" : "29x29"
17 | },
18 | {
19 | "idiom" : "iphone",
20 | "scale" : "3x",
21 | "size" : "29x29"
22 | },
23 | {
24 | "idiom" : "iphone",
25 | "scale" : "2x",
26 | "size" : "40x40"
27 | },
28 | {
29 | "idiom" : "iphone",
30 | "scale" : "3x",
31 | "size" : "40x40"
32 | },
33 | {
34 | "idiom" : "iphone",
35 | "scale" : "2x",
36 | "size" : "60x60"
37 | },
38 | {
39 | "idiom" : "iphone",
40 | "scale" : "3x",
41 | "size" : "60x60"
42 | },
43 | {
44 | "idiom" : "ios-marketing",
45 | "scale" : "1x",
46 | "size" : "1024x1024"
47 | }
48 | ],
49 | "info" : {
50 | "author" : "xcode",
51 | "version" : 1
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample/Images.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | ClustererExample
9 | CFBundleExecutable
10 | $(EXECUTABLE_NAME)
11 | CFBundleIdentifier
12 | $(PRODUCT_BUNDLE_IDENTIFIER)
13 | CFBundleInfoDictionaryVersion
14 | 6.0
15 | CFBundleName
16 | $(PRODUCT_NAME)
17 | CFBundlePackageType
18 | APPL
19 | CFBundleShortVersionString
20 | $(MARKETING_VERSION)
21 | CFBundleSignature
22 | ????
23 | CFBundleVersion
24 | $(CURRENT_PROJECT_VERSION)
25 | LSRequiresIPhoneOS
26 |
27 | NSAppTransportSecurity
28 |
29 | NSExceptionDomains
30 |
31 | localhost
32 |
33 | NSExceptionAllowsInsecureHTTPLoads
34 |
35 |
36 |
37 |
38 | NSLocationWhenInUseUsageDescription
39 |
40 | UILaunchStoryboardName
41 | LaunchScreen
42 | UIRequiredDeviceCapabilities
43 |
44 | armv7
45 |
46 | UISupportedInterfaceOrientations
47 |
48 | UIInterfaceOrientationPortrait
49 | UIInterfaceOrientationLandscapeLeft
50 | UIInterfaceOrientationLandscapeRight
51 |
52 | UIViewControllerBasedStatusBarAppearance
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample/LaunchScreen.storyboard:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
24 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/example/ios/ClustererExample/main.m:
--------------------------------------------------------------------------------
1 | #import
2 |
3 | #import "AppDelegate.h"
4 |
5 | int main(int argc, char *argv[])
6 | {
7 | @autoreleasepool {
8 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/example/ios/ClustererExampleTests/ClustererExampleTests.m:
--------------------------------------------------------------------------------
1 | #import
2 | #import
3 |
4 | #import
5 | #import
6 |
7 | #define TIMEOUT_SECONDS 600
8 | #define TEXT_TO_LOOK_FOR @"Welcome to React"
9 |
10 | @interface ClustererExampleTests : XCTestCase
11 |
12 | @end
13 |
14 | @implementation ClustererExampleTests
15 |
16 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL (^)(UIView *view))test
17 | {
18 | if (test(view)) {
19 | return YES;
20 | }
21 | for (UIView *subview in [view subviews]) {
22 | if ([self findSubviewInView:subview matching:test]) {
23 | return YES;
24 | }
25 | }
26 | return NO;
27 | }
28 |
29 | - (void)testRendersWelcomeScreen
30 | {
31 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController];
32 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
33 | BOOL foundElement = NO;
34 |
35 | __block NSString *redboxError = nil;
36 | #ifdef DEBUG
37 | RCTSetLogFunction(
38 | ^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
39 | if (level >= RCTLogLevelError) {
40 | redboxError = message;
41 | }
42 | });
43 | #endif
44 |
45 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
46 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
47 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
48 |
49 | foundElement = [self findSubviewInView:vc.view
50 | matching:^BOOL(UIView *view) {
51 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
52 | return YES;
53 | }
54 | return NO;
55 | }];
56 | }
57 |
58 | #ifdef DEBUG
59 | RCTSetLogFunction(RCTDefaultLogFunction);
60 | #endif
61 |
62 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
63 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
64 | }
65 |
66 | @end
67 |
--------------------------------------------------------------------------------
/example/ios/ClustererExampleTests/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleExecutable
8 | $(EXECUTABLE_NAME)
9 | CFBundleIdentifier
10 | $(PRODUCT_BUNDLE_IDENTIFIER)
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | $(PRODUCT_NAME)
15 | CFBundlePackageType
16 | BNDL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1
23 |
24 |
25 |
--------------------------------------------------------------------------------
/example/ios/File.swift:
--------------------------------------------------------------------------------
1 | //
2 | // File.swift
3 | // ClustererExample
4 | //
5 |
6 | import Foundation
7 |
--------------------------------------------------------------------------------
/example/ios/Podfile:
--------------------------------------------------------------------------------
1 | ENV['RCT_NEW_ARCH_ENABLED'] = '0'
2 |
3 | require_relative '../node_modules/react-native/scripts/react_native_pods'
4 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
5 |
6 | platform :ios, min_ios_version_supported
7 | prepare_react_native_project!
8 |
9 | # If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
10 | # because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
11 | #
12 | # To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
13 | # ```js
14 | # module.exports = {
15 | # dependencies: {
16 | # ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
17 | # ```
18 | flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled
19 |
20 | linkage = ENV['USE_FRAMEWORKS']
21 | if linkage != nil
22 | Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
23 | use_frameworks! :linkage => linkage.to_sym
24 | end
25 |
26 | target 'ClustererExample' do
27 | config = use_native_modules!
28 |
29 | # Flags change depending on the env values.
30 | flags = get_default_flags()
31 |
32 | use_react_native!(
33 | :path => config[:reactNativePath],
34 | # Hermes is now enabled by default. Disable by setting this flag to false.
35 | # Upcoming versions of React Native may rely on get_default_flags(), but
36 | # we make it explicit here to aid in the React Native upgrade process.
37 | :hermes_enabled => flags[:hermes_enabled],
38 | :fabric_enabled => flags[:fabric_enabled],
39 | # Enables Flipper.
40 | #
41 | # Note that if you have use_frameworks! enabled, Flipper will not work and
42 | # you should disable the next line.
43 | :flipper_configuration => flipper_config,
44 | # An absolute path to your application root.
45 | :app_path => "#{Pod::Config.instance.installation_root}/.."
46 | )
47 |
48 | target 'ClustererExampleTests' do
49 | inherit! :complete
50 | # Pods for testing
51 | end
52 |
53 | post_install do |installer|
54 | react_native_post_install(
55 | installer,
56 | # Set `mac_catalyst_enabled` to `true` in order to apply patches
57 | # necessary for Mac Catalyst builds
58 | :mac_catalyst_enabled => false
59 | )
60 | __apply_Xcode_12_5_M1_post_install_workaround(installer)
61 | end
62 | end
63 |
--------------------------------------------------------------------------------
/example/ios/_xcode.env:
--------------------------------------------------------------------------------
1 | # This `.xcode.env` file is versioned and is used to source the environment
2 | # used when running script phases inside Xcode.
3 | # To customize your local environment, you can create an `.xcode.env.local`
4 | # file that is not versioned.
5 |
6 | # NODE_BINARY variable contains the PATH to the node executable.
7 | #
8 | # Customize the NODE_BINARY variable here.
9 | # For example, to use nvm with brew, add the following line
10 | # . "$(brew --prefix nvm)/nvm.sh" --no-use
11 | export NODE_BINARY=$(command -v node)
12 |
--------------------------------------------------------------------------------
/example/metro.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const escape = require('escape-string-regexp');
3 | const exclusionList = require('metro-config/src/defaults/exclusionList');
4 | const pak = require('../package.json');
5 |
6 | const root = path.resolve(__dirname, '..');
7 |
8 | const modules = Object.keys({
9 | ...pak.peerDependencies,
10 | });
11 |
12 | module.exports = {
13 | projectRoot: __dirname,
14 | watchFolders: [root],
15 |
16 | // We need to make sure that only one version is loaded for peerDependencies
17 | // So we block them at the root, and alias them to the versions in example's node_modules
18 | resolver: {
19 | blacklistRE: exclusionList(
20 | modules.map(
21 | (m) =>
22 | new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
23 | )
24 | ),
25 |
26 | extraNodeModules: modules.reduce((acc, name) => {
27 | acc[name] = path.join(__dirname, 'node_modules', name);
28 | return acc;
29 | }, {}),
30 | },
31 |
32 | transformer: {
33 | getTransformOptions: async () => ({
34 | transform: {
35 | experimentalImportSupport: false,
36 | inlineRequires: true,
37 | },
38 | }),
39 | },
40 | };
41 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-clusterer-example",
3 | "description": "Example app for react-native-clusterer",
4 | "version": "0.0.1",
5 | "private": true,
6 | "scripts": {
7 | "android": "react-native run-android",
8 | "ios": "react-native run-ios",
9 | "start": "react-native start",
10 | "pods": "pod-install --quiet"
11 | },
12 | "dependencies": {
13 | "@types/supercluster": "^7.1.3",
14 | "react": "18.2.0",
15 | "react-native": "0.71.3",
16 | "react-native-maps": "^1.4.0",
17 | "supercluster": "^8.0.1"
18 | },
19 | "devDependencies": {
20 | "@babel/core": "^7.20.0",
21 | "@babel/preset-env": "^7.20.0",
22 | "@babel/runtime": "^7.20.0",
23 | "babel-plugin-module-resolver": "^4.1.0",
24 | "metro-react-native-babel-preset": "0.73.7"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/example/react-native.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const pak = require('../package.json');
3 |
4 | module.exports = {
5 | dependencies: {
6 | [pak.name]: {
7 | root: path.join(__dirname, '..'),
8 | },
9 | },
10 | };
11 |
--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-native/no-inline-styles */
2 | import React, { useState } from 'react';
3 | import {
4 | StyleSheet,
5 | View,
6 | Text,
7 | TouchableOpacity,
8 | SafeAreaView,
9 | } from 'react-native';
10 | import { Map } from './Map';
11 | import { Comparison } from './Comparison';
12 | import { Tests } from './Tests';
13 |
14 | export default function App() {
15 | const [showType, setType] = useState(null);
16 |
17 | return (
18 |
19 | Clusterer
20 |
21 | setType('map')}
28 | >
29 | 🗺️ Map Clustering
30 |
31 | setType('speed')}
38 | >
39 | ⚡ Speed Comparison
40 |
41 | setType('test')}
48 | >
49 | 🧪 Tests
50 |
51 |
52 | {showType === 'map' && }
53 | {showType === 'speed' && }
54 | {showType === 'test' && }
55 |
56 | );
57 | }
58 |
59 | const styles = StyleSheet.create({
60 | container: {
61 | flex: 1,
62 | backgroundColor: '#fff',
63 | },
64 | header: {
65 | fontSize: 22,
66 | fontWeight: 'bold',
67 | marginHorizontal: 10,
68 | marginBottom: 5,
69 | },
70 | buttonContainer: {
71 | flexDirection: 'row',
72 | marginBottom: 10,
73 | marginHorizontal: 10,
74 | gap: 10,
75 | },
76 | button: {
77 | flex: 1,
78 | borderRadius: 5,
79 | justifyContent: 'center',
80 | alignItems: 'center',
81 | height: 40,
82 | borderWidth: 2,
83 | },
84 | });
85 |
--------------------------------------------------------------------------------
/example/src/Comparison.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-native/no-inline-styles */
2 | import React, { useState, FunctionComponent } from 'react';
3 | import {
4 | StyleSheet,
5 | View,
6 | Text,
7 | TouchableOpacity,
8 | TextInput,
9 | } from 'react-native';
10 | import { getRandomData, parsedPlacesData } from './places';
11 | import { GetTile } from './GetTile';
12 | import { GetClusters } from './GetClusters';
13 |
14 | const DEFAULT_SIZE = '1000';
15 |
16 | export const Comparison: FunctionComponent<{}> = () => {
17 | const [data, setData] = useState[]>(
18 | getRandomData(DEFAULT_SIZE)
19 | );
20 | const [dataSizeInput, setDataSizeInput] = useState(DEFAULT_SIZE);
21 | const [showType, setType] = useState(null);
22 |
23 | const _handleDefaultDataPress = () => {
24 | setData(parsedPlacesData);
25 | };
26 |
27 | const _handleGenerateDataPress = () => {
28 | setData(getRandomData(dataSizeInput));
29 | };
30 |
31 | return (
32 |
33 | Input Data
34 |
35 |
39 | Use supercluster.js test data
40 |
41 | Or generate random points
42 |
43 | setDataSizeInput(t as any)}
47 | keyboardType={'number-pad'}
48 | value={`${dataSizeInput}`}
49 | multiline={false}
50 | />
51 |
55 | Generate
56 |
57 |
58 | Data size: {data.length}
59 |
60 | setType('tile')}
68 | >
69 | getTile
70 |
71 | setType('cluster')}
78 | >
79 | getClusters
80 |
81 |
82 |
83 | {showType === 'tile' && }
84 | {showType === 'cluster' && }
85 |
86 | );
87 | };
88 |
89 | const styles = StyleSheet.create({
90 | container: {
91 | flex: 1,
92 | marginHorizontal: 10,
93 | gap: 10
94 | },
95 | h2: {
96 | fontSize: 16,
97 | fontWeight: 'bold',
98 | marginTop: 10,
99 | },
100 | buttonContainer: {
101 | position: 'absolute',
102 | bottom: 20,
103 | left: 0,
104 | right: 0,
105 | flexDirection: 'row',
106 | justifyContent: 'space-around',
107 | width: '100%',
108 | },
109 | defaultDataButton: {
110 | borderRadius: 5,
111 | justifyContent: 'center',
112 | alignItems: 'center',
113 | height: 40,
114 | backgroundColor: '#8eb3ed',
115 | },
116 | button: {
117 | flex: 1,
118 | borderRadius: 5,
119 | justifyContent: 'center',
120 | alignItems: 'center',
121 | height: 40,
122 | backgroundColor: '#8eb3ed',
123 | },
124 | inputContainer: {
125 | flexDirection: 'row',
126 | },
127 | input: {
128 | flex: 1,
129 | borderWidth: 1,
130 | borderRadius: 5,
131 | borderColor: '#8eb3ed',
132 | height: 40,
133 | },
134 | type: {
135 | flex: 1,
136 | borderRadius: 5,
137 | justifyContent: 'center',
138 | alignItems: 'center',
139 | height: 40,
140 | borderWidth: 2,
141 | },
142 | });
143 |
--------------------------------------------------------------------------------
/example/src/GetClusters.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-native/no-inline-styles */
2 | import React, { FunctionComponent, useState } from 'react';
3 | import {
4 | StyleSheet,
5 | SafeAreaView,
6 | View,
7 | Text,
8 | ScrollView,
9 | TextInput,
10 | Platform,
11 | TouchableOpacity,
12 | } from 'react-native';
13 | import { PerformanceNow, superclusterOptions, timeDelta } from './utils';
14 | import Supercluster from 'react-native-clusterer';
15 | import SuperclusterJS from 'supercluster';
16 |
17 | type BBox = [number, number, number, number];
18 | interface Props {
19 | data: supercluster.PointFeature[];
20 | }
21 |
22 | const GetClusters: FunctionComponent = ({ data }) => {
23 | const [westLng, setWestLng] = useState('-180');
24 | const [southLat, setSouthLat] = useState('-90');
25 | const [eastLng, setEastLng] = useState('180');
26 | const [northLat, setNorthLat] = useState('90');
27 | const [zoom, setZoom] = useState('1');
28 |
29 | const zoomInt = parseInt(zoom);
30 | const bbox = [westLng, southLat, eastLng, northLat].map(parseFloat) as BBox;
31 |
32 | const [time, setTime] = useState(['0', '0']);
33 | const [result, setResult] = useState('');
34 |
35 | const _handleRunJS = () => {
36 | if (bbox.some(isNaN)) return console.warn('Invalid input', bbox);
37 | if (isNaN(zoomInt)) return console.warn('Invalid input', zoomInt);
38 |
39 | const start = PerformanceNow();
40 | const superclusterJS = new SuperclusterJS(superclusterOptions);
41 | superclusterJS.load(data);
42 | const end = PerformanceNow();
43 |
44 | const getTileS = PerformanceNow();
45 | const clusterRes = superclusterJS.getClusters(bbox, zoomInt);
46 | const getTileE = PerformanceNow();
47 |
48 | setResult(JSON.stringify(clusterRes));
49 | setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]);
50 | };
51 |
52 | const _handleRunCPP = () => {
53 | if (bbox.some(isNaN)) return console.warn('Invalid input', bbox);
54 | if (isNaN(zoomInt)) return console.warn('Invalid input', zoomInt);
55 |
56 | const start = PerformanceNow();
57 | const supercluster = new Supercluster(superclusterOptions);
58 | supercluster.load(data);
59 | const end = PerformanceNow();
60 |
61 | const getTileS = PerformanceNow();
62 | const clusterRes = supercluster.getClusters(bbox, zoomInt);
63 |
64 | const getTileE = PerformanceNow();
65 |
66 | setResult(JSON.stringify(clusterRes));
67 | setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]);
68 | };
69 |
70 | return (
71 |
72 |
73 | westLng
74 | southLat
75 | eastLng
76 | northLat
77 | zoom
78 |
79 |
80 |
88 |
96 |
104 |
112 |
120 |
121 |
122 |
123 |
127 | JS Impementation
128 |
129 |
130 | C++ Impementation
131 |
132 |
133 |
134 | Initialization time: {time[0]} ms
135 | Get clusters time: {time[1]} ms
136 | Result:
137 |
138 | {result}
139 |
140 |
141 | );
142 | };
143 |
144 | const styles = StyleSheet.create({
145 | container: {
146 | paddingTop: 20,
147 | },
148 | scrollView: {
149 | height: 300,
150 | },
151 | h2: {
152 | fontSize: 14,
153 | fontWeight: 'bold',
154 | },
155 | rowContainer: {
156 | flexDirection: 'row',
157 | width: '100%',
158 | },
159 | flex: {
160 | flex: 1,
161 | textAlign: 'center',
162 | },
163 | flexInput: {
164 | flex: 1,
165 | textAlign: 'center',
166 | borderWidth: 1,
167 | borderRadius: 5,
168 | borderColor: '#eda78e',
169 | height: 35,
170 | paddingBottom: Platform.OS === 'android' ? 7 : undefined,
171 | marginHorizontal: 5,
172 | },
173 | buttonContainer: {
174 | flexDirection: 'row',
175 | },
176 | button: {
177 | flex: 1,
178 | borderRadius: 5,
179 | justifyContent: 'center',
180 | alignItems: 'center',
181 | height: 40,
182 | marginVertical: 10,
183 | backgroundColor: '#eda78e',
184 | },
185 | });
186 |
187 | export { GetClusters };
188 |
--------------------------------------------------------------------------------
/example/src/GetTile.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-native/no-inline-styles */
2 | import React, { FunctionComponent, useState } from 'react';
3 | import {
4 | StyleSheet,
5 | SafeAreaView,
6 | View,
7 | Text,
8 | ScrollView,
9 | TextInput,
10 | Platform,
11 | TouchableOpacity,
12 | } from 'react-native';
13 | import { PerformanceNow, superclusterOptions, timeDelta } from './utils';
14 | import Supercluster from 'react-native-clusterer';
15 | import SuperclusterJS from 'supercluster';
16 |
17 | interface Props {
18 | data: supercluster.PointFeature[];
19 | }
20 |
21 | const GetTile: FunctionComponent = ({ data }) => {
22 | const [x, setX] = useState('0');
23 | const [y, setY] = useState('0');
24 | const [z, setZ] = useState('0');
25 |
26 | const xInt = parseInt(x);
27 | const yInt = parseInt(y);
28 | const zInt = parseInt(z);
29 |
30 | const [time, setTime] = useState(['0', '0']);
31 | const [result, setResult] = useState('');
32 |
33 | const _handleRunJS = () => {
34 | if (isNaN(xInt) || isNaN(yInt) || isNaN(zInt))
35 | return console.warn('Invalid input', xInt, yInt, zInt);
36 |
37 | const start = PerformanceNow();
38 | const superclusterJS = new SuperclusterJS(superclusterOptions);
39 | superclusterJS.load(data);
40 | const end = PerformanceNow();
41 |
42 | const getTileS = PerformanceNow();
43 | const tileRes = superclusterJS.getTile(xInt, yInt, zInt);
44 | const getTileE = PerformanceNow();
45 |
46 | setResult(JSON.stringify(tileRes));
47 | setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]);
48 | };
49 |
50 | const _handleRunCPP = () => {
51 | if (isNaN(xInt) || isNaN(yInt) || isNaN(zInt))
52 | return console.warn('Invalid input', xInt, yInt, zInt);
53 |
54 | const start = PerformanceNow();
55 | const supercluster = new Supercluster(superclusterOptions);
56 | supercluster.load(data);
57 | const end = PerformanceNow();
58 |
59 | const getTileS = PerformanceNow();
60 | const tileRes = supercluster.getTile(xInt, yInt, zInt);
61 | const getTileE = PerformanceNow();
62 |
63 | setResult(JSON.stringify(tileRes));
64 | setTime([timeDelta(start, end), timeDelta(getTileS, getTileE)]);
65 | };
66 |
67 | return (
68 |
69 |
70 | x
71 | y
72 | z
73 |
74 |
75 |
83 |
91 |
99 |
100 |
101 |
102 |
106 | JS Impementation
107 |
108 |
109 | C++ Impementation
110 |
111 |
112 |
113 | Initialization time: {time[0]} ms
114 | Get tile time: {time[1]} ms
115 | Result:
116 |
117 | {result}
118 |
119 |
120 | );
121 | };
122 |
123 | const styles = StyleSheet.create({
124 | container: {
125 | paddingTop: 20,
126 | },
127 | scrollView: {
128 | marginBottom: 10,
129 | height: 300,
130 | },
131 | h2: {
132 | fontSize: 14,
133 | fontWeight: 'bold',
134 | },
135 | rowContainer: {
136 | flexDirection: 'row',
137 | width: '100%',
138 | },
139 | flex: {
140 | flex: 1,
141 | textAlign: 'center',
142 | },
143 | flexInput: {
144 | flex: 1,
145 | textAlign: 'center',
146 | borderWidth: 1,
147 | borderRadius: 5,
148 | borderColor: '#9c8eed',
149 | height: 35,
150 | paddingBottom: Platform.OS === 'android' ? 7 : undefined,
151 | marginHorizontal: 5,
152 | },
153 | buttonContainer: {
154 | flexDirection: 'row',
155 | },
156 | button: {
157 | flex: 1,
158 | borderRadius: 5,
159 | justifyContent: 'center',
160 | alignItems: 'center',
161 | height: 40,
162 | marginVertical: 10,
163 | backgroundColor: '#9c8eed',
164 | },
165 | });
166 |
167 | export { GetTile };
168 |
--------------------------------------------------------------------------------
/example/src/Map.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef } from 'react';
2 | import { Dimensions, StyleSheet, View } from 'react-native';
3 | import { Clusterer, isPointCluster } from 'react-native-clusterer';
4 | import MapView, { Region } from 'react-native-maps';
5 | import { initialRegion, parsedPlacesData } from './places';
6 | import { Point } from './Point';
7 |
8 | import type { supercluster } from 'react-native-clusterer';
9 |
10 | type IFeature = supercluster.PointOrClusterFeature;
11 |
12 | const MAP_WIDTH = Dimensions.get('window').width;
13 | const MAP_HEIGHT = Dimensions.get('window').height - 80;
14 | const MAP_DIMENSIONS = { width: MAP_WIDTH, height: MAP_HEIGHT };
15 |
16 | export const Map = () => {
17 | const [region, setRegion] = useState(initialRegion);
18 | const mapRef = useRef(null);
19 |
20 | const _handlePointPress = (point: IFeature) => {
21 | if (isPointCluster(point)) {
22 | const toRegion = point.properties.getExpansionRegion();
23 | mapRef.current?.animateToRegion(toRegion, 500);
24 | }
25 | };
26 |
27 | return (
28 |
29 |
35 | {
41 | return (
42 |
51 | );
52 | }}
53 | />
54 |
55 |
56 | );
57 | };
58 |
59 | const styles = StyleSheet.create({
60 | container: {
61 | flex: 1,
62 | },
63 | });
64 |
--------------------------------------------------------------------------------
/example/src/Point.tsx:
--------------------------------------------------------------------------------
1 | import React, { FunctionComponent, memo } from 'react';
2 | import { Text, StyleSheet, View } from 'react-native';
3 | import { Marker as MapsMarker, Callout } from 'react-native-maps';
4 |
5 | import type { supercluster } from 'react-native-clusterer';
6 |
7 | type IFeature = supercluster.PointOrClusterFeature;
8 |
9 | interface Props {
10 | item: IFeature;
11 | onPress: (item: IFeature) => void;
12 | }
13 |
14 | export const Point: FunctionComponent = memo(
15 | ({ item, onPress }) => {
16 | return (
17 | onPress(item)}
25 | >
26 | {item.properties?.cluster ? (
27 | // Render Cluster
28 |
29 |
30 | {item.properties.point_count}
31 |
32 |
33 | ) : (
34 | // Else, use default behavior to render
35 | // a marker and add a callout to it
36 |
37 |
38 | {JSON.stringify(item.properties)}
39 |
40 |
41 | )}
42 |
43 | );
44 | },
45 | (prevProps, nextProps) =>
46 | prevProps.item.properties?.cluster_id ===
47 | nextProps.item.properties?.cluster_id &&
48 | prevProps.item.properties?.id === nextProps.item.properties?.id &&
49 | prevProps.item.properties?.point_count ===
50 | nextProps.item.properties?.point_count &&
51 | prevProps.item.properties?.onItemPress ===
52 | nextProps.item.properties?.onItemPress &&
53 | prevProps.item.properties?.getExpansionRegion ===
54 | nextProps.item.properties?.getExpansionRegion
55 | );
56 |
57 | const styles = StyleSheet.create({
58 | calloutContainer: {
59 | width: 200,
60 | height: 200,
61 | backgroundColor: '#fff',
62 | borderRadius: 5,
63 | padding: 10,
64 | },
65 | clusterMarker: {
66 | width: 40,
67 | height: 40,
68 | borderRadius: 20,
69 | backgroundColor: '#8eb3ed',
70 | justifyContent: 'center',
71 | alignItems: 'center',
72 | },
73 | clusterMarkerText: {
74 | color: '#fff',
75 | fontSize: 16,
76 | },
77 | });
78 |
--------------------------------------------------------------------------------
/example/src/Tests.tsx:
--------------------------------------------------------------------------------
1 | import React, { FunctionComponent } from 'react';
2 | import { StyleSheet, View, Text } from 'react-native';
3 |
4 | import Supercluster from 'react-native-clusterer';
5 | import { places, placesTile, placesTileMin5 } from './test/fixtures';
6 | import { deepEqualWithoutIds } from './utils';
7 |
8 | export const Tests: FunctionComponent<{}> = () => {
9 | const generatesClustersProperly = () => {
10 | const index = new Supercluster().load(places.features);
11 | const tile = index.getTile(0, 0, 0);
12 | return deepEqualWithoutIds(tile, placesTile);
13 | };
14 |
15 | const supportsMinPointsOption = () => {
16 | const index = new Supercluster({ minPoints: 5 }).load(places.features);
17 | const tile = index.getTile(0, 0, 0);
18 | return deepEqualWithoutIds(tile?.features, placesTileMin5.features);
19 | };
20 |
21 | const returnChildrenOfACluster = () => {
22 | const index = new Supercluster().load(places.features);
23 | const childCounts = index
24 | .getChildren(1)
25 | .map((p) => p.properties.point_count || 1);
26 | return deepEqualWithoutIds(childCounts, [6, 7, 2, 1]);
27 | };
28 |
29 | const returnLeavesOfACluster = () => {
30 | const index = new Supercluster().load(places.features);
31 | const leafNames = index.getLeaves(1, 10, 5).map((p) => p.properties.name);
32 | return deepEqualWithoutIds(leafNames, [
33 | 'Niagara Falls',
34 | 'Cape San Blas',
35 | 'Cape Sable',
36 | 'Cape Canaveral',
37 | 'San Salvador',
38 | 'Cabo Gracias a Dios',
39 | 'I. de Cozumel',
40 | 'Grand Cayman',
41 | 'Miquelon',
42 | 'Cape Bauld',
43 | ]);
44 | };
45 |
46 | const generatesUniqueIdsWithGenerateIdOption = () => {
47 | const index = new Supercluster({ generateId: true }).load(places.features);
48 | const ids = index
49 | .getTile(0, 0, 0)!
50 | .features.filter((f) => !f.tags.cluster)
51 | .map((f) => (f as any).id);
52 | return deepEqualWithoutIds(
53 | ids,
54 | [12, 20, 21, 22, 24, 28, 30, 62, 81, 118, 119, 125, 81, 118]
55 | );
56 | };
57 |
58 | const getLeavesHandlesNullPropertyFeatures = () => {
59 | const index = new Supercluster({ radius: 1 }).load([
60 | {
61 | type: 'Feature',
62 | properties: null as any,
63 | geometry: {
64 | type: 'Point',
65 | coordinates: [-79.04411780507252, 43.08771393436908],
66 | },
67 | },
68 | {
69 | type: 'Feature',
70 | properties: null as any,
71 | geometry: {
72 | type: 'Point',
73 | coordinates: [-79.04511780507252, 43.08781393436908],
74 | },
75 | },
76 | ]);
77 | const leaves = index.getLeaves(1, Infinity, 0);
78 | return leaves[0].properties === null;
79 | };
80 |
81 | const returnsClusterExpansionZoom = () => {
82 | const index = new Supercluster().load(places.features);
83 |
84 | return (
85 | index.getClusterExpansionZoom(2) == 2 &&
86 | index.getClusterExpansionZoom(2978) == 3 &&
87 | index.getClusterExpansionZoom(516) == 5 &&
88 | index.getClusterExpansionZoom(3014) == 6
89 | );
90 | };
91 |
92 | const returnsClusterExpansionZoomForMaxZoom = () => {
93 | const index = new Supercluster({
94 | radius: 60,
95 | extent: 256,
96 | maxZoom: 4,
97 | }).load(places.features);
98 |
99 | return index.getClusterExpansionZoom(2341) === 5;
100 | };
101 |
102 | const returnsClustersWhenQueryCrossesInternationalDateline = () => {
103 | const index = new Supercluster().load([
104 | {
105 | type: 'Feature',
106 | properties: {},
107 | geometry: {
108 | type: 'Point',
109 | coordinates: [-178.989, 0],
110 | },
111 | },
112 | {
113 | type: 'Feature',
114 | properties: {},
115 | geometry: {
116 | type: 'Point',
117 | coordinates: [-178.99, 0],
118 | },
119 | },
120 | {
121 | type: 'Feature',
122 | properties: {},
123 | geometry: {
124 | type: 'Point',
125 | coordinates: [-178.991, 0],
126 | },
127 | },
128 | {
129 | type: 'Feature',
130 | properties: {},
131 | geometry: {
132 | type: 'Point',
133 | coordinates: [-178.992, 0],
134 | },
135 | },
136 | ]);
137 |
138 | const nonCrossing = index.getClusters([-179, -10, -177, 10], 1);
139 | const crossing = index.getClusters([179, -10, -177, 10], 1);
140 |
141 | return (
142 | nonCrossing.length > 0 &&
143 | crossing.length > 0 &&
144 | nonCrossing.length === crossing.length
145 | );
146 | };
147 |
148 | const doesNotCrashOnWeirdBboxValues = () => {
149 | const index = new Supercluster().load(places.features);
150 | return (
151 | index.getClusters([129.42639, -103.720017, -445.930843, 114.518236], 1)
152 | .length === 26 &&
153 | index.getClusters([112.207836, -84.578666, -463.149397, 120.169159], 1)
154 | .length === 27 &&
155 | index.getClusters([129.886277, -82.33268, -445.470956, 120.39093], 1)
156 | .length === 26 &&
157 | index.getClusters([458.220043, -84.239039, -117.13719, 120.206585], 1)
158 | .length === 25 &&
159 | index.getClusters([456.713058, -80.354196, -118.644175, 120.539148], 1)
160 | .length === 25 &&
161 | index.getClusters([453.105328, -75.857422, -122.251904, 120.73276], 1)
162 | .length === 25 &&
163 | index.getClusters([-180, -90, 180, 90], 1).length === 61
164 | );
165 | };
166 |
167 | const doesNotCrashOnNonIntegerZoomValues = () => {
168 | const index = new Supercluster().load(places.features);
169 | return (
170 | typeof index.getClusters([179, -10, -177, 10], 1.25).length === 'number'
171 | );
172 | };
173 |
174 | const makeSureSameLocationPointsAreClustered = () => {
175 | const index = new Supercluster({
176 | maxZoom: 20,
177 | extent: 8192,
178 | radius: 16,
179 | }).load([
180 | {
181 | type: 'Feature',
182 | geometry: { type: 'Point', coordinates: [-1.426798, 53.943034] },
183 | properties: {},
184 | },
185 | {
186 | type: 'Feature',
187 | geometry: { type: 'Point', coordinates: [-1.426798, 53.943034] },
188 | properties: {},
189 | },
190 | ]);
191 | const clusters = index.getClusters([-180, -85, 180, 85], 1);
192 | return clusters[0].properties.point_count === 2;
193 | };
194 |
195 | const makesSureUnclusteredPointCoordsAreNotRounded = () => {
196 | const index = new Supercluster({ maxZoom: 19 }).load([
197 | {
198 | type: 'Feature',
199 | geometry: {
200 | type: 'Point',
201 | coordinates: [173.19150559062456, -41.340357424709275],
202 | },
203 | properties: {},
204 | },
205 | ]);
206 |
207 | return deepEqualWithoutIds(
208 | index.getTile(20, 1028744, 656754)!.features[0].geometry[0],
209 | [421, 281]
210 | );
211 | };
212 |
213 | const doesNotThrowOnZeroItems = () => {
214 | const index = new Supercluster().load([]);
215 | return deepEqualWithoutIds(index.getClusters([-180, -85, 180, 85], 0), []);
216 | };
217 |
218 | return (
219 |
220 |
221 | generates clusters properly {generatesClustersProperly() ? '✅' : '❌'}
222 |
223 |
224 | supports minPoints option {supportsMinPointsOption() ? '✅' : '❌'}
225 |
226 |
227 | return children of a cluster {returnChildrenOfACluster() ? '✅' : '❌'}
228 |
229 |
230 | return leaves of a cluster {returnLeavesOfACluster() ? '✅' : '❌'}
231 |
232 |
233 | generates unique ids with generateId option{' '}
234 | {generatesUniqueIdsWithGenerateIdOption() ? '✅' : '❌'}
235 |
236 |
237 | getLeaves handles null property features{' '}
238 | {getLeavesHandlesNullPropertyFeatures() ? '✅' : '❌'}
239 |
240 |
241 | returns cluster expansion zoom{' '}
242 | {returnsClusterExpansionZoom() ? '✅' : '❌'}
243 |
244 |
245 | returns cluster expansion zoom for maxZoom{' '}
246 | {returnsClusterExpansionZoomForMaxZoom() ? '✅' : '❌'}
247 |
248 |
249 | returns clusters when query crosses international dateline{' '}
250 | {returnsClustersWhenQueryCrossesInternationalDateline() ? '✅' : '❌'}
251 |
252 |
253 | does not crash on weird bbox values{' '}
254 | {doesNotCrashOnWeirdBboxValues() ? '✅' : '❌'}
255 |
256 |
257 | does not crash on non-integer zoom values{' '}
258 | {doesNotCrashOnNonIntegerZoomValues() ? '✅' : '❌'}
259 |
260 |
261 | make sure same location points are clustered{' '}
262 | {makeSureSameLocationPointsAreClustered() ? '✅' : '❌'}
263 |
264 |
265 | makes sure unclustered point coords are not rounded{' '}
266 | {makesSureUnclusteredPointCoordsAreNotRounded() ? '✅' : '❌'}
267 |
268 |
269 | does not throw on zero items {doesNotThrowOnZeroItems() ? '✅' : '❌'}
270 |
271 |
272 | );
273 | };
274 |
275 | const styles = StyleSheet.create({
276 | container: {
277 | flex: 1,
278 | marginTop: 10,
279 | marginHorizontal: 10,
280 | gap: 20,
281 | },
282 | h2: {
283 | fontSize: 16,
284 | fontWeight: 'bold',
285 | },
286 | buttonContainer: {
287 | position: 'absolute',
288 | bottom: 20,
289 | left: 0,
290 | right: 0,
291 | flexDirection: 'row',
292 | justifyContent: 'space-around',
293 | width: '100%',
294 | },
295 | defaultDataButton: {
296 | marginVertical: 5,
297 | borderRadius: 5,
298 | justifyContent: 'center',
299 | alignItems: 'center',
300 | height: 40,
301 | backgroundColor: '#8eb3ed',
302 | },
303 | button: {
304 | flex: 1,
305 | borderRadius: 5,
306 | justifyContent: 'center',
307 | alignItems: 'center',
308 | height: 40,
309 | backgroundColor: '#8eb3ed',
310 | },
311 | inputContainer: {
312 | flexDirection: 'row',
313 | marginBottom: 10,
314 | },
315 | input: {
316 | flex: 1,
317 | borderWidth: 1,
318 | borderRadius: 5,
319 | borderColor: '#8eb3ed',
320 | height: 40,
321 | },
322 | type: {
323 | flex: 1,
324 | borderRadius: 5,
325 | justifyContent: 'center',
326 | alignItems: 'center',
327 | height: 40,
328 | borderWidth: 2,
329 | marginTop: 20,
330 | },
331 | });
332 |
--------------------------------------------------------------------------------
/example/src/places.ts:
--------------------------------------------------------------------------------
1 | import { places } from './test/fixtures';
2 |
3 | export const initialRegion = {
4 | latitude: 17.150642213990213,
5 | latitudeDelta: 102.40413819692193,
6 | longitude: -90.13384625315666,
7 | longitudeDelta: 72.32146382331848,
8 | };
9 |
10 | export const parsedPlacesData = places.features.map((f, i) => ({
11 | ...f,
12 | properties: { ...f.properties, id: i },
13 | }));
14 |
15 | export const getRandomNum = (min: number, max: number) => {
16 | return Math.floor(Math.random() * (max - min + 1)) + min;
17 | };
18 |
19 | export const getRandomData = (size: number | string) => {
20 | return Array.from({ length: parseInt(`${size}`) }, (_, i) => {
21 | return {
22 | type: 'Feature' as const,
23 | geometry: {
24 | type: 'Point' as const,
25 | coordinates: [getRandomNum(-180, 180), getRandomNum(-90, 90)],
26 | },
27 | properties: {
28 | id: `point-${i}`,
29 | },
30 | };
31 | });
32 | };
33 |
--------------------------------------------------------------------------------
/example/src/test/fixtures/index.ts:
--------------------------------------------------------------------------------
1 | import placesJSON from './places.json';
2 | import placesTile from './places-z0-0-0.json';
3 | import placesTileMin5 from './places-z0-0-0-min5.json';
4 |
5 | type Places = {
6 | type: 'FeatureCollection';
7 | features: supercluster.PointFeature[];
8 | };
9 |
10 | const places = placesJSON as Places;
11 |
12 | export { places, placesTile, placesTileMin5 };
13 |
--------------------------------------------------------------------------------
/example/src/test/fixtures/places-z0-0-0.json:
--------------------------------------------------------------------------------
1 | {
2 | "features": [
3 | {
4 | "type": 1,
5 | "geometry": [[150, 205]],
6 | "tags": {
7 | "cluster": true,
8 | "cluster_id": 164,
9 | "point_count": 16,
10 | "point_count_abbreviated": "16"
11 | },
12 | "id": 164
13 | },
14 | {
15 | "type": 1,
16 | "geometry": [[165, 240]],
17 | "tags": {
18 | "cluster": true,
19 | "cluster_id": 196,
20 | "point_count": 18,
21 | "point_count_abbreviated": "18"
22 | },
23 | "id": 196
24 | },
25 | {
26 | "type": 1,
27 | "geometry": [[179, 303]],
28 | "tags": {
29 | "cluster": true,
30 | "cluster_id": 228,
31 | "point_count": 13,
32 | "point_count_abbreviated": "13"
33 | },
34 | "id": 228
35 | },
36 | {
37 | "type": 1,
38 | "geometry": [[336, 234]],
39 | "tags": {
40 | "cluster": true,
41 | "cluster_id": 260,
42 | "point_count": 8,
43 | "point_count_abbreviated": "8"
44 | },
45 | "id": 260
46 | },
47 | {
48 | "type": 1,
49 | "geometry": [[299, 285]],
50 | "tags": {
51 | "cluster": true,
52 | "cluster_id": 292,
53 | "point_count": 15,
54 | "point_count_abbreviated": "15"
55 | },
56 | "id": 292
57 | },
58 | {
59 | "type": 1,
60 | "geometry": [[71, 419]],
61 | "tags": {
62 | "cluster": true,
63 | "cluster_id": 324,
64 | "point_count": 4,
65 | "point_count_abbreviated": "4"
66 | },
67 | "id": 324
68 | },
69 | {
70 | "type": 1,
71 | "geometry": [[92, 212]],
72 | "tags": {
73 | "cluster": true,
74 | "cluster_id": 420,
75 | "point_count": 6,
76 | "point_count_abbreviated": "6"
77 | },
78 | "id": 420
79 | },
80 | {
81 | "type": 1,
82 | "geometry": [[123, 152]],
83 | "tags": {
84 | "scalerank": 3,
85 | "name": "Cape Churchill",
86 | "comment": null,
87 | "name_alt": null,
88 | "lat_y": 58.752014,
89 | "long_x": -93.182023,
90 | "region": "North America",
91 | "subregion": null,
92 | "featureclass": "cape"
93 | }
94 | },
95 | {
96 | "type": 1,
97 | "geometry": [[162, 345]],
98 | "tags": {
99 | "cluster": true,
100 | "cluster_id": 581,
101 | "point_count": 3,
102 | "point_count_abbreviated": "3"
103 | },
104 | "id": 581
105 | },
106 | {
107 | "type": 1,
108 | "geometry": [[236, 232]],
109 | "tags": {
110 | "cluster": true,
111 | "cluster_id": 580,
112 | "point_count": 4,
113 | "point_count_abbreviated": "4"
114 | },
115 | "id": 580
116 | },
117 | {
118 | "type": 1,
119 | "geometry": [[259, 193]],
120 | "tags": {
121 | "cluster": true,
122 | "cluster_id": 644,
123 | "point_count": 6,
124 | "point_count_abbreviated": "6"
125 | },
126 | "id": 644
127 | },
128 | {
129 | "type": 1,
130 | "geometry": [[80, 336]],
131 | "tags": {
132 | "scalerank": 3,
133 | "name": "Oceanic pole of inaccessibility",
134 | "comment": null,
135 | "name_alt": null,
136 | "lat_y": -48.865032,
137 | "long_x": -123.401986,
138 | "region": "Seven seas (open ocean)",
139 | "subregion": "South Pacific Ocean",
140 | "featureclass": "pole"
141 | }
142 | },
143 | {
144 | "type": 1,
145 | "geometry": [[452, 377]],
146 | "tags": {
147 | "scalerank": 3,
148 | "name": "South Magnetic Pole 2005 (est)",
149 | "comment": null,
150 | "name_alt": null,
151 | "lat_y": -48.865032,
152 | "long_x": -123.401986,
153 | "region": "Antarctica",
154 | "subregion": "Southern Ocean",
155 | "featureclass": "pole"
156 | }
157 | },
158 | {
159 | "type": 1,
160 | "geometry": [[93, 32]],
161 | "tags": {
162 | "scalerank": 3,
163 | "name": "North Magnetic Pole 2005 (est)",
164 | "comment": null,
165 | "name_alt": null,
166 | "lat_y": -48.865032,
167 | "long_x": -123.401986,
168 | "region": "Seven seas (open ocean)",
169 | "subregion": "Arctic Ocean",
170 | "featureclass": "pole"
171 | }
172 | },
173 | {
174 | "type": 1,
175 | "geometry": [[159, 84]],
176 | "tags": {
177 | "scalerank": 4,
178 | "name": "Cape York",
179 | "comment": null,
180 | "name_alt": null,
181 | "lat_y": 76.218919,
182 | "long_x": -68.218612,
183 | "region": "North America",
184 | "subregion": "Greenland",
185 | "featureclass": "cape"
186 | }
187 | },
188 | {
189 | "type": 1,
190 | "geometry": [[220, 147]],
191 | "tags": {
192 | "cluster": true,
193 | "cluster_id": 836,
194 | "point_count": 3,
195 | "point_count_abbreviated": "3"
196 | },
197 | "id": 836
198 | },
199 | {
200 | "type": 1,
201 | "geometry": [[27, 270]],
202 | "tags": {
203 | "cluster": true,
204 | "cluster_id": 900,
205 | "point_count": 6,
206 | "point_count_abbreviated": "6"
207 | },
208 | "id": 900
209 | },
210 | {
211 | "type": 1,
212 | "geometry": [[100, 296]],
213 | "tags": {
214 | "scalerank": 4,
215 | "name": "I. de Pascua",
216 | "comment": null,
217 | "name_alt": "Easter I.",
218 | "lat_y": -27.102117,
219 | "long_x": -109.367953,
220 | "region": "Oceania",
221 | "subregion": "Polynesia",
222 | "featureclass": "island"
223 | }
224 | },
225 | {
226 | "type": 1,
227 | "geometry": [[401, 226]],
228 | "tags": {
229 | "scalerank": 4,
230 | "name": "Plain of Jars",
231 | "comment": null,
232 | "name_alt": null,
233 | "lat_y": 20.550709,
234 | "long_x": 101.890532,
235 | "region": "Asia",
236 | "subregion": null,
237 | "featureclass": "plain"
238 | }
239 | },
240 | {
241 | "type": 1,
242 | "geometry": [[26, 115]],
243 | "tags": {
244 | "cluster": true,
245 | "cluster_id": 1157,
246 | "point_count": 2,
247 | "point_count_abbreviated": "2"
248 | },
249 | "id": 1157
250 | },
251 | {
252 | "type": 1,
253 | "geometry": [[449, 304]],
254 | "tags": {
255 | "cluster": true,
256 | "cluster_id": 1124,
257 | "point_count": 13,
258 | "point_count_abbreviated": "13"
259 | },
260 | "id": 1124
261 | },
262 | {
263 | "type": 1,
264 | "geometry": [[455, 272]],
265 | "tags": {
266 | "cluster": true,
267 | "cluster_id": 1188,
268 | "point_count": 5,
269 | "point_count_abbreviated": "5"
270 | },
271 | "id": 1188
272 | },
273 | {
274 | "type": 1,
275 | "geometry": [[227, 121]],
276 | "tags": {
277 | "cluster": true,
278 | "cluster_id": 1701,
279 | "point_count": 2,
280 | "point_count_abbreviated": "2"
281 | },
282 | "id": 1701
283 | },
284 | {
285 | "type": 1,
286 | "geometry": [[210, 21]],
287 | "tags": {
288 | "scalerank": 5,
289 | "name": "Cape Morris Jesup",
290 | "comment": null,
291 | "name_alt": null,
292 | "lat_y": 83.626331,
293 | "long_x": -32.491541,
294 | "region": "North America",
295 | "subregion": "Greenland",
296 | "featureclass": "cape"
297 | }
298 | },
299 | {
300 | "type": 1,
301 | "geometry": [[484, 235]],
302 | "tags": {
303 | "cluster": true,
304 | "cluster_id": 1380,
305 | "point_count": 13,
306 | "point_count_abbreviated": "13"
307 | },
308 | "id": 1380
309 | },
310 | {
311 | "type": 1,
312 | "geometry": [[503, 260]],
313 | "tags": {
314 | "cluster": true,
315 | "cluster_id": 1925,
316 | "point_count": 4,
317 | "point_count_abbreviated": "4"
318 | },
319 | "id": 1925
320 | },
321 | {
322 | "type": 1,
323 | "geometry": [[502, 308]],
324 | "tags": {
325 | "scalerank": 5,
326 | "name": "Cape Reinga",
327 | "comment": null,
328 | "name_alt": null,
329 | "lat_y": -34.432767,
330 | "long_x": 172.7285,
331 | "region": "Oceania",
332 | "subregion": "New Zealand",
333 | "featureclass": "cape"
334 | },
335 | "id": 737
336 | },
337 | {
338 | "type": 1,
339 | "geometry": [[475, 165]],
340 | "tags": {
341 | "cluster": true,
342 | "cluster_id": 1668,
343 | "point_count": 7,
344 | "point_count_abbreviated": "7"
345 | },
346 | "id": 1668
347 | },
348 | {
349 | "type": 1,
350 | "geometry": [[511, 142]],
351 | "tags": {
352 | "scalerank": 5,
353 | "name": "Cape Navarin",
354 | "comment": null,
355 | "name_alt": null,
356 | "lat_y": 62.327239,
357 | "long_x": 179.074225,
358 | "region": "Asia",
359 | "subregion": null,
360 | "featureclass": "cape"
361 | }
362 | },
363 | {
364 | "type": 1,
365 | "geometry": [[469, 106]],
366 | "tags": {
367 | "scalerank": 5,
368 | "name": "Cape Lopatka",
369 | "comment": null,
370 | "name_alt": null,
371 | "lat_y": 71.907853,
372 | "long_x": 150.066042,
373 | "region": "Asia",
374 | "subregion": null,
375 | "featureclass": "cape"
376 | }
377 | },
378 | {
379 | "type": 1,
380 | "geometry": [[292, 110]],
381 | "tags": {
382 | "scalerank": 5,
383 | "name": "Nordkapp",
384 | "comment": null,
385 | "name_alt": null,
386 | "lat_y": 71.18337,
387 | "long_x": 25.662398,
388 | "region": "Europe",
389 | "subregion": null,
390 | "featureclass": "cape"
391 | }
392 | },
393 | {
394 | "type": 1,
395 | "geometry": [[202, 262]],
396 | "tags": {
397 | "cluster": true,
398 | "cluster_id": 4134,
399 | "point_count": 2,
400 | "point_count_abbreviated": "2"
401 | },
402 | "id": 4134
403 | },
404 | {
405 | "type": 1,
406 | "geometry": [[-28, 235]],
407 | "tags": {
408 | "cluster": true,
409 | "cluster_id": 1380,
410 | "point_count": 13,
411 | "point_count_abbreviated": "13"
412 | },
413 | "id": 1380
414 | },
415 | {
416 | "type": 1,
417 | "geometry": [[-9, 260]],
418 | "tags": {
419 | "cluster": true,
420 | "cluster_id": 1925,
421 | "point_count": 4,
422 | "point_count_abbreviated": "4"
423 | },
424 | "id": 1925
425 | },
426 | {
427 | "type": 1,
428 | "geometry": [[-10, 308]],
429 | "tags": {
430 | "scalerank": 5,
431 | "name": "Cape Reinga",
432 | "comment": null,
433 | "name_alt": null,
434 | "lat_y": -34.432767,
435 | "long_x": 172.7285,
436 | "region": "Oceania",
437 | "subregion": "New Zealand",
438 | "featureclass": "cape"
439 | },
440 | "id": 737
441 | },
442 | {
443 | "type": 1,
444 | "geometry": [[-37, 165]],
445 | "tags": {
446 | "cluster": true,
447 | "cluster_id": 1668,
448 | "point_count": 7,
449 | "point_count_abbreviated": "7"
450 | },
451 | "id": 1668
452 | },
453 | {
454 | "type": 1,
455 | "geometry": [[-1, 142]],
456 | "tags": {
457 | "scalerank": 5,
458 | "name": "Cape Navarin",
459 | "comment": null,
460 | "name_alt": null,
461 | "lat_y": 62.327239,
462 | "long_x": 179.074225,
463 | "region": "Asia",
464 | "subregion": null,
465 | "featureclass": "cape"
466 | }
467 | },
468 | {
469 | "type": 1,
470 | "geometry": [[539, 270]],
471 | "tags": {
472 | "cluster": true,
473 | "cluster_id": 900,
474 | "point_count": 6,
475 | "point_count_abbreviated": "6"
476 | },
477 | "id": 900
478 | },
479 | {
480 | "type": 1,
481 | "geometry": [[538, 115]],
482 | "tags": {
483 | "cluster": true,
484 | "cluster_id": 1157,
485 | "point_count": 2,
486 | "point_count_abbreviated": "2"
487 | },
488 | "id": 1157
489 | }
490 | ]
491 | }
492 |
--------------------------------------------------------------------------------
/example/src/utils.ts:
--------------------------------------------------------------------------------
1 | export const superclusterOptions = {
2 | minZoom: 0,
3 | maxZoom: 16,
4 | radius: 40,
5 | extent: 512,
6 | minPoints: 2,
7 | };
8 |
9 | export const PerformanceNow =
10 | // @ts-ignore
11 | (global.performance && global.performance.now) ||
12 | // @ts-ignore
13 | global.performanceNow ||
14 | // @ts-ignore
15 | global.nativePerformanceNow ||
16 | (() => {
17 | try {
18 | var now = require('fbjs/lib/performanceNow');
19 | } finally {
20 | return now;
21 | }
22 | })();
23 |
24 | const fixed = (n: number) => (Math.trunc(n) === n ? n + '' : n.toFixed(3));
25 |
26 | export const timeDelta = (start: number, end: number) => fixed(end - start);
27 |
28 | export const deepEqualWithoutIds = (x: any, y: any) => {
29 | if (x === y) return true;
30 | // if both x and y are null or undefined and exactly the same
31 |
32 | if (!(x instanceof Object) || !(y instanceof Object)) return false;
33 | // if they are not strictly equal, they both need to be Objects
34 |
35 | if (x.constructor !== y.constructor) return false;
36 | // they must have the exact same prototype chain, the closest we can do is
37 | // test there constructor.
38 |
39 | for (var p in x) {
40 | if (p === 'id' || p === 'cluster_id') continue;
41 | // skip id and cluster_id
42 |
43 | if (!x.hasOwnProperty(p)) continue;
44 | // other properties were tested using x.constructor === y.constructor
45 |
46 | if (!y.hasOwnProperty(p)) return false;
47 | // allows to compare x[ p ] and y[ p ] when set to undefined
48 |
49 | if (x[p] === y[p]) continue;
50 | // if they have the same strict value or identity then they are equal
51 |
52 | if (typeof x[p] !== 'object') return false;
53 | // Numbers, Strings, Functions, Booleans must be strictly equal
54 |
55 | if (!deepEqualWithoutIds(x[p], y[p])) return false;
56 | // Objects and Arrays must be tested recursively
57 | }
58 |
59 | for (p in y) {
60 | if (p === 'id' || p === 'cluster_id') continue;
61 | // skip id and cluster_id
62 |
63 | if (y.hasOwnProperty(p) && !x.hasOwnProperty(p)) return false;
64 | // allows x[ p ] to be set to undefined
65 | }
66 |
67 | return true;
68 | };
69 |
--------------------------------------------------------------------------------
/ios/Clusterer.h:
--------------------------------------------------------------------------------
1 | #if __has_include("RCTBridgeModule.h")
2 | #import "RCTBridgeModule.h"
3 | #else
4 | #import
5 | #import
6 | #endif
7 |
8 | @interface Clusterer : NSObject
9 |
10 | @property (nonatomic, assign) BOOL setBridgeOnMainQueue;
11 |
12 | @end
13 |
14 |
--------------------------------------------------------------------------------
/ios/Clusterer.mm:
--------------------------------------------------------------------------------
1 | #import "Clusterer.h"
2 | #import
3 | #import
4 | #import
5 | #import
6 |
7 | #import "react-native-clusterer.h"
8 |
9 | using namespace facebook::jsi;
10 | using namespace std;
11 |
12 | @implementation Clusterer
13 |
14 | @synthesize bridge = _bridge;
15 | @synthesize methodQueue = _methodQueue;
16 |
17 | RCT_EXPORT_MODULE()
18 |
19 | + (BOOL)requiresMainQueueSetup {
20 |
21 | return YES;
22 | }
23 |
24 | // Installing JSI Bindings as done by
25 | // https://github.com/mrousavy/react-native-mmkv
26 | RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(install)
27 | {
28 | RCTBridge* bridge = [RCTBridge currentBridge];
29 | RCTCxxBridge* cxxBridge = (RCTCxxBridge*)bridge;
30 | if (cxxBridge == nil) {
31 | return @false;
32 | }
33 |
34 | auto jsiRuntime = (jsi::Runtime*) cxxBridge.runtime;
35 | if (jsiRuntime == nil) {
36 | return @false;
37 | }
38 |
39 | clusterer::install(*(facebook::jsi::Runtime *)jsiRuntime);
40 |
41 | return @true;
42 | }
43 |
44 | @end
45 |
--------------------------------------------------------------------------------
/ios/Clusterer.xcodeproj/project.pbxproj:
--------------------------------------------------------------------------------
1 | // !$*UTF8*$!
2 | {
3 | archiveVersion = 1;
4 | classes = {
5 | };
6 | objectVersion = 46;
7 | objects = {
8 |
9 | /* Begin PBXBuildFile section */
10 | 5E555C0D2413F4C50049A1A2 /* Clusterer.mm in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* Clusterer.mm */; };
11 | /* End PBXBuildFile section */
12 |
13 | /* Begin PBXCopyFilesBuildPhase section */
14 | 58B511D91A9E6C8500147676 /* CopyFiles */ = {
15 | isa = PBXCopyFilesBuildPhase;
16 | buildActionMask = 2147483647;
17 | dstPath = "include/$(PRODUCT_NAME)";
18 | dstSubfolderSpec = 16;
19 | files = (
20 | );
21 | runOnlyForDeploymentPostprocessing = 0;
22 | };
23 | /* End PBXCopyFilesBuildPhase section */
24 |
25 | /* Begin PBXFileReference section */
26 | 134814201AA4EA6300B7C361 /* libClusterer.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libClusterer.a; sourceTree = BUILT_PRODUCTS_DIR; };
27 | B3E7B5891CC2AC0600A0062D /* Clusterer.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = Clusterer.mm; sourceTree = ""; };
28 | /* End PBXFileReference section */
29 |
30 | /* Begin PBXFrameworksBuildPhase section */
31 | 58B511D81A9E6C8500147676 /* Frameworks */ = {
32 | isa = PBXFrameworksBuildPhase;
33 | buildActionMask = 2147483647;
34 | files = (
35 | );
36 | runOnlyForDeploymentPostprocessing = 0;
37 | };
38 | /* End PBXFrameworksBuildPhase section */
39 |
40 | /* Begin PBXGroup section */
41 | 134814211AA4EA7D00B7C361 /* Products */ = {
42 | isa = PBXGroup;
43 | children = (
44 | 134814201AA4EA6300B7C361 /* libClusterer.a */,
45 | );
46 | name = Products;
47 | sourceTree = "";
48 | };
49 | 58B511D21A9E6C8500147676 = {
50 | isa = PBXGroup;
51 | children = (
52 | B3E7B5891CC2AC0600A0062D /* Clusterer.mm */,
53 | 134814211AA4EA7D00B7C361 /* Products */,
54 | );
55 | sourceTree = "";
56 | };
57 | /* End PBXGroup section */
58 |
59 | /* Begin PBXNativeTarget section */
60 | 58B511DA1A9E6C8500147676 /* Clusterer */ = {
61 | isa = PBXNativeTarget;
62 | buildConfigurationList = 58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "Clusterer" */;
63 | buildPhases = (
64 | 58B511D71A9E6C8500147676 /* Sources */,
65 | 58B511D81A9E6C8500147676 /* Frameworks */,
66 | 58B511D91A9E6C8500147676 /* CopyFiles */,
67 | );
68 | buildRules = (
69 | );
70 | dependencies = (
71 | );
72 | name = Clusterer;
73 | productName = RCTDataManager;
74 | productReference = 134814201AA4EA6300B7C361 /* libClusterer.a */;
75 | productType = "com.apple.product-type.library.static";
76 | };
77 | /* End PBXNativeTarget section */
78 |
79 | /* Begin PBXProject section */
80 | 58B511D31A9E6C8500147676 /* Project object */ = {
81 | isa = PBXProject;
82 | attributes = {
83 | LastUpgradeCheck = 0920;
84 | ORGANIZATIONNAME = Facebook;
85 | TargetAttributes = {
86 | 58B511DA1A9E6C8500147676 = {
87 | CreatedOnToolsVersion = 6.1.1;
88 | };
89 | };
90 | };
91 | buildConfigurationList = 58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "Clusterer" */;
92 | compatibilityVersion = "Xcode 3.2";
93 | developmentRegion = English;
94 | hasScannedForEncodings = 0;
95 | knownRegions = (
96 | English,
97 | en,
98 | );
99 | mainGroup = 58B511D21A9E6C8500147676;
100 | productRefGroup = 58B511D21A9E6C8500147676;
101 | projectDirPath = "";
102 | projectRoot = "";
103 | targets = (
104 | 58B511DA1A9E6C8500147676 /* Clusterer */,
105 | );
106 | };
107 | /* End PBXProject section */
108 |
109 | /* Begin PBXSourcesBuildPhase section */
110 | 58B511D71A9E6C8500147676 /* Sources */ = {
111 | isa = PBXSourcesBuildPhase;
112 | buildActionMask = 2147483647;
113 | files = (
114 | 5E555C0D2413F4C50049A1A2 /* Clusterer.mm in Sources */,
115 | );
116 | runOnlyForDeploymentPostprocessing = 0;
117 | };
118 | /* End PBXSourcesBuildPhase section */
119 |
120 | /* Begin XCBuildConfiguration section */
121 | 58B511ED1A9E6C8500147676 /* Debug */ = {
122 | isa = XCBuildConfiguration;
123 | buildSettings = {
124 | ALWAYS_SEARCH_USER_PATHS = NO;
125 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
126 | CLANG_CXX_LIBRARY = "libc++";
127 | CLANG_ENABLE_MODULES = YES;
128 | CLANG_ENABLE_OBJC_ARC = YES;
129 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
130 | CLANG_WARN_BOOL_CONVERSION = YES;
131 | CLANG_WARN_COMMA = YES;
132 | CLANG_WARN_CONSTANT_CONVERSION = YES;
133 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
134 | CLANG_WARN_EMPTY_BODY = YES;
135 | CLANG_WARN_ENUM_CONVERSION = YES;
136 | CLANG_WARN_INFINITE_RECURSION = YES;
137 | CLANG_WARN_INT_CONVERSION = YES;
138 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
139 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
140 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
141 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
142 | CLANG_WARN_STRICT_PROTOTYPES = YES;
143 | CLANG_WARN_SUSPICIOUS_MOVE = YES;
144 | CLANG_WARN_UNREACHABLE_CODE = YES;
145 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
146 | COPY_PHASE_STRIP = NO;
147 | ENABLE_STRICT_OBJC_MSGSEND = YES;
148 | ENABLE_TESTABILITY = YES;
149 | GCC_C_LANGUAGE_STANDARD = gnu99;
150 | GCC_DYNAMIC_NO_PIC = NO;
151 | GCC_NO_COMMON_BLOCKS = YES;
152 | GCC_OPTIMIZATION_LEVEL = 0;
153 | GCC_PREPROCESSOR_DEFINITIONS = (
154 | "DEBUG=1",
155 | "$(inherited)",
156 | );
157 | GCC_SYMBOLS_PRIVATE_EXTERN = NO;
158 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
159 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
160 | GCC_WARN_UNDECLARED_SELECTOR = YES;
161 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
162 | GCC_WARN_UNUSED_FUNCTION = YES;
163 | GCC_WARN_UNUSED_VARIABLE = YES;
164 | IPHONEOS_DEPLOYMENT_TARGET = 8.0;
165 | MTL_ENABLE_DEBUG_INFO = YES;
166 | ONLY_ACTIVE_ARCH = YES;
167 | SDKROOT = iphoneos;
168 | };
169 | name = Debug;
170 | };
171 | 58B511EE1A9E6C8500147676 /* Release */ = {
172 | isa = XCBuildConfiguration;
173 | buildSettings = {
174 | ALWAYS_SEARCH_USER_PATHS = NO;
175 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
176 | CLANG_CXX_LIBRARY = "libc++";
177 | CLANG_ENABLE_MODULES = YES;
178 | CLANG_ENABLE_OBJC_ARC = YES;
179 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
180 | CLANG_WARN_BOOL_CONVERSION = YES;
181 | CLANG_WARN_COMMA = YES;
182 | CLANG_WARN_CONSTANT_CONVERSION = YES;
183 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
184 | CLANG_WARN_EMPTY_BODY = YES;
185 | CLANG_WARN_ENUM_CONVERSION = YES;
186 | CLANG_WARN_INFINITE_RECURSION = YES;
187 | CLANG_WARN_INT_CONVERSION = YES;
188 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
189 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
190 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
191 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
192 | CLANG_WARN_STRICT_PROTOTYPES = YES;
193 | CLANG_WARN_SUSPICIOUS_MOVE = YES;
194 | CLANG_WARN_UNREACHABLE_CODE = YES;
195 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
196 | COPY_PHASE_STRIP = YES;
197 | ENABLE_NS_ASSERTIONS = NO;
198 | ENABLE_STRICT_OBJC_MSGSEND = YES;
199 | GCC_C_LANGUAGE_STANDARD = gnu99;
200 | GCC_NO_COMMON_BLOCKS = YES;
201 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
202 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
203 | GCC_WARN_UNDECLARED_SELECTOR = YES;
204 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
205 | GCC_WARN_UNUSED_FUNCTION = YES;
206 | GCC_WARN_UNUSED_VARIABLE = YES;
207 | IPHONEOS_DEPLOYMENT_TARGET = 8.0;
208 | MTL_ENABLE_DEBUG_INFO = NO;
209 | SDKROOT = iphoneos;
210 | VALIDATE_PRODUCT = YES;
211 | };
212 | name = Release;
213 | };
214 | 58B511F01A9E6C8500147676 /* Debug */ = {
215 | isa = XCBuildConfiguration;
216 | buildSettings = {
217 | HEADER_SEARCH_PATHS = (
218 | "$(inherited)",
219 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
220 | "$(SRCROOT)/../../../React/**",
221 | "$(SRCROOT)/../../react-native/React/**",
222 | );
223 | LIBRARY_SEARCH_PATHS = "$(inherited)";
224 | OTHER_LDFLAGS = "-ObjC";
225 | PRODUCT_NAME = Clusterer;
226 | SKIP_INSTALL = YES;
227 | };
228 | name = Debug;
229 | };
230 | 58B511F11A9E6C8500147676 /* Release */ = {
231 | isa = XCBuildConfiguration;
232 | buildSettings = {
233 | HEADER_SEARCH_PATHS = (
234 | "$(inherited)",
235 | /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
236 | "$(SRCROOT)/../../../React/**",
237 | "$(SRCROOT)/../../react-native/React/**",
238 | );
239 | LIBRARY_SEARCH_PATHS = "$(inherited)";
240 | OTHER_LDFLAGS = "-ObjC";
241 | PRODUCT_NAME = Clusterer;
242 | SKIP_INSTALL = YES;
243 | };
244 | name = Release;
245 | };
246 | /* End XCBuildConfiguration section */
247 |
248 | /* Begin XCConfigurationList section */
249 | 58B511D61A9E6C8500147676 /* Build configuration list for PBXProject "Clusterer" */ = {
250 | isa = XCConfigurationList;
251 | buildConfigurations = (
252 | 58B511ED1A9E6C8500147676 /* Debug */,
253 | 58B511EE1A9E6C8500147676 /* Release */,
254 | );
255 | defaultConfigurationIsVisible = 0;
256 | defaultConfigurationName = Release;
257 | };
258 | 58B511EF1A9E6C8500147676 /* Build configuration list for PBXNativeTarget "Clusterer" */ = {
259 | isa = XCConfigurationList;
260 | buildConfigurations = (
261 | 58B511F01A9E6C8500147676 /* Debug */,
262 | 58B511F11A9E6C8500147676 /* Release */,
263 | );
264 | defaultConfigurationIsVisible = 0;
265 | defaultConfigurationName = Release;
266 | };
267 | /* End XCConfigurationList section */
268 | };
269 | rootObject = 58B511D31A9E6C8500147676 /* Project object */;
270 | }
271 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-clusterer",
3 | "version": "3.0.0",
4 | "description": "React Native clustering library using C++ Supercluster implementation",
5 | "main": "lib/commonjs/index",
6 | "module": "lib/module/index",
7 | "types": "lib/typescript/index.d.ts",
8 | "react-native": "src/index",
9 | "source": "src/index",
10 | "files": [
11 | "src",
12 | "lib",
13 | "android",
14 | "ios",
15 | "cpp",
16 | "react-native-clusterer.podspec",
17 | "!lib/typescript/example",
18 | "!android/build",
19 | "!ios/build",
20 | "!**/__tests__",
21 | "!**/__fixtures__",
22 | "!**/__mocks__",
23 | "!android/.cxx",
24 | "!android/.gradle"
25 | ],
26 | "scripts": {
27 | "test": "jest",
28 | "typescript": "tsc --noEmit",
29 | "lint": "eslint \"**/*.{js,ts,tsx}\"",
30 | "prepare": "bob build",
31 | "release": "release-it",
32 | "example": "yarn --cwd example",
33 | "pods": "cd example && pod-install --quiet",
34 | "bootstrap": "yarn example && yarn && yarn pods",
35 | "clang-format": "find cpp/ -iname *.h -o -iname *.cpp | xargs clang-format -i"
36 | },
37 | "keywords": [
38 | "react",
39 | "native",
40 | "react-native",
41 | "react-native-maps",
42 | "map",
43 | "maps",
44 | "mapview",
45 | "ios",
46 | "android",
47 | "cluster",
48 | "clusters",
49 | "clustering",
50 | "clustering-algorithm",
51 | "super",
52 | "supercluster"
53 | ],
54 | "repository": "https://github.com/JiriHoffmann/react-native-clusterer",
55 | "author": "Jiri Hoffmann (https://github.com/JiriHoffmann)",
56 | "license": "MIT",
57 | "bugs": {
58 | "url": "https://github.com/JiriHoffmann/react-native-clusterer/issues"
59 | },
60 | "homepage": "https://aci.cis.gvsu.edu/2022/03/28/map-marker-clustering-in-react-native-is-now-easier",
61 | "publishConfig": {
62 | "registry": "https://registry.npmjs.org/"
63 | },
64 | "devDependencies": {
65 | "@commitlint/config-conventional": "^14.1.0",
66 | "@react-native-community/eslint-config": "^3.0.1",
67 | "@release-it/conventional-changelog": "^3.3.0",
68 | "@types/jest": "^27.0.2",
69 | "@types/mapbox__geo-viewport": "^0.4.1",
70 | "@types/react": "^17.0.34",
71 | "@types/react-native": "0.66.3",
72 | "clang-format": "^1.6.0",
73 | "commitlint": "^14.1.0",
74 | "eslint": "^8.2.0",
75 | "eslint-config-prettier": "^8.3.0",
76 | "eslint-plugin-prettier": "^4.0.0",
77 | "husky": "^7.0.4",
78 | "jest": "^27.3.1",
79 | "pod-install": "^0.1.28",
80 | "prettier": "^2.4.1",
81 | "react": "17.0.2",
82 | "react-native": "0.66.3",
83 | "react-native-builder-bob": "^0.18.2",
84 | "release-it": "^14.11.6",
85 | "typescript": "^4.4.4"
86 | },
87 | "peerDependencies": {
88 | "react": "*",
89 | "react-native": "*"
90 | },
91 | "jest": {
92 | "preset": "react-native",
93 | "modulePathIgnorePatterns": [
94 | "/example/node_modules",
95 | "/lib/"
96 | ]
97 | },
98 | "commitlint": {
99 | "extends": [
100 | "@commitlint/config-conventional"
101 | ]
102 | },
103 | "release-it": {
104 | "git": {
105 | "commitMessage": "chore: release ${version}",
106 | "tagName": "v${version}"
107 | },
108 | "npm": {
109 | "publish": true
110 | },
111 | "github": {
112 | "release": true
113 | },
114 | "plugins": {
115 | "@release-it/conventional-changelog": {
116 | "preset": "angular"
117 | }
118 | }
119 | },
120 | "eslintConfig": {
121 | "root": true,
122 | "extends": [
123 | "@react-native-community",
124 | "prettier"
125 | ],
126 | "rules": {
127 | "prettier/prettier": [
128 | "error",
129 | {
130 | "quoteProps": "consistent",
131 | "singleQuote": true,
132 | "tabWidth": 2,
133 | "trailingComma": "es5",
134 | "useTabs": false
135 | }
136 | ]
137 | }
138 | },
139 | "eslintIgnore": [
140 | "node_modules/",
141 | "lib/"
142 | ],
143 | "prettier": {
144 | "quoteProps": "consistent",
145 | "singleQuote": true,
146 | "tabWidth": 2,
147 | "trailingComma": "es5",
148 | "useTabs": false
149 | },
150 | "react-native-builder-bob": {
151 | "source": "src",
152 | "output": "lib",
153 | "targets": [
154 | "commonjs",
155 | "module",
156 | [
157 | "typescript",
158 | {
159 | "project": "tsconfig.build.json"
160 | }
161 | ]
162 | ]
163 | },
164 | "dependencies": {
165 | "@mapbox/geo-viewport": "^0.5.0",
166 | "@types/geojson": "^7946.0.8"
167 | }
168 | }
169 |
--------------------------------------------------------------------------------
/react-native-clusterer.podspec:
--------------------------------------------------------------------------------
1 | require "json"
2 |
3 | package = JSON.parse(File.read(File.join(__dir__, "package.json")))
4 |
5 | Pod::Spec.new do |s|
6 | s.name = "react-native-clusterer"
7 | s.version = package["version"]
8 | s.summary = package["description"]
9 | s.homepage = package["homepage"]
10 | s.license = package["license"]
11 | s.authors = package["author"]
12 |
13 | s.platforms = { :ios => "10.0" }
14 | s.source = { :git => "https://github.com/JiriHoffmann/react-native-clusterer.git", :tag => "#{s.version}" }
15 |
16 | s.source_files = "ios/**/*.{h,m,mm}", "cpp/**/*.{h,cpp,hpp}"
17 |
18 | s.dependency "React-Core"
19 | end
20 |
--------------------------------------------------------------------------------
/scripts/bootstrap.js:
--------------------------------------------------------------------------------
1 | const os = require('os');
2 | const path = require('path');
3 | const child_process = require('child_process');
4 |
5 | const root = path.resolve(__dirname, '..');
6 | const args = process.argv.slice(2);
7 | const options = {
8 | cwd: process.cwd(),
9 | env: process.env,
10 | stdio: 'inherit',
11 | encoding: 'utf-8',
12 | };
13 |
14 | if (os.type() === 'Windows_NT') {
15 | options.shell = true
16 | }
17 |
18 | let result;
19 |
20 | if (process.cwd() !== root || args.length) {
21 | // We're not in the root of the project, or additional arguments were passed
22 | // In this case, forward the command to `yarn`
23 | result = child_process.spawnSync('yarn', args, options);
24 | } else {
25 | // If `yarn` is run without arguments, perform bootstrap
26 | result = child_process.spawnSync('yarn', ['bootstrap'], options);
27 | }
28 |
29 | process.exitCode = result.status;
30 |
--------------------------------------------------------------------------------
/src/Clusterer.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 | import { useClusterer } from './useClusterer';
3 | import type Supercluster from './types';
4 | import type { MapDimensions, Region } from './types';
5 |
6 | export interface ClustererProps {
7 | data: Array>;
8 | mapDimensions: MapDimensions;
9 | region: Region;
10 | renderItem: (
11 | item: Supercluster.PointOrClusterFeature,
12 | index: number,
13 | array: Supercluster.PointOrClusterFeature
[]
14 | ) => React.ReactElement;
15 | options?: Supercluster.Options
;
16 | }
17 |
18 | export function Clusterer
({
19 | data,
20 | options,
21 | region,
22 | mapDimensions,
23 | renderItem,
24 | }: ClustererProps
): ReactElement {
25 | const [points] = useClusterer(data, mapDimensions, region, options);
26 |
27 | return <>{points.map(renderItem)}>;
28 | }
29 |
--------------------------------------------------------------------------------
/src/Supercluster.ts:
--------------------------------------------------------------------------------
1 | import { NativeModules, Platform } from 'react-native';
2 | import GeoViewport from '@mapbox/geo-viewport';
3 | import { getMarkersCoordinates, getMarkersRegion, regionToBBox } from './utils';
4 |
5 | import type * as GeoJSON from 'geojson';
6 | import type { MapDimensions, Region } from './types';
7 | import type Supercluster from './types';
8 |
9 | const module = NativeModules.Clusterer;
10 |
11 | if (
12 | module &&
13 | typeof module.install === 'function' &&
14 | !(global as any).createSupercluster
15 | ) {
16 | module.install();
17 | }
18 |
19 | const createSupercluster = (global as any).createSupercluster;
20 | const defaultOptions = {
21 | minZoom: 0, // min zoom to generate clusters on
22 | maxZoom: 16, // max zoom level to cluster the points on
23 | minPoints: 2, // minimum points to form a cluster
24 | radius: 40, // cluster radius in pixels
25 | extent: 512, // tile extent (radius is calculated relative to it)
26 | log: false, // whether to log timing info
27 | // whether to generate numeric ids for input features (in vector tiles)
28 | generateId: false,
29 | };
30 |
31 | export default class SuperclusterClass<
32 | P extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps,
33 | C extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps
34 | > {
35 | private cppInstance: any = undefined;
36 | private options: Required>;
37 |
38 | constructor(options?: Supercluster.Options) {
39 | if (!createSupercluster) {
40 | throw new Error(
41 | `The package 'react-native-clusterer' doesn't seem to be linked. Make sure: \n\n` +
42 | Platform.select({
43 | ios: "- You have run 'pod install'\n",
44 | default: '',
45 | }) +
46 | '- You rebuilt the app after installing the package\n' +
47 | '- You are not using Expo Go, but an Expo development client instead\n'
48 | );
49 | }
50 |
51 | this.options = { ...defaultOptions, ...options };
52 | }
53 |
54 | /**
55 | * Loads an array of GeoJSON Feature objects. Each feature's geometry
56 | * must be a GeoJSON Point. Once loaded, index is immutable.
57 | *
58 | * @param points Array of GeoJSON Features, the geometries being GeoJSON Points.
59 | */
60 | load(points: Array>): SuperclusterClass {
61 | this.cppInstance = createSupercluster(points, this.options);
62 | return this;
63 | }
64 |
65 | /**
66 | * Returns an array of clusters and points as `GeoJSON.Feature` objects
67 | * for the given bounding box (`bbox`) and zoom level (`zoom`).
68 | *
69 | * @param bbox Bounding box (`[westLng, southLat, eastLng, northLat]`).
70 | * @param zoom Zoom level.
71 | */
72 | getClusters(
73 | bbox: GeoJSON.BBox,
74 | zoom: number
75 | ): Array | Supercluster.PointFeature> {
76 | if (!this.cppInstance) return [];
77 |
78 | return this.cppInstance
79 | .getClusters(bbox, zoom)
80 | .map(this.addExpansionRegionToCluster);
81 | }
82 |
83 | /**
84 | * Returns an array of clusters and points as `GeoJSON.Feature` objects
85 | * for the given bounding box (`bbox`) and zoom level (`zoom`).
86 | *
87 | * @param bbox Bounding box (`[westLng, southLat, eastLng, northLat]`).
88 | * @param zoom Zoom level.
89 | */
90 | getClustersFromRegion(
91 | region: Region,
92 | mapDimensions: MapDimensions
93 | ): Array | Supercluster.PointFeature> {
94 | if (!this.cppInstance) return [];
95 |
96 | const bbox = regionToBBox(region);
97 |
98 | if (region.longitudeDelta >= 40)
99 | return this.cppInstance
100 | .getClusters(bbox, this.options.minZoom)
101 | .map(this.addExpansionRegionToCluster);
102 |
103 | const viewport = GeoViewport.viewport(
104 | bbox,
105 | [mapDimensions.width, mapDimensions.height],
106 | this.options.minZoom,
107 | this.options.maxZoom + 1,
108 | this.options.extent
109 | );
110 |
111 | return this.cppInstance
112 | .getClusters(bbox, viewport.zoom)
113 | .map(this.addExpansionRegionToCluster);
114 | }
115 |
116 | /**
117 | * For a given zoom and x/y coordinates, returns a
118 | * [geojson-vt](https://github.com/mapbox/geojson-vt)-compatible JSON
119 | * tile object with cluster any point features.
120 | */
121 | getTile(x: number, y: number, zoom: number): Supercluster.Tile | null {
122 | if (!this.cppInstance) return null;
123 |
124 | return { features: this.cppInstance.getTile(x, y, zoom) };
125 | }
126 |
127 | /**
128 | * Returns the children of a cluster (on the next zoom level).
129 | *
130 | * @param clusterId Cluster ID (`cluster_id` value from feature properties).
131 | * @throws {Error} If `clusterId` does not exist.
132 | */
133 | getChildren(
134 | clusterId: number
135 | ): Array | Supercluster.PointFeature> {
136 | if (!this.cppInstance) return [];
137 |
138 | return this.cppInstance.getChildren(clusterId);
139 | }
140 |
141 | /**
142 | * Returns all the points of a cluster (with pagination support).
143 | *
144 | * @param clusterId Cluster ID (`cluster_id` value from feature properties).
145 | * @param limit The number of points to return (set to `Infinity` for all points).
146 | * @param offset The amount of points to skip (for pagination).
147 | */
148 | getLeaves(
149 | clusterId: number,
150 | limit?: number,
151 | offset?: number
152 | ): Array> {
153 | if (!this.cppInstance) return [];
154 |
155 | return this.cppInstance.getLeaves(clusterId, limit ?? 10, offset ?? 0);
156 | }
157 |
158 | /**
159 | * Returns the zoom level on which the cluster expands into several
160 | * children (useful for "click to zoom" feature).
161 | *
162 | * @param clusterId Cluster ID (`cluster_id` value from feature properties).
163 | */
164 | getClusterExpansionZoom(clusterId: number): number {
165 | if (!this.cppInstance) return 0;
166 |
167 | return this.cppInstance.getClusterExpansionZoom(clusterId);
168 | }
169 |
170 | /**
171 | * Returns a region containing the center of all the points in a cluster
172 | * and the delta value by which it should be zoomed out to see all the points.
173 | * (usefull for animating a MapView after a cluster press).
174 | * @param clusterId Cluster ID (`cluster_id` value from feature properties).
175 | */
176 | getClusterExpansionRegion = (clusterId: number): Region => {
177 | if (!this.cppInstance)
178 | return { latitude: 0, longitude: 0, latitudeDelta: 0, longitudeDelta: 0 };
179 |
180 | const clusterMarkersCoordinates = this.getMarkersInCluster(clusterId).map(
181 | getMarkersCoordinates
182 | );
183 |
184 | return getMarkersRegion(clusterMarkersCoordinates);
185 | };
186 |
187 | /**
188 | * Destroy the instance.
189 | * @deprecated Removed in 1.2.0.
190 | * @returns True if cluster exists and was destroyed, else false.
191 | */
192 | destroy(): boolean {
193 | console.warn(
194 | 'React-Native-Clusterer: destroy function is no longer needed'
195 | );
196 | return false;
197 | }
198 |
199 | private getMarkersInCluster = (
200 | clusterId: number
201 | ): Array> => {
202 | const clusterChildren = this.getChildren(clusterId);
203 |
204 | if (clusterChildren.length > 1) {
205 | return clusterChildren;
206 | }
207 | return this.getMarkersInCluster(clusterChildren[0]!.id as number);
208 | };
209 |
210 | private addExpansionRegionToCluster = (
211 | feature: Supercluster.PointFeature | Supercluster.ClusterFeatureBase
212 | ) => {
213 | if (feature.properties?.cluster_id) {
214 | (
215 | feature as Supercluster.ClusterFeature
216 | ).properties.getExpansionRegion = () =>
217 | this.getClusterExpansionRegion(feature.properties!.cluster_id);
218 | }
219 | return feature;
220 | };
221 | }
222 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { Clusterer } from './Clusterer';
2 | import Supercluster from './Supercluster';
3 | import type supercluster from './types';
4 | import { useClusterer } from './useClusterer';
5 | import { isPointCluster, coordsToGeoJSONFeature } from './utils';
6 | export default Supercluster;
7 | export {
8 | Clusterer,
9 | supercluster,
10 | useClusterer,
11 | isPointCluster,
12 | coordsToGeoJSONFeature,
13 | };
14 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | // Modified version of:
2 | // Type definitions for supercluster 5.0
3 | // Project: https://github.com/mapbox/supercluster
4 | // Definitions by: Denis Carriere
5 | // Nick Zahn
6 | // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
7 | // TypeScript Version: 2.3
8 |
9 | import type * as GeoJSON from 'geojson';
10 |
11 | export type BBox = [number, number, number, number];
12 | export interface Region {
13 | latitude: number;
14 | longitude: number;
15 | latitudeDelta: number;
16 | longitudeDelta: number;
17 | }
18 |
19 | export interface MapDimensions {
20 | width: number;
21 | height: number;
22 | }
23 |
24 | export interface LatLng {
25 | latitude: number;
26 | longitude: number;
27 | }
28 |
29 | declare namespace Supercluster {
30 | interface Options {
31 | /**
32 | * Minimum zoom level at which clusters are generated.
33 | *
34 | * @default 0
35 | */
36 | minZoom?: number;
37 | /**
38 | * Maximum zoom level at which clusters are generated.
39 | *
40 | * @default 16
41 | */
42 | maxZoom?: number;
43 | /**
44 | * Minimum number of points to form a cluster.
45 | *
46 | * @default 2
47 | */
48 | minPoints?: number;
49 | /**
50 | * Cluster radius, in pixels.
51 | *
52 | * @default 40
53 | */
54 | radius?: number;
55 | /**
56 | * (Tiles) Tile extent. Radius is calculated relative to this value.
57 | *
58 | * @default 512
59 | */
60 | extent?: number;
61 | /**
62 | * Whether to generate ids for input features in vector tiles.
63 | *
64 | * @default false
65 | */
66 | generateId?: boolean;
67 | /**
68 | * Size of the KD-tree leaf node. Affects performance.
69 | *
70 | * @default 64
71 | */
72 | // nodeSize?: number | undefined;
73 | /**
74 | * Whether timing info should be logged.
75 | *
76 | * @default false
77 | */
78 | // log?: boolean | undefined;
79 | /**
80 | * A function that returns cluster properties corresponding to a single point.
81 | *
82 | * @example
83 | * (props) => ({sum: props.myValue})
84 | */
85 | // map?: ((props: P) => C) | undefined;
86 | /**
87 | * A reduce function that merges properties of two clusters into one.
88 | *
89 | * @example
90 | * (accumulated, props) => { accumulated.sum += props.sum; }
91 | */
92 | // reduce?: ((accumulated: C, props: Readonly) => void) | undefined;
93 | }
94 | /**
95 | * Default properties type, allowing any properties.
96 | * Try to avoid this for better typesafety by using proper types.
97 | */
98 | interface AnyProps {
99 | [name: string]: any;
100 | }
101 | /**
102 | * [GeoJSON Feature](https://tools.ietf.org/html/rfc7946#section-3.2),
103 | * with the geometry being a
104 | * [GeoJSON Point](https://tools.ietf.org/html/rfc7946#section-3.1.2).
105 | */
106 | type PointFeature = GeoJSON.Feature;
107 | interface ClusterProperties {
108 | /**
109 | * Always `true` to indicate that the Feature is a Cluster and not
110 | * an individual point.
111 | */
112 | cluster: true;
113 | /** Cluster ID */
114 | cluster_id: number;
115 | /** Number of points in the cluster. */
116 | point_count: number;
117 | /**
118 | * Abbreviated number of points in the cluster as string if the number
119 | * is 1000 or greater (e.g. `1.3k` if the number is `1298`).
120 | */
121 | point_count_abbreviated: string;
122 | }
123 |
124 | type ClusterFeatureBase = PointFeature;
125 |
126 | type ClustererClusterProperties = {
127 | getExpansionRegion: () => Region;
128 | };
129 |
130 | type ClusterFeature = PointFeature<
131 | ClusterProperties & C & ClustererClusterProperties
132 | >;
133 |
134 | type PointOrClusterFeature = PointFeature
| ClusterFeature;
135 | interface TileFeature {
136 | type: 1;
137 | geometry: Array<[number, number]>;
138 | tags: (ClusterProperties & C) | P;
139 | }
140 | interface Tile {
141 | features: Array>;
142 | }
143 | }
144 |
145 | export default Supercluster;
146 |
147 |
--------------------------------------------------------------------------------
/src/useClusterer.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import type Supercluster from './types';
3 | import type { MapDimensions, Region } from './types';
4 | import SuperclusterClass from './Supercluster';
5 | import type * as GeoJSON from 'geojson';
6 |
7 | export function useClusterer<
8 | P extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps,
9 | C extends GeoJSON.GeoJsonProperties = Supercluster.AnyProps
10 | >(
11 | data: Array>,
12 | mapDimensions: MapDimensions,
13 | region: Region,
14 | options?: Supercluster.Options
15 | ): [
16 | (Supercluster.PointFeature
| Supercluster.ClusterFeature)[],
17 | SuperclusterClass
18 | ] {
19 | const supercluster = useMemo(
20 | () => new SuperclusterClass(options).load(data),
21 | [
22 | data,
23 | options?.extent,
24 | options?.maxZoom,
25 | options?.minZoom,
26 | options?.minPoints,
27 | options?.radius,
28 | ]
29 | );
30 |
31 | const points = useMemo(
32 | () => supercluster.getClustersFromRegion(region, mapDimensions),
33 | [
34 | supercluster,
35 | region.latitude,
36 | region.longitude,
37 | region.latitudeDelta,
38 | region.longitudeDelta,
39 | mapDimensions.width,
40 | mapDimensions.height,
41 | ]
42 | );
43 |
44 | return [points, supercluster];
45 | }
46 |
--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
1 | import type { Feature, Point } from 'geojson';
2 | import type Supercluster from './types';
3 | import type { BBox, LatLng, Region } from './types';
4 |
5 | const calculateDelta = (x: number, y: number): number =>
6 | x > y ? x - y : y - x;
7 |
8 | const calculateAverage = (...args: number[]): number => {
9 | const argList = [...args];
10 | if (!argList.length) {
11 | return 0;
12 | }
13 | return argList.reduce((sum, num: number) => sum + num, 0) / argList.length;
14 | };
15 |
16 | export const regionToBBox = (region: Region): BBox => {
17 | const lngD =
18 | region.longitudeDelta < 0
19 | ? region.longitudeDelta + 360
20 | : region.longitudeDelta;
21 |
22 | return [
23 | region.longitude - lngD, // westLng - min lng
24 | region.latitude - region.latitudeDelta, // southLat - min lat
25 | region.longitude + lngD, // eastLng - max lng
26 | region.latitude + region.latitudeDelta, // northLat - max lat
27 | ];
28 | };
29 |
30 | export const getMarkersRegion = (points: LatLng[]): Region => {
31 | const coordinates = {
32 | minX: points[0]!.latitude,
33 | maxX: points[0]!.latitude,
34 | maxY: points[0]!.longitude,
35 | minY: points[0]!.longitude,
36 | };
37 |
38 | const { maxX, minX, maxY, minY } = points.reduce(
39 | (acc, point) => ({
40 | minX: Math.min(acc.minX, point.latitude),
41 | maxX: Math.max(acc.maxX, point.latitude),
42 | minY: Math.min(acc.minY, point.longitude),
43 | maxY: Math.max(acc.maxY, point.longitude),
44 | }),
45 | { ...coordinates }
46 | );
47 |
48 | const deltaX = calculateDelta(maxX, minX);
49 | const deltaY = calculateDelta(maxY, minY);
50 |
51 | return {
52 | latitude: calculateAverage(minX, maxX),
53 | longitude: calculateAverage(minY, maxY),
54 | latitudeDelta: deltaX * 1.5,
55 | longitudeDelta: deltaY * 1.5,
56 | };
57 | };
58 |
59 | export const getMarkersCoordinates = (markers: Feature) => {
60 | const [longitude, latitude] = markers.geometry.coordinates;
61 | return { longitude, latitude };
62 | };
63 |
64 | /**
65 | * Determines if a point is a cluster for `.properties` typesafe accessiblity
66 | * @param point ClusterFeature or PointFeature
67 | */
68 | export const isPointCluster = (
69 | point: Supercluster.ClusterFeature | Supercluster.PointFeature
70 | ): point is Supercluster.ClusterFeature => {
71 | return 'properties' in point && 'cluster' in (point.properties as any);
72 | };
73 |
74 | type CoordOptions =
75 | | [number, number]
76 | | { latitude: number; longitude: number }
77 | | { lat: number; lng: number };
78 |
79 | /**
80 | * Utility function to convert coordinates to a GeoJSON feature
81 | * @param coords The coordinates to be converted to a GeoJSON feature - can be an array of two coordinates, `{ lat: number; lng: number }`, or `{ latitude: number; longitude: number }`
82 | * @param props Additional optional properties to be added to the feature
83 | */
84 | export const coordsToGeoJSONFeature = (
85 | coords: CoordOptions,
86 | props?: T
87 | ): Supercluster.PointFeature => {
88 | let coordinates;
89 | if (Array.isArray(coords)) {
90 | coordinates = coords;
91 | } else if ('latitude' in coords) {
92 | coordinates = [coords.longitude, coords.latitude];
93 | } else {
94 | coordinates = [coords.lng, coords.lat];
95 | }
96 |
97 | return {
98 | type: 'Feature',
99 | geometry: {
100 | coordinates,
101 | type: 'Point',
102 | },
103 | properties: props,
104 | };
105 | };
106 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 |
2 | {
3 | "extends": "./tsconfig",
4 | "exclude": ["example"]
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": "./",
4 | "paths": {
5 | "react-native-clusterer": ["./src/index"]
6 | },
7 | "allowUnreachableCode": false,
8 | "allowUnusedLabels": false,
9 | "esModuleInterop": true,
10 | "importsNotUsedAsValues": "error",
11 | "forceConsistentCasingInFileNames": true,
12 | "jsx": "react",
13 | "lib": ["esnext"],
14 | "module": "esnext",
15 | "moduleResolution": "node",
16 | "noFallthroughCasesInSwitch": true,
17 | "noImplicitReturns": true,
18 | "noImplicitUseStrict": false,
19 | "noStrictGenericChecks": false,
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | "resolveJsonModule": true,
23 | "skipLibCheck": true,
24 | "strict": true,
25 | "target": "esnext"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------