Skip to content

Wild lags when animation extraContentPadding on large lists (especially android) #1421

@dikiyp

Description

@dikiyp

Describe the bug

I used extraContentPadding when changing the height of the input field (specifically when replying to a message), and everything works more or less smoothly on short lists, but as soon as the list has 16 or more messages, everything starts to lag (especially when the keyboard is open). I'm using FlashList. And and Android just chokes on the lag

Code snippet

const renderScrollComponent = useCallback(
    (props: KeyboardChatScrollViewProps) => (
      <KeyboardChatScrollView
        {...props}
        contentInsetAdjustmentBehavior="never"
        keyboardDismissMode="on-drag"
        offset={base.spacing.lg}
        extraContentPadding={footerHeight}
        automaticallyAdjustContentInsets={false}
        keyboardLiftBehavior="always"
      />
    ),
    [],
  )

Repo for reproducing

https://github.com/slipe-fun/Bloom-mobile

To Reproduce

1.Create a chat
2.Spam around 15-20 messages
3. Try to reply when keyboard opened/closed
4.

Expected behavior

Just no lags 😭😭

Screenshots

I can't upload to github, so i uploaded on gDrive: https://drive.google.com/file/d/1SIpLvnqsvRqWoAfZFwK9A8RaOzw7ovja/view?usp=sharing

Smartphone (please complete the following information):

  • Desktop OS: macOS Sonoma 14.8.1
  • Device: iphone 12 mini
  • OS: iOS 26.4
  • RN version: 0.81.5
  • RN architecture: newest
  • JS engine: Hermes
  • Library version: 1.21.0

Metadata

Metadata

Assignees

Labels

KeyboardChatScrollView 💬Anything about chat functionalityrepro providedIssue contains reproduction repository/code🐛 bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions