[IOS Only] RN 0.81.4 - Unable to Type

[MoamberRaza]

i am looking for someone who is having same issue where you are unable to type anything in input while having latest RN version after 0.80

[Stephane-Homie]

Same. started breaking after I updated to Expo 54.

Using a custom composer to bypass the issue for now. (Took the answer from this issue #2647)

[garetjaxor]

That seems to be a different problem than MoamberRaza's, you still see the text as its entered but then it scrolls up and is hidden for multiline. I now have the issue I can't input a single character of text after going to .80 and this is with 2.6.5. Also I get no errors in react native devtools, the keyboard just seems to be disabled

[MoamberRaza]

this issue only occurs when we use rn version above then 0.80
because of Fabric which not efficiently handled by this lib as of now last update 6 months ago. probably we need an patch update for ios only.
are you facing it at android too ?

[garetjaxor]

Sorry I started with ios so haven't tested with android yet.

[garetjaxor]

i rolled back to RN 0.79.6 and gifted chat works again ie when i try and enter text in a chatroom it works. I had to roll back react-native-reanimated from 4.x to 3.x and disable the new architecture.

[MikeW305]

Have the same issue when testing an upgrade to expo 54.

[MoamberRaza]

0.80 is fine and reanimated 4.x also fine and no need for disable new arch.

[garetjaxor]

You are right - just upgraded to 0.80.2, reanimated 4.x, and enabled new arch and everything is fine so it appears to be 0.81x

[magnin]

I've the same problem with Expo 54.0.7 new arch, React Native 0.80.2 and Reanimated 4.1.0 ... keyboard is freeze

[Traviskn]

I'm attempting to upgrade to 0.81.4 and I've found that setting state to re-render in the onFocus prop causes the text input to immediately blur. We have the new architecture disabled due to several dependencies lacking support for it. Might back down to 0.80 if it works normally

[javoxir97]

diff --git a/node_modules/react-native-gifted-chat/lib/Composer.js b/node_modules/react-native-gifted-chat/lib/Composer.js
index becd702..a44af55 100644
--- a/node_modules/react-native-gifted-chat/lib/Composer.js
+++ b/node_modules/react-native-gifted-chat/lib/Composer.js
@@ -3,7 +3,7 @@ import { Platform, StyleSheet, TextInput, } from 'react-native';
 import { MIN_COMPOSER_HEIGHT, DEFAULT_PLACEHOLDER } from './Constant';
 import Color from './Color';
 import stylesCommon from './styles';
-export function Composer({ composerHeight = MIN_COMPOSER_HEIGHT, disableComposer = false, keyboardAppearance = 'default', multiline = true, onInputSizeChanged, onTextChanged, placeholder = DEFAULT_PLACEHOLDER, placeholderTextColor = Color.defaultColor, text = '', textInputAutoFocus = false, textInputProps, textInputStyle, }) {
+export function Composer({ composerHeight = MIN_COMPOSER_HEIGHT, disableComposer = false, keyboardAppearance = 'default', multiline = true, onInputSizeChanged, onTextChanged, placeholder = DEFAULT_PLACEHOLDER, placeholderTextColor = Color.defaultColor, text = '', textInputAutoFocus = false, ref, textInputStyle, }) {
     const dimensionsRef = useRef(null);
     const determineInputSizeChange = useCallback((dimensions) => {
         // Support earlier versions of React Native on Android.
@@ -32,7 +32,7 @@ export function Composer({ composerHeight = MIN_COMPOSER_HEIGHT, disableComposer
                     },
                 }),
             },
-        ]} autoFocus={textInputAutoFocus} value={text} enablesReturnKeyAutomatically underlineColorAndroid='transparent' keyboardAppearance={keyboardAppearance} {...textInputProps}/>);
+        ]} autoFocus={textInputAutoFocus} value={text} enablesReturnKeyAutomatically underlineColorAndroid='transparent' keyboardAppearance={keyboardAppearance} ref={ref}/>);
 }
 const styles = StyleSheet.create({
     textInput: {
diff --git a/node_modules/react-native-gifted-chat/lib/GiftedChat/index.js b/node_modules/react-native-gifted-chat/lib/GiftedChat/index.js
index 4fc42d2..5112556 100644
--- a/node_modules/react-native-gifted-chat/lib/GiftedChat/index.js
+++ b/node_modules/react-native-gifted-chat/lib/GiftedChat/index.js
@@ -195,9 +195,9 @@ function GiftedChat(props) {
             onSend: _onSend,
             onInputSizeChanged,
             onTextChanged: _onInputTextChanged,
+            ref: textInputRef,
             textInputProps: {
                 ...textInputProps,
-                ref: textInputRef,
                 maxLength: isTypingDisabled ? 0 : maxInputLength,
             },
         };

it seems some issue with ref when we spreading it inside textInputProps

[MoamberRaza]

so now are we expecting any patch from team.

[MikeW305]

The patch is a good start, but breaks the actual textInputProps.

Have been reading on the changes with 0.81 and attempting to work on a fix now that I’m playing with 54 again.

This is a new issue, but at the same time there haven’t been any updates since March

[MikeW305]

Ended up modifying my existing renderComposer to get this working. I'm already using a custom renderSend, renderMessageAudio, etc..

What I did was not too far off from the custom composer suggestion above. If you're not using a custom renderSend this is not going to work.

This is a minimal example just for the purposes of showing that entering text should be possible.

import React, { useRef, useState } from "react";
import {
    GiftedChat,
    ComposerProps,
} from "react-native-gifted-chat";
import {
    TextInput,
    View,
    StyleSheet,
    TouchableOpacity,
    Text,
} from "react-native";

export default function ChatScreen() {
    const [messages, setMessages] = useState<any[]>([]);
    const [text, setText] = useState("");
    const textInputRef = useRef<TextInput>(null);

    const onSend = (newMessages = []) => {
        setMessages((prev) => GiftedChat.append(prev, newMessages));
        setText("");
        textInputRef.current?.focus();
    };

    const renderComposer = (props: ComposerProps) => {
        return (
            <View style={styles.composerContainer}>
                <TextInput
                    ref={textInputRef}
                    style={styles.input}
                    placeholder="Type a message..."
                    placeholderTextColor="#888"
                    value={text}
                    onChangeText={setText}
                    multiline
                />
            </View>
        );
    };

    const renderSend = () => {
        return (
            <TouchableOpacity
                style={styles.sendButton}
                onPress={() => {
                    if (text.trim().length > 0) {
                        const newMessage = {
                            _id: Math.random().toString(36).substring(7), // unique-ish id
                            text: text,
                            createdAt: new Date(),
                            user: {
                                _id: 2,
                                name: "React Native",
                                avatar: "https://placeimg.com/140/140/any",
                            },
                        };
                        onSend([newMessage]);
                    }
                }}
            >
                <Text style={styles.sendText}>Send</Text>
            </TouchableOpacity>
        );
    };

    return (
            <GiftedChat
                messages={messages}
                onSend={onSend}
                user={{ _id: 1 }}
                renderComposer={renderComposer}
                renderSend={renderSend}
                keyboardShouldPersistTaps="handled"
            />
    );
}

const styles = StyleSheet.create({
    composerContainer: {
        flex: 1,
        borderTopWidth: 1,
        borderColor: "#ddd",
        padding: 8,
    },
    input: {
        flex: 1,
        minHeight: 40,
        fontSize: 16,
        padding: 8,
        borderRadius: 8,
    },
    sendButton: {
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: 12,
        marginBottom: 6,
    },
    sendText: {
        color: "#007AFF",
        fontWeight: "600",
        fontSize: 16,
    },
});