feat(Android): image pasting in message composer

[divyanshu-patil]

Proposed changes

• created a custom fabric native component library react-native-typerich which fully supports new arch
• uses TypeRichTextInput on android and TextInput on ios
• added onPasteImageData event handler which opens ShareView to send images
• doesn't break existing functionality and works exactly like the existing textinput
• supports
  1. Gboard sticker pasting
  2. Gboard image pasting
  3. Gboard emoji kitchen image pasting
  4. context menu (long press) image pasting

Issue(s)

closes #1691 closes #178

How to test or reproduce

1. open message composer on android
2. navigate to gif section or sticker section
3. try to paste

Screenshots

https://github.com/user-attachments/assets/a09bc25b-cbd6-45d4-a912-d54859031c30

Types of changes

• [ ] Bugfix (non-breaking change which fixes an issue)
• [ ] Improvement (non-breaking change which improves a current function)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Documentation update (if none of the other choices apply)

Checklist

• [x] I have read the CONTRIBUTING doc
• [x] I have signed the CLA
• [x] I have added necessary documentation (if applicable)
• [x] Lint and unit tests pass locally with my changes
• [x] I have added tests that prove my fix is effective or that my feature works (if applicable)
• [x] Any dependent changes have been merged and published in downstream modules

Further comments

Future planning

• add an use experimental message composer option in preferences menu to toggle between legacy composer and new Typerich composer
• Real time markdown rendering that was limited previously by TextInput functionality
• using spannables on android and attributed strings on ios for markdown rendering
• rendering custom emojis directly into the composer
• rendering the mentions chips and channel chips directly into the composer eg

Summary by CodeRabbit

• New Features

  • Android: paste images directly into the composer using a new rich-text input and integrated share flow for pasted content.

• Bug Fixes

  • More robust accessibility focus resolution for the composer.
  • Improved focus and selection handling, and clearer paste error reporting.

• Chores

  • Added a runtime dependency to support rich-text input.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai[bot]]

Walkthrough

Adds Android clipboard image-paste support by rendering a rich-text input on Android and implementing paste→validate→navigate-to-share flow; updates composer input ref typing and accessibility focus resolution to more robustly obtain the native host element.

Changes

Cohort / File(s)	Summary
Message Composer Container app/containers/MessageComposer/MessageComposer.tsx	Changed composerInputRef typing to useRef<any>(null) and updated accessibilityFocusOnInput to resolve the host element via composerInputRef.current, call getNativeRef() if present, fallback to the input, then call findNodeHandle.
Composer Input Component (Android paste + selection/focus handling) app/containers/MessageComposer/components/ComposerInput.tsx	Added Android-specific TypeRichTextInput rendering with onPasteImageData; implemented handleOnImagePaste to build a file object, validate with canUploadFile (permission, allow list, max size), navigate to ShareView for valid uploads, show Alert on errors; added startShareView/finishShareView, refined focus/blur/selection handlers, Android setValue vs non-Android setNativeProps behavior, and paste-related imports (Platform, rich-text types, Subscription, thread retrieval).
Runtime Dependencies package.json	Added dependency: react-native-typerich ^1.1.1.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ComposerInput
    participant TypeRichTextInput
    participant PasteHandler
    participant CanUploadService
    participant ShareView
    participant Alert

    User->>ComposerInput: Paste image
    ComposerInput->>TypeRichTextInput: onPasteImageData(payload)
    TypeRichTextInput->>PasteHandler: deliver payload
    PasteHandler->>CanUploadService: canUploadFile(file, allowList, maxSize, perm)
    alt Upload Allowed
        PasteHandler->>ShareView: navigate(with file payload)
        ShareView-->>User: preview + confirm
    else Upload Denied
        PasteHandler->>Alert: show translated error message
        Alert-->>User: display error
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 I found a shiny paste and gave it a hop,
Into the composer it landed with a plop,
I checked the bytes and measured the size,
Then bounced them off to share with bright eyes,
Android now hops and sends with a pop.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly summarizes the main change: adding image pasting functionality to the message composer on Android.
Linked Issues check	✅ Passed	The PR successfully implements image pasting (#1691) and GIF insertion (#178) by adding TypeRichTextInput for Android with onPasteImageData handler and proper file validation.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing Android image pasting: TypeRichTextInput integration, paste handling logic, file validation, and the necessary dependency. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[divyanshu-patil]

converting to draft as app is crashing on opening on ios

[divyanshu-patil]

IOS app crashing issue is fixed in v0.1.11 of react-native-typerich

[divyanshu-patil]

converting to draft as lib is in beta stage once the lib gets stable i will mark as ready for review

[divyanshu-patil]

lib is stable and tested with v1.1.1 and changes can be safely merged