docs: make chat app "Complete example" copy/paste ready

[giaBaoJS]

📜 Description

Replaces the "Complete example" snippet on the Building a chat app guide with the corrected version you posted in #1590, so the code compiles as-is when copied into an app.

The snippet on main fails to compile for exactly the reasons listed in the issue — it references INITIAL_MESSAGES, Message and styles which are never defined, renders <Text> which is never imported, and leaves StyleSheet and View imported but unused.

Applied to both docs/docs/guides/building-chat-app.mdx and docs/versioned_docs/version-1.22.0/guides/building-chat-app.mdx — those two files are byte-identical, and I kept them that way.

Two notes on scope:

• Expo Snack not touched. You also asked about refreshing the Snack to Expo SDK 55 + latest RNKC. <ExpoSnack id="@kirylziusko/c0b7f0" /> lives on your account, so I can't update it from the outside and left the id as-is. Happy to do that part too if you share access or paste an updated id — otherwise the embedded Snack still shows the old code.
• version-1.21.0 left frozen. docs/versioned_docs/version-1.21.0/guides/building-chat-app.mdx carries the same broken snippet, but against the 1.21 API (React.ElementRef<typeof KeyboardChatScrollView> rather than the exported KeyboardChatScrollViewRef), so the fix isn't a straight copy. I followed the precedent of 608a696 (docs: remove duplicated words), which only touched the current docs plus the then-latest versioned copy. Say the word and I'll port it back.

💡 Motivation and Context

Fixes #1590

📢 Changelog

JS

• No changes. Documentation only — no library source, types, or public API touched.

iOS

• No changes.

Android

• No changes.

🤔 How Has This Been Tested?

The docs build passes on main too, since MDX doesn't type-check fenced code blocks — so I compiled the snippet directly rather than relying on the docs build to catch this.

1. Type-checked the snippet. Extracted the fenced tsx block straight out of the .mdx into a scratch .tsx file, checked with the repo's root tsconfig.json compiler options (strict, noUnusedLocals, noUnusedParameters), react-native-keyboard-controller mapped to ./src/index.

Before, from the snippet on main:

snippet.tsx(4,3): error TS6133: 'StyleSheet' is declared but its value is never read.
snippet.tsx(7,3): error TS6133: 'View' is declared but its value is never read.
snippet.tsx(47,10): error TS6133: 'ChatScreen' is declared but its value is never read.
snippet.tsx(50,44): error TS2304: Cannot find name 'INITIAL_MESSAGES'.
snippet.tsx(65,18): error TS7006: Parameter 'prev' implicitly has an 'any' type.
snippet.tsx(81,45): error TS2304: Cannot find name 'styles'.
snippet.tsx(85,16): error TS2304: Cannot find name 'styles'.
snippet.tsx(93,38): error TS2552: Cannot find name 'Message'. Did you mean 'messages'?
snippet.tsx(98,18): error TS2304: Cannot find name 'styles'.
snippet.tsx(105,20): error TS2304: Cannot find name 'styles'.
snippet.tsx(110,14): error TS2693: 'Text' only refers to a type, but is being used as a value here.
snippet.tsx(110,25): error TS2693: 'Text' only refers to a type, but is being used as a value here.

After, re-extracted from the edited .mdx in this PR: clean, exit code 0, no diagnostics. Your snippet compiled as-is — I made no corrections to it.

2. cd docs && yarn install --frozen-lockfile && yarn build — Server: Compiled successfully, Client: Compiled successfully, Generated static files in "build".

3. yarn markdownlint-cli2 "**/*.md" "#node_modules" (from docs/) — Linting: 316 file(s), Summary: 0 error(s).

4. prettier --check on both changed files — All matched files use Prettier code style!

5. npx jest src — 27 passed, 27 total suites, 214 passed, 214 total tests. Unchanged, as expected for a docs-only change.

The snippet also produces strictly fewer ESLint findings than the one it replaces (the remaining ones are react-perf / jsx-no-bind advisories that were already present, and .mdx code blocks aren't linted in CI anyway), so I left your code untouched rather than restyling it.

📸 Screenshots (if appropriate):

Not applicable — no rendered-output change beyond the code block contents.

📝 Checklist

• CI successfully passed
• I added new mocks and corresponding unit-tests if library API was changed — n/a, no API change

[kirillzyusko]

Thanks for PR @giaBaoJS

I'm closing this in favour of #1672

I didn't want to ask you to add many minor changes, so decided to handle it myself + update Snack example. Thank you for your contribution!