KeyboardAvoidingLegendList crashes with "function is not a worklet" error (v3 beta)

[CavalcanteLeo]

The KeyboardAvoidingLegendList component crashes immediately with:

[Reanimated] Passed a function that is not a worklet. Please provide a worklet function.

The issue is that the keyboard handler callbacks passed to useKeyboardHandler
from react-native-keyboard-controller are missing the 'worklet' directive.

Versions:

• @legendapp/list: 3.0.0-beta.27
• react-native-keyboard-controller: 1.20.6
• react-native-reanimated: 4.x
• babel plugin: react-native-worklets/plugin

Stack trace points to: keyboard.native.bundle → useKeyboardHandler → useHandler

[jmeistrich]

Can you share what your code which renders the KeyboardAvoidingLegendList looks like?

[CavalcanteLeo]

sure thing...
it is a child component of stream chat

    <Channel
      channel={channel}
      // Disable Stream's keyboard handling
      keyboardVerticalOffset={0}
      disableKeyboardCompatibleView
      initialScrollToFirstUnreadMessage={true}
    >

      <KeyboardAvoidingLegendList
        style={{
          overflow: 'visible',
          flex: 1,
          // Hide list while measuring to prevent visible jumping
          opacity: isLayoutReady ? 1 : 0,
        }}
        ref={listRef}
        data={listItems}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        getItemType={getItemType}
        getEstimatedItemSize={getEstimatedItemSize}
        estimatedListSize={{ height: 700, width: 400 }}
        drawDistance={500}
        recycleItems={true}
        maintainScrollAtEnd
        maintainScrollAtEndThreshold={0.2}
        maintainVisibleContentPosition
        alignItemsAtEnd
        initialScrollIndex={initialScrollConfig.index}
        initialScrollAtEnd={initialScrollConfig.scrollAtEnd}
        waitForInitialLayout
        onStartReached={() => {
          maybeCallLoadMore();
        }}
        onStartReachedThreshold={1.5}
        scrollEventThrottle={16}
        onLoad={handleListLoad}
        ListHeaderComponent={ListHeaderComponent}
        contentContainerStyle={contentContainerStyle}
        showsVerticalScrollIndicator={true}
        safeAreaInsetBottom={insets.bottom}
        keyboardDismissMode="interactive"
      />


      {shouldShowInput && <ChatInputFooter />}


      {shouldShowJoinFooter && (
        <JoinChatFooter onJoin={onJoin} isJoining={isJoining} />
      )}

      {shouldShowInactiveMessage && (
        <ChatInactiveMessage
          isInactive={!isActive}
          isReadOnly={!isInteractive}
        />
      )}
  </Channel>

chat input uses KeyboardStickyView from react-native-keyboard-controller

[e-simpson]

Not sure if its related but I get:

 ERROR  [ReanimatedError: [Reanimated] Perhaps you are trying to pass an animated style to a non-animated component. Try creating an animated component using `createAnimatedComponent` function or use `Animated.*` components.] 

Code: chat.tsx
  129 |             <View style={[styles.container, { paddingBottom: insets.bottom, paddingTop: insets.top }]}>
  130 |                 <KeyboardGestureArea interpolator="ios" offset={60} style={styles.container}>
> 131 |                     <KeyboardAvoidingLegendList
      |                     ^
  132 |                         alignItemsAtEnd
  133 |                         contentContainerStyle={styles.contentContainer}
  134 |                         data={events}
Call Stack
  ChatScreen (app/chat.tsx:131:21)
  Layout (app/_layout.tsx:22:4)

In expo using the example from https://github.com/LegendApp/legend-list/blob/web/example/app/chat-keyboard/index.tsx

I'm using the latest reanimated v 4.2.1, I see this library lists reanimated v3 as a peer in the latest v3 branch?

Edit: I see this was mentioned here actually #338 (comment)

[sasanthks]

Waiting for a fix because the normal LegendList is not working properly with the keyboard (and it also has issues keeping the visible content stable). So we want to use KeyboardAvoidingLegendList, but it relies on Reanimated.

Problem: when LegendList is used with react-native-reanimated (via createAnimatedCompnoent), it still renders a normal ScrollView internally. This triggers Reanimated worklet/ref errors because animated components need Animated.ScrollView.

Using a Reanimated ScrollView internally (for example by supplying it through renderScrollComponent) fixes the worklet/ref errors and makes LegendList work correctly with Reanimated.

[sunujun]

I ran into the same issues on 3.0.0-beta.31 with react-native-reanimated@4.x + react-native-worklets/plugin.
After tracing through the compiled output, here's what I found.

Root Cause Analysis

There are actually two separate issues at play.

Issue 1: Untransformed worklet directives (build pipeline)

keyboard.native.js contains worklet directives as plain string literals:

// keyboard.native.js:54-56
var clampProgress = (progress) => {
    "worklet"; // ← string literal, not transformed by Babel
    return Math.min(1, Math.max(0, progress));
};

Since the library is built with tsup (esbuild-based), Babel plugins like react-native-reanimated/plugin or react-native-worklets/plugin never run during the build. The "worklet" directives remain as raw strings instead of being transformed into proper worklet bytecode.

Metro's Babel pipeline may re-transform these at bundle time, but this depends on whether the worklet plugin processes node_modules files (many plugins skip them for performance).

Affected files:

• keyboard.native.js
• keyboard-controller.native.js

(9+ untransformed worklet directives total)

---

Issue 2: animatedPropsInternal leaks to non-animated ScrollView

This is independent of the worklet issue and affects AnimatedLegendList / KeyboardAvoidingLegendList in general.

The prop flow:

reanimated.native.js

AnimatedLegendListComponent = Reanimated.createAnimatedComponent(LegendListForwardedRef)

→ passes animatedProps as animatedPropsInternal to inner components
→ also passes animatedProps via ...rest (processed by createAnimatedComponent)

index.native.js

LegendList receives animatedPropsInternal
→ stores it in state.props.animatedProps (line 3830)
→ BUT also passes it via ...rest to ListComponent (line 4070)

ListComponent receives ...rest including animatedPropsInternal
→ spreads ...rest onto SnapOrScroll (line 981)

SnapOrScroll = reactNative.Animated.ScrollView (line 906)

NOT Reanimated

The inner ListComponentScrollView is reactNative.Animated.ScrollView (React Native's built-in Animated), not Reanimated's animated component. When Reanimated shared values from animatedPropsInternal reach this non-Reanimated component, it triggers:

ReanimatedError: Perhaps you are trying to pass an animated style to a
non-animated component

---

Attempted workaround

Stripping animatedPropsInternal from ListComponent's ...rest via patch:

    // index.native.js - ListComponent2 destructuring
    stickyHeaderIndices,
    animatedPropsInternal: _animatedPropsInternal,
    ...rest

This suppresses the error, but also breaks the animated contentInset path that KeyboardAvoidingLegendList relies on (iOS uses animatedProps with contentInset, Android uses animated style with marginBottom).

---

Suggested Fixes

1. Build pipeline
   Switch from tsup/esbuild to a build tool that supports Babel plugins (e.g., rollup with @rollup/plugin-babel), or ship TypeScript source so Metro can transform worklets at bundle time.

2. Internal ScrollView
   When the reanimated integration is active, use Reanimated.createAnimatedComponent(ScrollView) for the inner ListComponentScrollView instead of reactNative.Animated.ScrollView. This would allow animatedPropsInternal to flow through without errors.

3. Prop isolation
   Alternatively, strip animatedPropsInternal from ListComponent's ...rest (so it doesn't leak to the ScrollView) while ensuring
   createAnimatedComponent at the outer level properly applies animated props to the native ScrollView via the ref chain.

---

Environment

• @legendapp/list: 3.0.0-beta.31
• react-native: 0.82.1
• react-native-reanimated: 4.2.0
• react-native-keyboard-controller: 1.20.7
• Babel plugin: react-native-worklets/plugin