Chat app from scratch with React Native and Java (Part 1 — frontend)

Let’s build a chat app from scratch with React Native, Java and WebSockets!

Part 2: https://medium.com/@tozaicevas/chat-app-from-scratch-with-react-native-and-java-part-2-backend-deef6fb38bad. Source code: https://github.com/zaicevas/chat-demo

Ladies and gentlemen, I recently spent some time working with WebSockets by writing a simple chat app and was amazed by how easy it is, so let me enlighten you as well!

We’ll use

• Expo
• Spring Boot
• WebSockets
• React Native Gifted Chat

P.S. Newest versions as of 2020–01

Mobile UI in part 1 and Java backend in part 2 of this tutorial.

The only things that we need for this tutorial are expo and a phone (you can use android/iOS emulators if you want)

Setting up expo

• Runnpm install expo-cli --global This will install the expo so that we can run all the features expo provides us (creating an initial project, running it on our phone)

Note: if you don’t have npmyou can get it by executing pacman -S npm nodejsor apt-get install npm nodejson Linux machines and https://nodejs.org/en/download/ for Windows.

• Run expo initand choose blank (managed workflow). This will create an empty project.
• Move to the directory of the created project and run expo start
• You should see a new tab opened in your browser, if you don’t — open http://localhost:19002/
• Download expo mobile app for Android/iOS
• Scan the QR code

Note: If the app doesn’t load, try switching to Tunnel instead of LAN in the browser tab.

Getting name from the user

First of all, we need to get a name from the user. Open App.js and let’s start with this code snippet, which I will explain soon:

We should now see this layout:

Note: it will look a little differently in android

With this code, we are able to read the name from the user, but we are not doing anything with it just yet. As soon as user presses Enter, the screen becomes empty. That’s okay, it’s expected behavior for now.

As you can see, we made a couple of changes in the code:

1. Added TextInput, Button
2. Added name, isEnter React hooks
3. Added conditional rendering based on whether user has pressed Enter
4. Changed function App() to a lambda

For those unfamiliar with React or React hooks — shortly speaking, we create 2 variables name and isEnter which are managed by React. Whenever we change them, React handles the changes in the UI. However, one should only change them by calling respective functions setName and setIsEnter

Therefore, when onChangeText={text => setName(text)}gets called in our TextInput, React figures out that namehas been changed and it rerenders our App component with new value of name. That’s why when we are typing our name, we can see it in our app.

Now, that we have read user’s name, we can start coding the main part of our application — chat.

Coding chat

Firstly, we need the React Native Gifted Chat component. Run npm install react-native-gifted-chat --save

Now, let’s modify our App.js by rendering a chat, instead of an empty screen, when the user has pressed Enter:

At this point, you can chat with yourself:

Let’s look closer into what we’ve changed:

1. Created another hook messages
2. Passed a mock message as a default state for messages hook just to see how it is rendered
3. Used react-native-gifted-chat to render chat component when the user has pressed Enter
4. Whenever we send a message, we updated the chat component.

So far, everything is going well, however our app is still local, which means we cannot see if someone else has sent a message. For this reason, we need to setup a WebSocket client and build a backend server.

Building a backend server will be an objective of the 2nd part of this tutorial, so stay tuned!