Screen flickers when on navigated page

Question

I am having an issue with my component i created a message card which when clicked goes to a chat page that displays messages using react-native-gifted-chat which works fine but when i wrap the message card which goes to the chat page with swipeable to make it swipeable using react native gesture handler when i now click on it to navigate to the chat page thechat page flickers continiously and doesn't stop till maybe i click on the input to type a text message to send how do i fiex this

code index.tsx

    import {
  View,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
} from "react-native";
import React, { useState } from "react";
import {
  SafeAreaView,
  useSafeAreaInsets,
} from "react-native-safe-area-context";
import { fontStyles } from "~/lib/constants";
import { Feather } from "@expo/vector-icons";
import { Mail, Search } from "lucide-react-native";
import { Input } from "~/components/ui/input";
import { cn } from "~/lib/utils";
import MessageCard from "~/components/professional/MessageCard";
import { Button } from "~/components/ui/button";
import all from "~/utils/data/messages/all.json";
import { Link, useRouter } from "expo-router";
import SwipeableComponent from "~/components/ui/SwipeableComponent";
const Messages = () => {
  const insets = useSafeAreaInsets();
  const [isFocused, setIsFocused] = useState(false);
  const router = useRouter();

  const goToChat = (id: number) => {
    router.push(`/professional/messages/${id}`);
  };

  return (
    
      
        
          Messages
          
            
            
          
        
        
          
            
             setIsFocused(true)}
              onBlur={() => setIsFocused(false)}
            />
          
        
      
      
        
           item.id.toString()}
            renderItem={({ item, index }) => (
              
                 goToChat(index)}>
                  
                
              
            )}
            ListEmptyComponent={
              
                
                  
                
                No messages yet..
                
              
            }
          />
        
      
    
  );
};

export default Messages;

swipeablecomponent.tsx

 import { Ionicons } from "@expo/vector-icons";
import React from "react";
import { TouchableOpacity } from "react-native";
import { Text } from "react-native";

import { GestureHandlerRootView } from "react-native-gesture-handler";
import ReanimatedSwipeable from "react-native-gesture-handler/ReanimatedSwipeable";
import Reanimated, {
  SharedValue,
  useAnimatedStyle,
} from "react-native-reanimated";
import { fontStyles } from "~/lib/constants";
type Props = {
  children: React.ReactNode;
};

function RightAction(prog: SharedValue, drag: SharedValue) {
  const styleAnimation = useAnimatedStyle(() => {
    return {
      transform: [{ translateX: drag.value + 177 }],
    };
  });

  return (
    
       console.log("More action")}
      >
        
        
          More
        
      
       console.log("Delete action")}
      >
        
        
          Delete
        
      
    
  );
}

export default function Example({ children }: Props) {
  return (
    
      
        {children}
      
    
  );
}

[id].tsx

import { View, Text, ImageBackground } from "react-native";
import React, { useCallback, useEffect, useRef, useState } from "react";
import {
  Bubble,
  GiftedChat,
  IMessage,
  InputToolbar,
  Send,
} from "react-native-gifted-chat";
import messagesData from "~/utils/data/messages/messages.json";
import {
  SafeAreaView,
  useSafeAreaInsets,
} from "react-native-safe-area-context";
import { fontStyles } from "~/lib/constants";
import { Feather, Ionicons } from "@expo/vector-icons";
import { SwipeableMethods } from "react-native-gesture-handler/lib/typescript/components/ReanimatedSwipeable";
import ChatMessageBox from "~/components/professional/ChatMessageBox";
import ReplyMessageBar from "~/components/professional/ReplyMessageBar";
import Animated from "react-native-reanimated";

const MessageId = () => {
  const [messages, setMessages] = useState([]);
  const [replyMessage, setReplyMessage] = useState();
  const [text, setText] = useState("");
  const insets = useSafeAreaInsets();
  const swipeableRowRef = useRef(null)

  useEffect(() => {
    setMessages([
      ...messagesData.map((message) => {
        return {
          _id: message.id,
          text: message.msg,
          createdAt: new Date(message.date),
          user: {
            _id: message.from,
            name: message.from ? "You" : "Bob",
          },
        };
      }),
      {
        _id: 0,
        text: "This is a system message",
        createdAt: new Date(),
        system: true,
        user: {
          _id: 0,
          name: "Hustle Link",
        },
      },
    ]);
  }, []);

  const onSend = useCallback((messages = []) => {
    setMessages((previousMessages) =>
      GiftedChat.append(previousMessages, messages)
    );
  }, []);

  const updateRowRef = useCallback(
    (ref: any) => {
      if (
        ref &&
        replyMessage &&
        ref.props.children.props.currentMessage?._id === replyMessage._id
      ) {
        swipeableRowRef.current = ref;
      }
    },
    [replyMessage]
  );

  useEffect(() => {
    if (replyMessage && swipeableRowRef.current) {
      swipeableRowRef.current.close();
      swipeableRowRef.current = null;
    }
  }, [replyMessage]);


  return (
    
       onSend(messages)}
        user={{
          _id: 1,
        }}
        onInputTextChanged={setText}
        renderAvatar={null}
        renderBubble={(props) => {
          return (
            
          );
        }}
        renderSend={(props) => {
          return (
            
              {text.length > 0 && (
                
                  
                
              )}
              {text.length === 0 && (
                
                  
                  
                
              )}
            
          );
        }}
        textInputProps={{
          ...fontStyles.body,
          backgroundColor: 'white',
          marginBottom: 8,
          borderRadius: 20,
          paddingHorizontal: 10,
          paddingTop: 7,
          borderWidth: 1,
          borderColor: '#d1d5db'
        }}
        renderInputToolbar={(props) => {
          return (
             (
                
                  
                
              )}
            />
          );
        }}
        renderMessage={(props) => (
          
        )}
        renderChatFooter={() => (
           setReplyMessage(null)} message={replyMessage} />
        )}
      />
    
  );
};

export default MessageId;

Screen flickers when on navigated page

Answers (0)

Related Questions