Skip to content

Commit

Permalink
fix: do not use target property from onLayout (#382)
Browse files Browse the repository at this point in the history
## 馃摐 Description

Do not use `target` property from `onLayout`.

## 馃挕 Motivation and Context

In continuation of facebook/react-native#42785
it seems like `target` property is not documented and thus can be
removed at any point of time so it's simply not reliable to use it since
the code can be easily broken in newest RN versions.

So in this PR I started to use `findNodeHandle` and pass a `ref` to get
a view target. Initially I thought that it'll throw a warning in strict
mode, but it looks like this method will throw a warning only if
`findNodeHandle(component)` statement is used. And since I'm passing a
`ref` - it's safe to use such code.

Also I'm still getting `target` property in `onLayout`. Maybe more
optimized version would be to derive a `target` property in `onRef`
handler, but it's further improvements/optimizations (we need to make
changes gradually).

## 馃摙 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- use `findNodeHandle` in `onLayout` instead of `target` property from
event;

## 馃 How Has This Been Tested?

Tested paper & Fabric on iOS 17.2 (iPhone 15 simulator).

## 馃摑 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed
  • Loading branch information
kirillzyusko committed Mar 11, 2024
1 parent 611ab80 commit d8d09cb
Showing 1 changed file with 4 additions and 4 deletions.
8 changes: 4 additions & 4 deletions src/components/KeyboardAwareScrollView/index.tsx
@@ -1,5 +1,5 @@
import React, { forwardRef, useCallback, useMemo } from "react";
import { useWindowDimensions } from "react-native";
import { findNodeHandle, useWindowDimensions } from "react-native";
import Reanimated, {
interpolate,
scrollTo,
Expand Down Expand Up @@ -121,8 +121,8 @@ const KeyboardAwareScrollView = forwardRef<
scrollViewAnimatedRef(assignedRef);
}, []);
const onScrollViewLayout = useCallback(
(e: LayoutChangeEvent & { nativeEvent: { target: number } }) => {
scrollViewTarget.value = e.nativeEvent.target;
(e: LayoutChangeEvent) => {
scrollViewTarget.value = findNodeHandle(scrollViewAnimatedRef.current);

onLayout?.(e);
},
Expand Down Expand Up @@ -319,8 +319,8 @@ const KeyboardAwareScrollView = forwardRef<
<Reanimated.ScrollView
ref={onRef}
{...rest}
// @ts-expect-error https://github.com/facebook/react-native/pull/42785
onLayout={onScrollViewLayout}
// @ts-expect-error `onScrollReanimated` is a fake prop needed for reanimated to intercept scroll events
onScrollReanimated={onScroll}
scrollEventThrottle={16}
>
Expand Down

0 comments on commit d8d09cb

Please sign in to comment.