I am having an intermittent issue when pressing on TextInput. Text Input is inside my GenericBottomDrawer component (which is in essence React Native Modal). Every ~3rd time when I press on it, it immediately blurs and dissapears, closing the bottom drawer in the process, and preventing me from opening the same comments section (CommentsBottomDrawer) again. When trying to debug this, I logged isBottomDrawerOpen to the console, and it seems to not change when the issue happens - which leads me to believe that the state of the Drawer is Open, even though that's not what the screen shows. More detailed logging also shows "Input focused" instantly followed by "Input blurred".

Error video

function CommentPostBar() {
    const [ newComment, setNewComment ] = useState(''); // State to manage the comment input

    return (
        <View style={styles.postBarContainer}>
            <TextInput
                value={newComment}
                onChangeText={text => setNewComment(text)}
                defaultValue=''
                placeholder="Write a comment..."
                multiline={true}
                numberOfLines={4}
                style={stylesmentInputStyle}
                onBlur={() => { console.log("Comment post bar blurred"); }}
                onFocus={() => console.log("Comment Post Bar: Input focused")} />
        </View>
    );
};

function CommentBottomDrawer({ isBottomDrawerOpen, closeBottomDrawer, post_ID }) {
    const [ comments, setComments ] = useState([]);
    const [ lastFetchedPostID, setLastFetchedPostID ] = useState(null); // to make sure we don't fetch same comments twice

    const fetchComments = async () => {
        try {
            const postComments = await fetchData(hostUrl + 'posts/' + post_ID + '/comments');
            setComments(postComments);
            setLastFetchedPostID(post_ID);
            logger.info('Fetched comments for post_ID: ' + post_ID, postComments);
        }
        catch (error) {
            logger.error('Error fetching comments for post_ID: ' + post_ID, error);
        }
    };

    useEffect(() => {
        if (isBottomDrawerOpen)
            if (post_ID !== lastFetchedPostID)
            fetchComments();
    }, [ isBottomDrawerOpen ]);

    return (
        <GenericBottomDrawer
            isBottomDrawerOpen={isBottomDrawerOpen}
            closeBottomDrawer={closeBottomDrawer}>
            <GenericBottomDrawer.Header>
                <Text style={styles.createPostTitle}>Comments</Text>
            </GenericBottomDrawer.Header>
            <GenericBottomDrawer.Body>
                <Divider style={styles.separator} />
                <FlatList
                    data={comments}
                    renderItem={({ item }) => <CommentItem comment={item} />}
                    keyExtractor={(item) => item.post_comment_ID.toString()}
                    ListEmptyComponent={<Text style={styles.noCommentsText}>No comments yet</Text>}
                />
            </GenericBottomDrawer.Body>
            <GenericBottomDrawer.Footer>
                <CommentPostBar />
            </GenericBottomDrawer.Footer>
        </GenericBottomDrawer>
    );
};

I tried many things to solve it including:

• On FlatList above the TextInput: keyboardShouldPersistTaps="handled" , keyboardShouldPersistTaps="always", removeClippedSubviews=false
• Wrapping the TextInput inside a TouchableWithoutFeedback
• Wrapping the drawer inside KeyboardAvoidingView
• Using ref instead if value in TextInput and manual focus onPress

At this point I ran out of ideas...