@domir/react-native-measure-text 0.1.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Dominique Rau
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Readme.md

@@ -0,0 +1,46 @@
+# react-native-measure-text
+
+Measure the size of a string of text in React Native synchronously.
+
+This can be useful for calculating the size of a string of text before rendering it, for example for animation targets.
+
+# API documentation
+
+### Add the package to your npm dependencies
+
+```
+npm install @domir/react-native-measure-text
+```
+
+### Configure for iOS
+
+Run `npx pod-install` after installing the npm package.
+
+
+### Configure for Android
+
+No additional configuration is needed.
+
+### Usage
+
+```js
+import * as MeasureText from '@domir/react-native-measure-text';
+
+MeasureText.measureWidth('Hello World', {
+  fontSize: 20,
+  fontFamily: 'Helvetica',
+  fontWeight: 'normal',
+  // TBD
+  // fontStyle: 'normal',
+  // fontVariant: ['small-caps'],
+  // letterSpacing: 0,
+  // lineHeight: 20,
+  // textAlign: 'left',
+  // textDecorationLine: 'none',
+  // textTransform: 'none',
+  // includeFontPadding: true,
+  // maxWidth: 100,
+  // maxHeight: 100,
+  // numberOfLines: 1,
+  // ellipsizeMode: 'tail',
+})

package/android/build.gradle

@@ -0,0 +1,93 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'kotlin-android-extensions'
+apply plugin: 'maven-publish'
+
+group = 'expo.modules.measuretext'
+version = '0.1.0'
+
+buildscript {
+  def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+  if (expoModulesCorePlugin.exists()) {
+    apply from: expoModulesCorePlugin
+    applyKotlinExpoModulesCorePlugin()
+  }
+
+  // Simple helper that allows the root project to override versions declared by this library.
+  ext.safeExtGet = { prop, fallback ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+  }
+
+  // Ensures backward compatibility
+  ext.getKotlinVersion = {
+    if (ext.has("kotlinVersion")) {
+      ext.kotlinVersion()
+    } else {
+      ext.safeExtGet("kotlinVersion", "1.6.10")
+    }
+  }
+
+  repositories {
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
+  }
+}
+
+// Creating sources with comments
+task androidSourcesJar(type: Jar) {
+  classifier = 'sources'
+  from android.sourceSets.main.java.srcDirs
+}
+
+afterEvaluate {
+  publishing {
+    publications {
+      release(MavenPublication) {
+        from components.release
+        // Add additional sourcesJar to artifacts
+        artifact(androidSourcesJar)
+      }
+    }
+    repositories {
+      maven {
+        url = mavenLocal().url
+      }
+    }
+  }
+}
+
+android {
+  compileSdkVersion safeExtGet("compileSdkVersion", 31)
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_11
+    targetCompatibility JavaVersion.VERSION_11
+  }
+
+  kotlinOptions {
+    jvmTarget = JavaVersion.VERSION_11.majorVersion
+  }
+
+  defaultConfig {
+    minSdkVersion safeExtGet("minSdkVersion", 21)
+    targetSdkVersion safeExtGet("targetSdkVersion", 31)
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+}
+
+repositories {
+  mavenCentral()
+}
+
+dependencies {
+  implementation project(':expo-modules-core')
+  implementation "com.facebook.react:react-native:+"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest package="expo.modules.measuretext">
+</manifest>

package/android/src/main/java/expo/modules.measuretext/ReactNativeMeasureTextModule.kt

@@ -0,0 +1,51 @@
+package expo.modules.measuretext
+
+import android.R.attr.fontFamily
+import android.R.attr.fontWeight
+import android.graphics.Typeface
+import android.text.TextPaint
+import com.facebook.react.views.text.ReactFontManager
+import com.facebook.react.views.text.ReactTypefaceUtils.parseFontWeight
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+
+
+class StyleOptions : Record {
+  @Field
+  val fontFamily: String? = null
+
+  @Field
+  val fontWeight: String? = null
+
+  @Field
+  val fontSize: Int? = null
+}
+
+class ReactNativeMeasureTextModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ReactNativeMeasureText")
+
+    Function("measureWidth") { text: String, style: StyleOptions ->
+      val paint = createTextPaint(style.fontSize, style.fontFamily, style.fontWeight);
+      return@Function paint.measureText(text);
+    }
+  }
+
+  private fun createTextPaint(fontSize: Int?, fontFamily: String?, fontWeight: String?): TextPaint {
+    val paint = TextPaint(TextPaint.ANTI_ALIAS_FLAG);
+    val fontScale = appContext.reactContext?.resources?.configuration?.fontScale ?: 1.0f;
+    val usedFontSize = (fontSize ?: 0) * fontScale;
+    paint.textSize = usedFontSize;
+    val assetManager = appContext.reactContext?.assets;
+
+    if (fontFamily == null || assetManager == null || fontWeight == null)
+      paint.typeface = Typeface.DEFAULT
+    } else {
+      paint.typeface ReactFontManager.getInstance().getTypeface(fontFamily, parseFontWeight(fontWeight), assetManager)
+    }
+
+    return paint;
+  }
+}

package/build/ReactNativeMeasureText.d.ts

@@ -0,0 +1,6 @@
+export declare function measureWidth(text: string, style?: {
+    fontSize?: number;
+    fontFamily?: string;
+    fontWeight?: string;
+}): number;
+//# sourceMappingURL=ReactNativeMeasureText.d.ts.map

package/build/ReactNativeMeasureText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeMeasureText.d.ts","sourceRoot":"","sources":["../src/ReactNativeMeasureText.ts"],"names":[],"mappings":"AAEA,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,KAAK,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAO,GAC1E,MAAM,CAER"}

package/build/ReactNativeMeasureText.js

@@ -0,0 +1,5 @@
+import ReactNativeMeasureText from "./ReactNativeMeasureTextModule";
+export function measureWidth(text, style = {}) {
+    return ReactNativeMeasureText.measureWidth(text, style);
+}
+//# sourceMappingURL=ReactNativeMeasureText.js.map

package/build/ReactNativeMeasureText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeMeasureText.js","sourceRoot":"","sources":["../src/ReactNativeMeasureText.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AAEpE,MAAM,UAAU,YAAY,CAC1B,IAAY,EACZ,QAAyE,EAAE;IAE3E,OAAO,sBAAsB,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;AAC1D,CAAC","sourcesContent":["import ReactNativeMeasureText from \"./ReactNativeMeasureTextModule\";\n\nexport function measureWidth(\n  text: string,\n  style: { fontSize?: number; fontFamily?: string; fontWeight?: string } = {}\n): number {\n  return ReactNativeMeasureText.measureWidth(text, style);\n}\n"]}

package/build/ReactNativeMeasureText.types.d.ts

@@ -0,0 +1,4 @@
+export declare type ChangeEventPayload = {
+    value: string;
+};
+//# sourceMappingURL=ReactNativeMeasureText.types.d.ts.map

package/build/ReactNativeMeasureText.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeMeasureText.types.d.ts","sourceRoot":"","sources":["../src/ReactNativeMeasureText.types.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/build/ReactNativeMeasureText.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ReactNativeMeasureText.types.js.map

package/build/ReactNativeMeasureText.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeMeasureText.types.js","sourceRoot":"","sources":["../src/ReactNativeMeasureText.types.ts"],"names":[],"mappings":"","sourcesContent":["export type ChangeEventPayload = {\n  value: string;\n};\n"]}

package/build/ReactNativeMeasureTextModule.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=ReactNativeMeasureTextModule.d.ts.map

package/build/ReactNativeMeasureTextModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeMeasureTextModule.d.ts","sourceRoot":"","sources":["../src/ReactNativeMeasureTextModule.ts"],"names":[],"mappings":";AAIA,wBAA6D"}

package/build/ReactNativeMeasureTextModule.js

@@ -0,0 +1,5 @@
+import { requireNativeModule } from "expo-modules-core";
+// It loads the native module object from the JSI or falls back to
+// the bridge module (from NativeModulesProxy) if the remote debugger is on.
+export default requireNativeModule("ReactNativeMeasureText");
+//# sourceMappingURL=ReactNativeMeasureTextModule.js.map

package/build/ReactNativeMeasureTextModule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeMeasureTextModule.js","sourceRoot":"","sources":["../src/ReactNativeMeasureTextModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExD,kEAAkE;AAClE,4EAA4E;AAC5E,eAAe,mBAAmB,CAAC,wBAAwB,CAAC,CAAC","sourcesContent":["import { requireNativeModule } from \"expo-modules-core\";\n\n// It loads the native module object from the JSI or falls back to\n// the bridge module (from NativeModulesProxy) if the remote debugger is on.\nexport default requireNativeModule(\"ReactNativeMeasureText\");\n"]}

package/build/ReactNativeMeasureTextModule.web.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    measureWidth(): string;
+};
+export default _default;
+//# sourceMappingURL=ReactNativeMeasureTextModule.web.d.ts.map

package/build/ReactNativeMeasureTextModule.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeMeasureTextModule.web.d.ts","sourceRoot":"","sources":["../src/ReactNativeMeasureTextModule.web.ts"],"names":[],"mappings":";;;AAAA,wBAIE"}

package/build/ReactNativeMeasureTextModule.web.js

@@ -0,0 +1,6 @@
+export default {
+    measureWidth() {
+        return "Hello world! 👋";
+    },
+};
+//# sourceMappingURL=ReactNativeMeasureTextModule.web.js.map

package/build/ReactNativeMeasureTextModule.web.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactNativeMeasureTextModule.web.js","sourceRoot":"","sources":["../src/ReactNativeMeasureTextModule.web.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,YAAY;QACV,OAAO,iBAAiB,CAAC;IAC3B,CAAC;CACF,CAAC","sourcesContent":["export default {\n  measureWidth() {\n    return \"Hello world! 👋\";\n  },\n};\n"]}

package/example/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

package/example/App.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Button, StyleSheet, Text, View } from "react-native";
+import * as ReactNativeMeasureText from "react-native-measure-text";
+
+export default function App() {
+  const [widthResult, setWidthResult] = useState<number>(0);
+  const toMeasure = "Hello world!";
+  return (
+    <View style={styles.container}>
+      <Text>Result: {JSON.stringify(widthResult)}</Text>
+      <View
+        style={{ borderColor: "black", borderWidth: 1, width: widthResult + 1 }}
+      >
+        <Text style={{ fontSize: 20 }} numberOfLines={1} ellipsizeMode="clip">
+          {toMeasure}
+        </Text>
+      </View>
+      <Button
+        onPress={() => {
+          setWidthResult(
+            Math.ceil(
+              ReactNativeMeasureText.measureWidth({
+                text: toMeasure,
+                // fontSize: 20,
+                // fontFamily: 'Helvetica',
+                // fontWeight: 'normal',
+                // maxHeight: 100,
+              })
+            )
+          );
+        }}
+        title="Calc width"
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "red",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

package/example/android/app/BUCK

@@ -0,0 +1,55 @@
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
+
+lib_deps = []
+
+create_aar_targets(glob(["libs/*.aar"]))
+
+create_jar_targets(glob(["libs/*.jar"]))
+
+android_library(
+    name = "all-libs",
+    exported_deps = lib_deps,
+)
+
+android_library(
+    name = "app-code",
+    srcs = glob([
+        "src/main/java/**/*.java",
+    ]),
+    deps = [
+        ":all-libs",
+        ":build_config",
+        ":res",
+    ],
+)
+
+android_build_config(
+    name = "build_config",
+    package = "expo.modules.measuretext.example",
+)
+
+android_resource(
+    name = "res",
+    package = "expo.modules.measuretext.example",
+    res = "src/main/res",
+)
+
+android_binary(
+    name = "app",
+    keystore = "//android/keystores:debug",
+    manifest = "src/main/AndroidManifest.xml",
+    package_type = "debug",
+    deps = [
+        ":app-code",
+    ],
+)