`KeyboardChatScrollView` - complete example is not copy/paste ready

[kirillzyusko]

Describe the bug

In https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-chat-app#complete-example the "Complete example" is actually not complete.

Code snippet
Add your code snippet where error has been occurred.

Repo for reproducing

https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-chat-app

To Reproduce
Steps to reproduce the behavior:

1. Go to https://kirillzyusko.github.io/react-native-keyboard-controller/docs/guides/building-chat-app#complete-example
2. Click on "Copy code" button
3. Paste code in example app
4. See that styles are missing, Messages component is missing, unused imports are used, etc.

Expected behavior

I think it should be copy/paste ready so that people can grab it in their app and quickly check how code works

Screenshots

Smartphone (please complete the following information):

• Desktop OS: MacOS 26.5
• Device: Chrome browser
• OS: MacOS 26.5
• RN version: 0.81.5
• RN architecture: new
• JS engine: Hermes
• Library version: 1.22.3

Additional context

Most likely we were in rush to release it and simply forgot to make it copy/pastable and we left AI written code.

[kirillzyusko]

Updated code:

import React, { forwardRef, useCallback, useRef, useState } from "react";
import {
  FlatList,
  type LayoutChangeEvent,
  type ScrollViewProps,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import {
  KeyboardChatScrollView,
  type KeyboardChatScrollViewRef,
  KeyboardGestureArea,
  KeyboardStickyView,
} from "react-native-keyboard-controller";
import { useSharedValue, withTiming } from "react-native-reanimated";
import {
  SafeAreaView,
  useSafeAreaInsets,
} from "react-native-safe-area-context";

import type { KeyboardChatScrollViewProps } from "react-native-keyboard-controller";

function Message({ text, sender }: { text: string; sender: boolean }) {
  return (
    <View style={sender ? styles.senderContainer : styles.recipientContainer}>
      <Text style={styles.message}>{text}</Text>
    </View>
  );
}

const MARGIN = 8;
const INPUT_HEIGHT = 42;
const TEXT_INPUT_HEIGHT = INPUT_HEIGHT + MARGIN;

// Wrapper for virtualized lists
const ChatScrollView = forwardRef<
  KeyboardChatScrollViewRef,
  ScrollViewProps & KeyboardChatScrollViewProps
>((props, ref) => {
  const { bottom } = useSafeAreaInsets();

  return (
    <KeyboardChatScrollView
      ref={ref}
      automaticallyAdjustContentInsets={false}
      contentInsetAdjustmentBehavior="never"
      keyboardDismissMode="interactive"
      offset={bottom - MARGIN}
      {...props}
    />
  );
});

function ChatScreen() {
  const textInputRef = useRef<TextInput>(null);
  const textRef = useRef("");
  const [messages, setMessages] = useState([
    { id: "1786111174702", text: "Hello", sender: false },
  ]);
  const { bottom } = useSafeAreaInsets();
  const extraContentPadding = useSharedValue(0);

  const renderScrollComponent = useCallback(
    (props: ScrollViewProps) => (
      <ChatScrollView {...props} extraContentPadding={extraContentPadding} />
    ),
    [extraContentPadding],
  );

  const onSend = useCallback(() => {
    const text = textRef.current.trim();

    if (!text) {
      return;
    }

    setMessages((prev) => [
      // for inverted list we need to insert new message in the beginning of the history
      { id: String(Date.now()), text, sender: true },
      ...prev,
    ]);
    textInputRef.current?.clear();
    textRef.current = "";
  }, []);

  const onInputLayout = useCallback(
    (e: LayoutChangeEvent) => {
      extraContentPadding.value = withTiming(
        Math.max(e.nativeEvent.layout.height - INPUT_HEIGHT, 0),
        { duration: 250 },
      );
    },
    [extraContentPadding],
  );

  return (
    <SafeAreaView edges={["bottom"]} style={styles.container}>
      <KeyboardGestureArea
        interpolator="ios"
        offset={INPUT_HEIGHT}
        style={styles.container}
        textInputNativeID="chat-input"
      >
        <FlatList
          inverted
          contentContainerStyle={{ paddingTop: TEXT_INPUT_HEIGHT }}
          data={messages}
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => <Message {...item} />}
          renderScrollComponent={renderScrollComponent}
        />
        <KeyboardStickyView
          offset={{ opened: bottom - MARGIN }}
          style={styles.composer}
        >
          <TextInput
            ref={textInputRef}
            multiline
            nativeID="chat-input"
            placeholder="Type a message..."
            style={styles.input}
            onChangeText={(text) => (textRef.current = text)}
            onLayout={onInputLayout}
          />
          <TouchableOpacity style={styles.send} onPress={onSend}>
            <Text>Send</Text>
          </TouchableOpacity>
        </KeyboardStickyView>
      </KeyboardGestureArea>
    </SafeAreaView>
  );
}

const container = {
  borderRadius: 10,
  padding: 10,
  margin: 10,
  marginVertical: 5,
  maxWidth: "80%" as const,
};

const styles = StyleSheet.create({
  container: {
    justifyContent: "flex-end",
    flex: 1,
    backgroundColor: "#3A3A3C",
  },
  input: {
    flex: 1,
    margin: MARGIN,
    marginBottom: 0,
    padding: MARGIN,
    borderRadius: 99,
    borderWidth: 1,
    borderColor: "#BCBCBC",
    backgroundColor: "#3A3A3C66",
  },
  composer: {
    position: "absolute",
    width: "100%",
    minHeight: TEXT_INPUT_HEIGHT,
    flexDirection: "row",
  },
  send: {
    right: MARGIN,
    padding: MARGIN,
    marginTop: MARGIN,
    backgroundColor: "white",
    justifyContent: "center",
    borderRadius: 16,
    marginLeft: MARGIN,
  },
  senderContainer: {
    alignSelf: "flex-end",
    backgroundColor: "#F8F8FC",
    ...container,
  },
  recipientContainer: {
    alignSelf: "flex-start",
    backgroundColor: "#64D2FF",
    ...container,
  },
  message: {
    color: "#000000",
  },
});

export default ChatScreen;

---

Let's also update expo snack (Expo SDK 55 + latest RNKC version)?