react-native-transformer-text-input 0.1.0-alpha.1 → 0.1.0-alpha.3

package/README.md

@@ -1,7 +1,17 @@
-# react-native-transformer-text-input
+# React Native Transformer Text Input
 
 TextInput component that allows transforming text synchronously with a worklet.
 
+## Motivation
+
+Transforming input as users type is common — phone numbers, credit cards, usernames. Existing approaches have trade-offs:
+
+**Pattern-based masking** (e.g., [react-native-advanced-input-mask](https://github.com/IvanIhnatsiuk/react-native-advanced-input-mask)) uses declarative patterns like `+1 ([000]) [000]-[0000]`. This works well for fixed formats, but patterns can't express conditional logic, variable-length formats, or transformations that depend on context.
+
+**Controlled inputs** (`value` + `onChangeText` + state) give you full JS flexibility, but create a native → JS → re-render → native round-trip. This causes visible lag and cursor flicker—the input feels sluggish because keystrokes are corrected asynchronously.
+
+**This library** combines JS flexibility with synchronous execution. Your transform runs as a worklet on the UI thread — no bridge delay, no flicker. Write any logic you need with the responsiveness of a native input.
+
 ## Installation
 ```sh
 npm install react-native-transformer-text-input
@@ -98,6 +108,29 @@ Default behavior when no `selection` is returned:
 
 The library includes ready-to-use transformers for common use cases.
 
+### PatternTransformer
+
+Formats input using a pattern string with placeholder characters.
+
+```tsx
+import { PatternTransformer } from 'react-native-transformer-text-input/formatters/pattern';
+
+const dateTransformer = new PatternTransformer({
+  pattern: '##/##/####',  // # = digit, A = letter, * = alphanumeric
+});
+
+// Formats as: 12/31/2024
+<TransformerTextInput
+  transformer={dateTransformer}
+  keyboardType="number-pad"
+/>
+```
+
+Options:
+- `pattern`: Pattern string where `#` matches digits, `A` matches letters, `*` matches alphanumeric.
+- `definitions`: Custom placeholder definitions (e.g., `{ 'X': /[0-9A-F]/i }` for hex).
+- `showTrailingLiterals`: Show literal characters after the last input (default: `false`).
+
 ### PhoneNumberTransformer
 
 Formats phone numbers as the user types.
@@ -123,7 +156,7 @@ Code in this repository is thought through and mostly written by humans, with AI
 
 ## Acknowledgments
 
-- [react-native-live-markdown](https://github.com/Expensify/react-native-live-markdown) for an example of how to extend TextInput.
+- [react-native-live-markdown](https://github.com/Expensify/react-native-live-markdown) and [react-native-advanced-input-mask](https://github.com/IvanIhnatsiuk/react-native-advanced-input-mask) for examples of how to extend TextInput.
 - [react-native-worklets](https://github.com/software-mansion/react-native-reanimated/tree/main/packages/react-native-worklets) for the worklet runtime powering UI-thread execution.
 
 ## Contributing

package/android/src/main/jni/CMakeLists.txt

@@ -8,7 +8,31 @@ set(LIB_ANDROID_DIR ${CMAKE_CURRENT_SOURCE_DIR}/../../..)
 set(LIB_COMMON_DIR ${LIB_ANDROID_DIR}/../cpp)
 set(LIB_ANDROID_GENERATED_JNI_DIR ${LIB_ANDROID_DIR}/build/generated/source/codegen/jni)
 set(LIB_ANDROID_GENERATED_COMPONENTS_DIR ${LIB_ANDROID_GENERATED_JNI_DIR}/react/renderer/components/${LIB_LITERAL})
-set(REACT_NATIVE_WORKLETS_DIR ${LIB_ANDROID_DIR}/../node_modules/react-native-worklets)
+
+# Resolve path to react-native-worklets.
+set(REACT_NATIVE_WORKLETS_DIR "" CACHE PATH "Path to react-native-worklets root directory")
+
+if(NOT DEFINED REACT_NATIVE_WORKLETS_DIR OR "${REACT_NATIVE_WORKLETS_DIR}" STREQUAL "")
+  set(NODE_BINARY "node" CACHE STRING "Path to Node.js binary")
+
+  execute_process(
+    COMMAND "${NODE_BINARY}" -p "require.resolve('react-native-worklets/package.json')"
+    WORKING_DIRECTORY "${PROJECT_ROOT_DIR}/.."
+    OUTPUT_VARIABLE _worklets_pkg_json
+    OUTPUT_STRIP_TRAILING_WHITESPACE
+    RESULT_VARIABLE _worklets_res
+    ERROR_QUIET
+  )
+
+  if (NOT _worklets_res EQUAL 0)
+    message(FATAL_ERROR
+      "Failed to resolve 'react-native-worklets' with Node from '${PROJECT_ROOT_DIR}/..'. "
+      "Set REACT_NATIVE_WORKLETS_DIR or NODE_BINARY explicitly."
+    )
+  endif()
+
+  get_filename_component(REACT_NATIVE_WORKLETS_DIR "${_worklets_pkg_json}" DIRECTORY)
+endif()
 
 file(GLOB LIB_CUSTOM_SRCS CONFIGURE_DEPENDS *.cpp ${LIB_COMMON_DIR}/*.cpp)
 file(GLOB LIB_CODEGEN_SRCS CONFIGURE_DEPENDS ${LIB_ANDROID_GENERATED_JNI_DIR}/*.cpp ${LIB_ANDROID_GENERATED_COMPONENTS_DIR}/*.cpp)
@@ -33,8 +57,11 @@ target_include_directories(
   "${REACT_NATIVE_WORKLETS_DIR}/android/src/main/cpp"
 )
 
-message(STATUS "ANDROID_NDK_BUILD_TYPE = ${ANDROID_NDK_BUILD_TYPE}")
-
+if(${CMAKE_BUILD_TYPE} MATCHES "Debug")
+  set(BUILD_TYPE "debug")
+else()
+  set(BUILD_TYPE "release")
+endif()
 
 add_library(worklets SHARED IMPORTED)
 
@@ -42,7 +69,7 @@ set_target_properties(
   worklets
   PROPERTIES
     IMPORTED_LOCATION
-    "${REACT_NATIVE_WORKLETS_DIR}/android/build/intermediates/cmake/debug/obj/${ANDROID_ABI}/libworklets.so"
+    "${REACT_NATIVE_WORKLETS_DIR}/android/build/intermediates/cmake/${BUILD_TYPE}/obj/${ANDROID_ABI}/libworklets.so"
 )
 
 target_link_libraries(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-transformer-text-input",
-  "version": "0.1.0-alpha.1",
+  "version": "0.1.0-alpha.3",
   "description": "TextInput component that allows transforming text synchronously with a worklet",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",