Skip to content

Instantly share code, notes, and snippets.

@fabOnReact

fabOnReact/notes-march.markdown

Last active March 5, 2024 09:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fabOnReact/6a58c713d32ce5bb9c164b6906abac12 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fabOnReact/6a58c713d32ce5bb9c164b6906abac12 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. fabOnReact revised this gist Mar 2, 2024. No changes.
  2. fabOnReact revised this gist Mar 2, 2024. 2 changed files with 4 additions and 1 deletion.
    4 changes: 4 additions & 0 deletions notes-march.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    ### Notes March 2024

    1) Reply to issue https://github.com/mrousavy/react-native-vision-camera/issues/2614
    2) Code review for PR [Fix single line text not fully rendered on old architecture](https://github.com/facebook/react-native/pull/41770)
    1 change: 0 additions & 1 deletion react-native-notes.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    https://github.com/mrousavy/react-native-vision-camera/issues/2614
  3. fabOnReact revised this gist Feb 28, 2024. 1 changed file with 1 addition and 29 deletions.
    30 changes: 1 addition & 29 deletions react-native-notes.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1 @@
    https://github.com/mrousavy/react-native-vision-camera/issues/2614
    > 2) For the Frame Processor runtime I need access to the jsi::Value/jsi::Function that the user passes to the <Camera> view directly, instead of converting it to a callback within the TurboModules/Native Modules system because the Frame Processor function is a Worklet. This is how this works currently:
    >JS: [Camera.tsx](https://github.com/mrousavy/react-native-vision-camera/blob/bca9472ab8d973d8079da89144f7b58a0321f5ec/package/src/Camera.tsx#L449-L456) (uses findNodeHandle(..) + a global setFrameProcessor(..) func)
    >iOS: [VisionCameraProxy.mm](https://github.com/mrousavy/react-native-vision-camera/blob/bca9472ab8d973d8079da89144f7b58a0321f5ec/package/ios/Frame%20Processor/VisionCameraProxy.mm#L68-L82) (uses UIManager::viewForReactTag to find the view)
    >Android: [VisionCameraProxy.kt](https://github.com/mrousavy/react-native-vision-camera/blob/bca9472ab8d973d8079da89144f7b58a0321f5ec/package/android/src/main/java/com/mrousavy/camera/frameprocessor/VisionCameraProxy.kt#L39-L46) (uses UIManagerHelper.getUIManager to find the View)

    I believe there is an example of implementation in TextInput.js which uses the codegen command setTextAndSelection https://github.com/facebook/react-native/pull/42701#issuecomment-1950686053 instead of using UIManager + findNodeHandle

    Basically the codegen command uses FabricRenderer [dispatchCommand](https://github.com/facebook/react-native/blob/8ff05b5a18db85ab699323d1745a5f17cdc8bf6c/packages/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js#L27633).

    ```cpp
    /// A function which has this type can be registered as a function
    /// callable from JavaScript using Function::createFromHostFunction().
    /// When the function is called, args will point to the arguments, and
    /// count will indicate how many arguments are passed. The function
    /// can return a Value to the caller, or throw an exception. If a C++
    /// exception is thrown, a JS Error will be created and thrown into
    /// JS; if the C++ exception extends std::exception, the Error's
    /// message will be whatever what() returns. Note that it is undefined whether
    /// HostFunctions may or may not be called in strict mode; that is `thisVal`
    /// can be any value - it will not necessarily be coerced to an object or
    /// or set to the global object.
    ```
    https://github.com/facebook/react-native/blob/8317325fb2bf6563a9314431c42c90ff68fb35fb/packages/react-native/ReactCommon/jsi/jsi/jsi.h#L100-L111
    https://github.com/facebook/react-native/blob/8ff05b5a18db85ab699323d1745a5f17cdc8bf6c/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp#L599

    The Java method invoked from JS is here:
    https://github.com/facebook/react-native/blob/7fffe692e715004ac4fee6418dfe8a462e180b4b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.cpp#L829-L846
    https://github.com/mrousavy/react-native-vision-camera/issues/2614
  4. fabOnReact revised this gist Feb 28, 2024. No changes.
  5. fabOnReact revised this gist Feb 28, 2024. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions react-native-notes.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    https://github.com/mrousavy/react-native-vision-camera/issues/2614
    > 2) For the Frame Processor runtime I need access to the jsi::Value/jsi::Function that the user passes to the <Camera> view directly, instead of converting it to a callback within the TurboModules/Native Modules system because the Frame Processor function is a Worklet. This is how this works currently:
    >JS: [Camera.tsx](https://github.com/mrousavy/react-native-vision-camera/blob/bca9472ab8d973d8079da89144f7b58a0321f5ec/package/src/Camera.tsx#L449-L456) (uses findNodeHandle(..) + a global setFrameProcessor(..) func)
    >iOS: [VisionCameraProxy.mm](https://github.com/mrousavy/react-native-vision-camera/blob/bca9472ab8d973d8079da89144f7b58a0321f5ec/package/ios/Frame%20Processor/VisionCameraProxy.mm#L68-L82) (uses UIManager::viewForReactTag to find the view)
  6. fabOnReact created this gist Feb 28, 2024.
    28 changes: 28 additions & 0 deletions react-native-notes.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    > 2) For the Frame Processor runtime I need access to the jsi::Value/jsi::Function that the user passes to the <Camera> view directly, instead of converting it to a callback within the TurboModules/Native Modules system because the Frame Processor function is a Worklet. This is how this works currently:
    >JS: [Camera.tsx](https://github.com/mrousavy/react-native-vision-camera/blob/bca9472ab8d973d8079da89144f7b58a0321f5ec/package/src/Camera.tsx#L449-L456) (uses findNodeHandle(..) + a global setFrameProcessor(..) func)
    >iOS: [VisionCameraProxy.mm](https://github.com/mrousavy/react-native-vision-camera/blob/bca9472ab8d973d8079da89144f7b58a0321f5ec/package/ios/Frame%20Processor/VisionCameraProxy.mm#L68-L82) (uses UIManager::viewForReactTag to find the view)
    >Android: [VisionCameraProxy.kt](https://github.com/mrousavy/react-native-vision-camera/blob/bca9472ab8d973d8079da89144f7b58a0321f5ec/package/android/src/main/java/com/mrousavy/camera/frameprocessor/VisionCameraProxy.kt#L39-L46) (uses UIManagerHelper.getUIManager to find the View)

    I believe there is an example of implementation in TextInput.js which uses the codegen command setTextAndSelection https://github.com/facebook/react-native/pull/42701#issuecomment-1950686053 instead of using UIManager + findNodeHandle

    Basically the codegen command uses FabricRenderer [dispatchCommand](https://github.com/facebook/react-native/blob/8ff05b5a18db85ab699323d1745a5f17cdc8bf6c/packages/react-native/Libraries/Renderer/implementations/ReactFabric-dev.js#L27633).

    ```cpp
    /// A function which has this type can be registered as a function
    /// callable from JavaScript using Function::createFromHostFunction().
    /// When the function is called, args will point to the arguments, and
    /// count will indicate how many arguments are passed. The function
    /// can return a Value to the caller, or throw an exception. If a C++
    /// exception is thrown, a JS Error will be created and thrown into
    /// JS; if the C++ exception extends std::exception, the Error's
    /// message will be whatever what() returns. Note that it is undefined whether
    /// HostFunctions may or may not be called in strict mode; that is `thisVal`
    /// can be any value - it will not necessarily be coerced to an object or
    /// or set to the global object.
    ```
    https://github.com/facebook/react-native/blob/8317325fb2bf6563a9314431c42c90ff68fb35fb/packages/react-native/ReactCommon/jsi/jsi/jsi.h#L100-L111
    https://github.com/facebook/react-native/blob/8ff05b5a18db85ab699323d1745a5f17cdc8bf6c/packages/react-native/ReactCommon/react/renderer/uimanager/UIManagerBinding.cpp#L599

    The Java method invoked from JS is here:
    https://github.com/facebook/react-native/blob/7fffe692e715004ac4fee6418dfe8a462e180b4b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/FabricMountingManager.cpp#L829-L846