title: React Native one to one conversation using socket.io
body: <p>i currently have a react native app with nodejs express Sequelize as my backend and postgres as my database.</p>
  <p>So, on my posts screen next to each post, i have a text input and a button where the current user can send the user of the post an initial message. Once the button is pressed, a conversation between these 2 users about this post is created in my database and stored in my conversation table and an entry of the message sent is also stored in my messages table.</p>
  <p>I have implemented bidirectional communication between these 2 users. But my problem is i need to refresh the app in order to show the user current user the sent message and to show the receiving user the received message.</p>
  <p>I have been researching for a while now and trying to understand how to implement this feature using socket.io but could not get anywhere.</p>
  <p>Client Side</p>
  <p>Here is my Chat Screen</p>
  <pre><code> function ChatScreen({route,navigation}) {
  
   const message = route.params.message;
   const [messages, setMessages] = useState(message.Messages);
   const [text, setText] = useState('');
   const { user } = useAuth();
   const [socket, setSocket] = useState(null);
  
  
   useEffect(() =&gt; {
   const newsocket =io.connect(socketurl)
  setMessages(messages);
  newsocket.on('connection', msg =&gt; {
      console.log('i have joined')
      setMessages(messages=&gt;messages.concat(msg))
      setSocket(newsocket)
   })
   return()=&gt;newsocket.close;
   }, []);
  
  const updateText=(text)=&gt;{
  setText(text);
  }
  
    const onSend = (ConversationId,senderId,receiverId,message) =&gt; {
    console.log(&quot;sent&quot;)
  messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
  setText(&quot;&quot;)
  
  socket.emit('message', { to: (user.id===route.params.message.user1 ? 
  route.params.message.user2 : route.params.message.user1), from: 
  user.id, message,ConversationId });
  };
  
  return(
  
  &lt;Text&gt;{user.id === message.Recipient.id ? 
  message.Creator.name:message.Recipient.name}&lt;/Text&gt;
  
      &lt;KeyboardAvoidingView 
      style={{
          display: &quot;flex&quot;,
          flex: 1,
        }}
        behavior={Platform.OS === &quot;ios&quot; ? &quot;padding&quot; : null}
        keyboardVerticalOffset={Platform.OS === &quot;ios&quot; ? 25 : 0}
      &gt;
  
  &lt;FlatList
      inverted
      data={message.Messages}
      keyExtractor={(message) =&gt; message.id.toString()}
      renderItem={({item,index})=&gt;(
          &lt;MessageBubble
          text={item.message}
          mine={item.senderId !== user.id}
          /&gt;
      )}/&gt;
  
      &lt;View style={styles.messageBoxContainer}&gt;
          &lt;TextInput 
          style={styles.messageBox} 
          placeholder=&quot;Message...&quot; 
          multiline
          clearButtonMode=&quot;while-editing&quot;
          onChangeText={updateText} 
          value={text} 
          autoCorrect={false}
          /&gt;
          &lt;TouchableOpacity onPress={onSend}&gt;
              &lt;Text style={styles.send}&gt;Send&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
      &lt;/KeyboardAvoidingView&gt;
  )
  </code></pre>
  <p>Server Side</p>
  <p>index.js</p>
  <pre><code>const express = require(&quot;express&quot;);
  const app = express();
  const http = require(&quot;http&quot;);
  const socketio = require(&quot;socket.io&quot;)
  const server=http.createServer(app);
  const io =socketio(server)
  
  io.on(&quot;connection&quot;, socket =&gt; {
   socket.on('message', (data) =&gt; {
    socket.join(data.ConversationId);
    io.sockets.in(data.to).emit('send_message', { message: data.message, 
    to: data.to });
  });
  });
  
  const port = process.env.PORT || config.get(&quot;port&quot;);
  server.listen(port, function () {
  console.log(`Server started on port ${port}...`);
  });
  </code></pre>
  <p>Currently when i send a message, the message gets stored in my database but my chat does not update instantly (ie. not live), i need to refresh my app and the messages appear.</p>
  <p>Can someone please help me and check if the implementation of socket i currently have is correct and if so, how do i render my flatlist instantly?</p>
  <p><em>UPDATE</em></p>
  <p>i think something is wrong in my useEffect, because when i open the chat i am not getting &quot;i have joined&quot; in the console:</p>
  <pre><code>useEffect(() =&gt; {
  setMessages(messages);
  socket.on('connect', msg =&gt; {
      console.log('i have joined')
      setMessages(messages=&gt;messages.concat(msg))
   })
   }, []);
  </code></pre>