Socket.IO Chat App in React Native for iOS/Android

Set up the socket.io backend for mobile clients by creating a backend folder, initializing npm, installing socket.io, and building a server that requires socket.io and listens on a port.

Learn how the server broadcasts messages with io.emit, how the client listens for the message event, and how React Native updates and renders the chat list.

Install gifted chat to bootstrap the UI in the React Native chat app and apply a keyboard avoiding view on Android.

Learn how to prevent client spoofing by mapping socket IDs to user IDs on the server and sending properly attributed messages, while performing house cleaning in the chat app code.

Map socket IDs to user IDs, create and broadcast a full message object (id, userId, text), and display blue sender bubbles for self messages in the React Native Socket.IO chat.

Add username functionality to the socket.io backend by using a user object with id and username. Extend the mobile client to enter a username before joining the chat.

Learn how to implement a join flow in a React Native socket.io chat app by creating a join screen, capturing a username, and conditionally rendering the chat after joining.

Polish the join screen by increasing the input font to 30, spacing the button and text input, and centering the username while typing to prevent keyboard overlap.

Extend a Socket.IO chat app in React Native to display a user list and enable private chats by tapping avatars. Use React Navigation to support in app chat flows.

Learn to install and configure react-navigation in a React Native iOS/Android app, implement an authentication flow with switch and stack navigators, and wire up join and home screens for chat.

Introduce Redux for centralized state management in the React Native socket.io chat app, using Redux actions to emit join chat events and manage in-background messages.

Set up redux and redux-socket.io in a React Native socket.io chat app, create a socket IO middleware, and implement a reducer and store to dispatch actions and handle server events.

Display real-time online users in a React Native chat app using a flat list, manage the online state with useSelector, and handle disconnects to keep the list updated.

Add a 100x100 avatar to each friend list item and wrap items in TouchableOpacity to navigate to the chat screen with the selected user, using unique keys for stability.

Tap a user in the friend list to navigate to the chat screen via the navigation prop, passing the username for the chat header and enabling messages to that user.

Illustrates sending a private message to a socket.io backend by dispatching a server-private-message action with text and user ID, while handling keyboard offset for Android and iOS.

Create the selfUser state property by updating the redux store with the connected user id from a socket.io self user event, then access it in the chat screen with useSelector.

Append sent messages locally by updating the Redux state: create a message object, set the conversation ID from navigation, and append to the relevant conversation's messages.