refactor: fix types for the React Native strict TypeScript API by diegolmello · Pull Request #7846 · RocketChat/Rocket.Chat.ReactNative

diegolmello · 2026-10-26T17:54:17Z

Proposed changes

React Native 0.87 makes the strict TypeScript API (types_generated) the default. On 0.86 it is opt-in through the react-native-strict-api custom condition. This PR turns it on in tsconfig.json and fixes the 69 type errors it reports. Every fix also compiles against the default types, so tsc passes in both modes.

Refs: TextInput, View and ScrollView refs use ComponentRef<typeof X>. Under the strict API, the component name is no longer an instance type. TextInput refs share a new TextInputInstance type from containers/TextInput.
List footers: ListFooterComponent gets undefined instead of null.
Form submits: react-hook-form handleSubmit is wrapped on onSubmitEditing, since its handler type no longer matches the strict event type.
Removed type exports:
- ViewToken is now derived from FlatListProps.
- AccessibilityActionInfo becomes AccessibilityProps['accessibilityActions'].
Section header: measureInWindow is guarded against a numeric press target.
Voip events: the voip event emitter is typed with the addListener shape shared by NativeEventEmitter and DeviceEventEmitter.
InvertedScrollView: codegenNativeCommands is imported from react-native instead of a deep import.
Style-only props: pointerEvents on the composer placeholder Text and textAlignVertical on the ShareView input move into their StyleSheets. The strict types only accept them as styles.
NativeButton: narrows style to a plain view style.
DatePicker: drops unstable_batchedUpdates. React 19 already batches these updates.
New patch: react-native-easy-grid's typings referenced the removed ViewProperties type. A typings-only patch switches it to ViewProps.

No runtime behaviour change is intended. On 0.86 the strict API reports no InteractionManager or react-native-webview errors, so this PR does not depend on the PRs that handle those.

Issue(s)

https://rocketchat.atlassian.net/browse/NATIVE-1828

How to test or reproduce

Run pnpm tsc and confirm it passes
Remove customConditions from tsconfig.json, run pnpm tsc again, and confirm it still passes
On iOS and Android, log in and open a room
Tap the composer placeholder and confirm the keyboard opens, then send a message
Open Profile, edit a field and save
On the login screen, submit the password with the keyboard's return key

Screenshots

Types of changes

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

Checklist

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

Further comments

app/flatListStrictMode.d.ts stays because the default FlatList types on 0.86 don't include strictMode.

Summary by CodeRabbit

Bug Fixes
- Fixed form submission from the keyboard on sign-in, password reset, and account setup screens.
- Improved Android date-picker behavior by closing the picker after a date is selected.
- Prevented section headers from attempting to measure unsupported touch targets.
Improvements
- Updated text alignment in the share message input for a more consistent layout.
- Improved loading-footer handling across lists while preserving their loading indicators.

coderabbitai · 2026-10-26T17:55:02Z

No actionable comments were generated in the recent review.

Recent review info

Run configuration

Source mode: Auto
Repository: Unavailable
Branch: Unavailable
File: No configuration file from this repository applied
Commit: Unavailable
Layers: Organization UI
Review profile: CHILL
Plan: Advanced
Run ID: b71969cc-3e2f-4e51-ba90-9ad59c1c0bee

Commits

Reviewing files that changed from the base of the PR and between 072e422 and 3a162b4.

Files ignored due to path filters: 1

app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap is excluded by !**/*.snap

Files selected for processing: 41

app/containers/ActionSheet/ActionSheet.tsx
app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
app/containers/ActionSheet/Handle.tsx
app/containers/CustomFields/index.tsx
app/containers/GestureButtons/types.ts
app/containers/InAppNotification/IncomingCallNotification/index.tsx
app/containers/MessageComposer/components/ComposerInput.tsx
app/containers/NativeButton/index.tsx
app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
app/containers/RoomTypeIcon/index.tsx
app/containers/TextInput/FormTextInput.tsx
app/containers/TextInput/TextInput.tsx
app/containers/Touch.tsx
app/containers/UIKit/DatePicker.tsx
app/containers/message/components/Touchable/Touch.tsx
app/containers/message/hooks/useMessageAccessibilityActions.ts
app/definitions/ILivechatEditView.ts
app/lib/services/voip/MediaCallEvents.ts
app/views/CannedResponsesListView/index.tsx
app/views/CategoryView/components/SectionPills.tsx
app/views/DirectoryView/index.tsx
app/views/DiscussionsView/index.tsx
app/views/E2EEncryptionSecurityView/ChangePassword.tsx
app/views/ForgotPasswordView.tsx
app/views/LoginView/UserForm.tsx
app/views/MessagesView/index.tsx
app/views/ProfileView/index.tsx
app/views/RegisterView/index.tsx
app/views/RoomView/List/components/InvertedScrollView.tsx
app/views/RoomView/List/hooks/useFloatingDate.ts
app/views/RoomView/components/JoinCode.tsx
app/views/RoomsListView/components/SectionHeader.tsx
app/views/SearchMessagesView/index.tsx
app/views/SelectedUsersView/index.tsx
app/views/SetUsernameView.tsx
app/views/ShareListView/index.tsx
app/views/ShareView/index.tsx
app/views/ShareView/styles.ts
app/views/ThreadMessagesView/index.tsx
patches/react-native-easy-grid+0.2.2.patch
tsconfig.json

Files with no reviewable changes: 1

app/views/ShareView/index.tsx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 5 remain after this review.

Recent review details

Context from checks skipped due to timeout: 2

GitHub Check: ESLint and Test / run-eslint-and-test
GitHub Check: E2E Shard Preflight

Additional context used

Code guidelines: 1

CLAUDE.md — auto-discovered

Path-based instructions: 1

Source excerpt: Local-first data flow: the UI reads from WatermelonDB, sagas sync it with the server.

CodeRabbit inference engine (CLAUDE.md)

Files:

tsconfig.json
app/views/ThreadMessagesView/index.tsx
app/views/ShareView/styles.ts
app/views/ShareListView/index.tsx
app/views/DiscussionsView/index.tsx
app/views/CannedResponsesListView/index.tsx
app/views/MessagesView/index.tsx
app/views/RoomView/List/components/InvertedScrollView.tsx
app/containers/InAppNotification/IncomingCallNotification/index.tsx
app/lib/services/voip/MediaCallEvents.ts
app/views/SetUsernameView.tsx
app/containers/RoomTypeIcon/index.tsx
app/containers/ActionSheet/Handle.tsx
app/views/LoginView/UserForm.tsx
app/views/SearchMessagesView/index.tsx
app/views/RoomsListView/components/SectionHeader.tsx
app/containers/ActionSheet/ActionSheet.tsx
app/views/RegisterView/index.tsx
app/views/SelectedUsersView/index.tsx
app/containers/Touch.tsx
app/views/CategoryView/components/SectionPills.tsx
app/views/ForgotPasswordView.tsx
app/views/E2EEncryptionSecurityView/ChangePassword.tsx
app/containers/message/hooks/useMessageAccessibilityActions.ts
app/containers/UIKit/DatePicker.tsx
app/containers/TextInput/TextInput.tsx
app/containers/MessageComposer/components/ComposerInput.tsx
app/views/DirectoryView/index.tsx
patches/react-native-easy-grid+0.2.2.patch
app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
app/containers/GestureButtons/types.ts
app/views/RoomView/components/JoinCode.tsx
app/containers/CustomFields/index.tsx
app/containers/message/components/Touchable/Touch.tsx
app/definitions/ILivechatEditView.ts
app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
app/containers/TextInput/FormTextInput.tsx
app/views/ProfileView/index.tsx
app/views/RoomView/List/hooks/useFloatingDate.ts
app/containers/NativeButton/index.tsx

Additional comments: 40

app/containers/MessageComposer/components/ComposerInput.tsx: 1

406-406: LGTM!

Also applies to: 441-441

app/views/CannedResponsesListView/index.tsx: 1

275-275: LGTM!

app/views/DirectoryView/index.tsx: 1

229-229: LGTM!

app/views/DiscussionsView/index.tsx: 1

174-174: LGTM!

app/views/MessagesView/index.tsx: 1

352-352: LGTM!

app/views/SearchMessagesView/index.tsx: 1

305-305: LGTM!

app/views/SelectedUsersView/index.tsx: 1

210-210: LGTM!

app/views/ShareListView/index.tsx: 1

533-533: LGTM!

app/views/ShareView/styles.ts: 1

17-18: LGTM!

app/views/ThreadMessagesView/index.tsx: 1

487-487: LGTM!

app/views/CategoryView/components/SectionPills.tsx: 1

2-2: LGTM!

Also applies to: 13-13

app/containers/ActionSheet/ActionSheet.tsx: 1

3-13: LGTM!

Also applies to: 42-42

app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx: 1

2-2: LGTM!

Also applies to: 10-10, 110-110

app/containers/ActionSheet/Handle.tsx: 1

1-1: LGTM!

Also applies to: 10-10

app/containers/CustomFields/index.tsx: 1

4-4: LGTM!

Also applies to: 12-12

app/containers/GestureButtons/types.ts: 1

1-1: LGTM!

Also applies to: 14-14

app/containers/InAppNotification/IncomingCallNotification/index.tsx: 1

1-1: LGTM!

Also applies to: 37-37

app/containers/NativeButton/index.tsx: 1

1-8: LGTM!

Also applies to: 12-14, 16-16

app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx: 1

2-2: LGTM!

Also applies to: 14-14

app/containers/RoomTypeIcon/index.tsx: 1

2-2: LGTM!

Also applies to: 48-54

app/containers/TextInput/FormTextInput.tsx: 1

2-2: LGTM!

Also applies to: 10-10, 80-80

app/containers/TextInput/TextInput.tsx: 1

1-1: LGTM!

Also applies to: 14-14, 20-20

app/definitions/ILivechatEditView.ts: 1

1-1: LGTM!

Also applies to: 32-35

app/views/E2EEncryptionSecurityView/ChangePassword.tsx: 1

2-2: LGTM!

Also applies to: 8-8, 30-30

app/views/ProfileView/index.tsx: 1

3-3: LGTM!

Also applies to: 18-18, 115-115

app/views/RegisterView/index.tsx: 1

2-2: LGTM!

Also applies to: 15-15, 83-83

app/views/RoomView/components/JoinCode.tsx: 1

2-2: LGTM!

Also applies to: 9-9, 56-56

app/containers/Touch.tsx: 1

9-9: LGTM!

Also applies to: 22-22

app/containers/message/components/Touchable/Touch.tsx: 1

8-8: LGTM!

Also applies to: 23-23, 32-32

app/containers/message/hooks/useMessageAccessibilityActions.ts: 1

1-1: LGTM!

Also applies to: 5-5

app/lib/services/voip/MediaCallEvents.ts: 1

2-2: LGTM!

Also applies to: 12-14

app/views/RoomView/List/hooks/useFloatingDate.ts: 1

2-2: LGTM!

Also applies to: 14-16, 32-32

app/views/RoomView/List/components/InvertedScrollView.tsx: 1

2-10: LGTM!

patches/react-native-easy-grid+0.2.2.patch: 1

1-28: LGTM!

tsconfig.json: 1

19-19: LGTM!

app/containers/UIKit/DatePicker.tsx: 1

2-2: LGTM!

Also applies to: 51-54

app/views/ForgotPasswordView.tsx: 1

84-84: LGTM!

app/views/LoginView/UserForm.tsx: 1

126-126: LGTM!

app/views/SetUsernameView.tsx: 1

112-112: LGTM!

Also applies to: 132-132

app/views/RoomsListView/components/SectionHeader.tsx: 1

60-61: 🎯 Functional Correctness

The numeric-target failure is not established for the supported build.

The handler would skip onToggle if a numeric currentTarget reached it. However, the supported app uses React Native 0.86.3 with the New Architecture, where Fabric press events provide a host instance implementing measureInWindow. The TypeScript union alone does not establish a numeric runtime path.

Walkthrough

This pull request updates React Native component ref and prop types, aligns several declarations with React Native APIs, and changes a set of event-handler and rendering props.

Changes

React Native API updates

Layer / File(s)	Summary
Component ref and prop types `app/containers/ActionSheet/`, `app/containers/CustomFields/index.tsx`, `app/containers/GestureButtons/types.ts`, `app/containers/InAppNotification/IncomingCallNotification/index.tsx`, `app/containers/NativeButton/index.tsx`, `app/containers/RoomTypeIcon/`, `app/containers/TextInput/*`, `app/definitions/ILivechatEditView.ts`, `app/views/E2EEncryptionSecurityView/ChangePassword.tsx`, `app/views/ProfileView/index.tsx`, `app/views/RegisterView/index.tsx`, `app/views/CategoryView/components/SectionPills.tsx`, `app/views/RoomView/components/JoinCode.tsx`	Input refs now use the shared `TextInputInstance` type. Other component refs and style props use React Native component and style types. `NativeButton` now accepts `INativeButtonProps`.
React Native API typing and imports `app/containers/Touch.tsx`, `app/containers/message/components/Touchable/Touch.tsx`, `app/containers/message/hooks/useMessageAccessibilityActions.ts`, `app/lib/services/voip/MediaCallEvents.ts`, `app/views/RoomView/List/components/InvertedScrollView.tsx`, `app/views/RoomView/List/hooks/useFloatingDate.ts`, `patches/react-native-easy-grid+0.2.2.patch`, `tsconfig.json`	Accessibility, event subscription, and viewability declarations now use React Native API types. The message touchable wraps each platform-specific component with `withKeyboardFocus`. The codegen import, grid declarations, and TypeScript custom condition are also updated.
Event and submission handling `app/containers/UIKit/DatePicker.tsx`, `app/views/ForgotPasswordView.tsx`, `app/views/LoginView/UserForm.tsx`, `app/views/SetUsernameView.tsx`, `app/views/RoomsListView/components/SectionHeader.tsx`	Date and Android picker updates run without `unstable_batchedUpdates`. Submit-editing callbacks invoke the handlers returned by `handleSubmit`. `SectionHeader` skips measurement when `event.currentTarget` is numeric.
List and input rendering props `app/views/CannedResponsesListView/index.tsx`, `app/views/DirectoryView/index.tsx`, `app/views/DiscussionsView/index.tsx`, `app/views/MessagesView/index.tsx`, `app/views/SearchMessagesView/index.tsx`, `app/views/SelectedUsersView/index.tsx`, `app/views/ShareListView/index.tsx`, `app/views/ThreadMessagesView/index.tsx`, `app/containers/MessageComposer/components/ComposerInput.tsx`, `app/views/ShareView/*`	List footer fallbacks use `undefined` when no footer is rendered. The composer placeholder receives `pointerEvents: 'none'` through its style, and the ShareView text alignment moves to its style definition.

Priority: Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Refactor

Suggested labels: type: chore

Suggested reviewers: otaviostasiak, rohit3523

Merge Risk: Minimal · up to 3a162

No identified issue blocks merging after the normal checks.

Pre-merge checks: 5

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes enabling the React Native strict TypeScript API and fixing the resulting type issues, which are the main changes in the pull request.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 38 files. (2 skipped: 2 unsupported.)

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Errors were encountered while retrieving linked issues.

Errors: 1

JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

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

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

github-actions · 2026-10-26T18:32:03Z

Android Build Available

Rocket.Chat 4.78.0.110102

Internal App Sharing: https://play.google.com/apps/test/RQQ8k09hlnQ/ahAO29uNSCKwiPdabpKY_yJ4Pfn0QOCC6iLXyF3_t0tks_HtXGwA56aDiAlWk8U-1gPyRJPCACr4rPVTCWHM0cMjMl

github-actions · 2026-10-26T20:07:46Z

iOS Build Available

Rocket.Chat 4.78.0.110104

diegolmello added 2 commits October 26, 2026 14:34

refactor: fix types for the React Native strict TypeScript API

1281d78

test: update composer snapshots for placeholder pointerEvents style

3a162b4

diegolmello deployed to approve_e2e_testing October 26, 2026 17:55 — with GitHub Actions Active

coderabbitai Bot added the type: chore label Oct 26, 2026

diegolmello deployed to ios_build October 26, 2026 17:58 — with GitHub Actions Active

diegolmello temporarily deployed to android_build October 26, 2026 17:58 — with GitHub Actions Inactive

diegolmello requested a deployment to upload_android October 26, 2026 18:30 — with GitHub Actions Waiting

diegolmello mentioned this pull request Oct 26, 2026

chore: combine React Native 0.88 preparation PRs #7851

Draft

2 of 10 tasks

Navigation Menu

Repository navigation

refactor: fix types for the React Native strict TypeScript API - #7846

refactor: fix types for the React Native strict TypeScript API#7846
diegolmello wants to merge 2 commits into
developfrom
refactor/react-native-strict-types

diegolmello commented Oct 26, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 26, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 26, 2026

Uh oh!

github-actions Bot commented Oct 26, 2026

Uh oh!

This branch is waiting to be deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

diegolmello commented Oct 26, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Issue(s)

How to test or reproduce

Screenshots

Types of changes

Checklist

Further comments

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

github-actions Bot commented Oct 26, 2026

Uh oh!

github-actions Bot commented Oct 26, 2026

Uh oh!

This branch is waiting to be deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

diegolmello commented Oct 26, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 26, 2026 •

edited

Loading