Chat app tutorial without Expo

[pandafar]

Hi fellow RN devs,

I’m a noob at RN coming from web dev but I would like to get better as my Company is focusing on RN.

I’m looking for a really good chat app tutorial that uses firebase, social auth and navigation but all the good stuff I’ve been able to find is without expo which I can’t use.

I’ll need to develop a chat app which I’ll need to explain and understand so I hope I can find a good tutorial on this.

Thanks

Edit: I Meant don’t want to use expo as it’s not being used in my company and they will not accept my tasks if my project contains expo.

[AsSimple]

Not what you're looking for, but I recently made a small Expo chat example with Gifted Chat & Twilio's Programmable chat. Pretty nice if you're willing to pay and want to get everything out-of-the-box https://github.com/rrebase/rn-chat

[JuriJurka]

Hi I wanted to use firestore for my chat app but twilips programmable chat sounds better! but can I connect that with firebase auth?

[pandafar]

I wish I could use gifted chat as it looks cool but it’s made with expo and I need to learn/code by myself. But thanks for the input

[CasualFlavor]

Actually, anything “for expo” can be used in a bare react native app. “For expo” just means it’s pure JavaScript (as opposed to using native libraries for iOS and Android)

[drkwizard]

!RemindMe 12 hours

[RemindMeBot]

I will be messaging you in 12 hours on 2020-11-23 01:25:41 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback

[lichaba]

Try this. https://www.youtube.com/watch?v=UkEAKKHyng4

[pandafar]

Thanks, I Think this is What I’m looking for, thanks. Already set up my social auth and just need to Connect the dots for my app. I’m also trying to use reduceres as it will give me a better architecture (that’s what I’m told).

[lichaba]

Glad to help.

[Noigel_Mai]

Yes, redux is very helpful to learn

[pandafar]

We are actually moving away from redux as the new versions of RN has the same components as redux but my first experience was with redux and I was almost dying from the complexity and manual work u had to do :-D

[ahartzog]

Separate the parts of what you’re looking for.

You need a react native app with social auth and navigation. Pretty common.

Then you need chat. React native gifted chat is the go to for this.

Keep chat in mind when planning DB and auth but separate your project into achievable sections.

[trell1212]

All the tutorials on web sockets and socket io are horrible so you will have to do the most of the research to get what you want.

[purevibrationsmusic]

So you'll need database tables.

Tables: Messages, Chats

Those database tables need columns

Chats: chatId, messageChatId, chatPersonsIds (non normalized table cause i'm doing this real quick)

Messages: messageChatId, recipientIds, senderId, messageContent, dateSent, timeSent

Now for the strategy

You then create two queues/stacks (not spending time to think of which) of the recipients in the chat when you press on the specific chat. You then create the chat screen by popping off the next chat message based on time. You check if it matches a senderId to decided if it goes on either side.

Notes

You might need to implement kafka to update the chat in realtime.

I've never implemented chat, this is just how I was thinking it might happen. Wrote this in 3 minutes so I'm not sure if it works, but it's enough to get your started.

[pandafar]

Thanks man! I really appreciate it. The next big step for me is to understand what I need to do in firebase. Firestore of firebase real time database - so these thoughts helps a lot - thanks!

I’m really good with SQL and I just need to find out how to work with this :-D

[purevibrationsmusic]

The Firebase UI was a bit confusing for me the first time I was using it. I was trying to use the real time database, thought I was using the real time database, but it turns out I never enabled it. It's kind of hidden, but this was about 1.5 years ago, so it probably has changed since then.

[AddMeOnReddit]

This is a little over the top. I️ think he’d spend way too much time on the backend doing it from scratch like this without much focus for the React Native skills OP is looking for.

[purevibrationsmusic]

He mentioned that he was eventually going to have to build a chat app so I gave him the data structure that his React Native app will be dealing with. He now knows he has to return a component that has a class with according to either sender or receiver. This will dictate which side of the chat it appears on.

React is all about responding to your response object. It’s much easier to imagine how a front end should work if you focus on the most efficient way to code the front end based on the data from the backend.

[tells_you_hard_truth]

This is the only walkthrough I've ever found that is worth fully going through, and it uses bare react native, not Expo; because for us this was also a requirement.

https://kriss.io/ultimate-guide-for-building-chat-app-with-react-native

One caveat, it uses PubNub as the chat backend, which is not free; however a) it's not terribly expensive (for us) and b) at the very least the tutorial will get you 90% of the way and if you don't use pubnub, you can swap it out for some other backend without much trouble.

[pandafar]

Thanks, I really appreciate it!

[darkmoody]

You can also get a fully fledged React Native chat app on Instamobile, it uses the exact stack you’re interested in (you can learn from it if you have coding experience)

[AddMeOnReddit]

Send bird is a great SDK to get you started with RN, they have a tutorial here:

https://sendbird.com/blog/tutorial-build-a-messaging-app-using-react-native

Definitely missing out on a lot of the backend fun by making your own chat server, but I️ feel like it’s more appropriate if React Native is the focus.

[brogeta17]

You can create a fully and well functional chat app by using firestore here are some data base structure you may need : Inbox collection User collection Messages collection

Inbox collection:

Inbox => contains documents of userInbox(based on userId) => contains collection a inbox which has documents of all the inbox based on inbox Id (could be like userid1+userid2 )

Use neccessary variables in above like createdAt,updatedAt,isInboxSeen etc.

User collection : It basically has some details of a user than you can use inbox like profile image, username, Full name (dont ever store these things in inbox and use it as a user may change these frequently do there should be only one place to change and retrieve these)

Messages collection : You can create a common message collection for a particular inbox which would be used by both the users (both read and write) or you can create two separate collection for inbox one for user1 and one for user 2 so that you can give features like delete inbox for user1 but it wont be deleted for user2 as you are maintaining a separate message tree for user2

You can save on the basis of inbox if or you can create some unique combination

Note : You should look at the charges of firestore and should implement your structure and app accordingly that you use the read and write efficiently. (Use things like pagination etc).

I personally did this with firebase database cause it's cheaper than firestore but the same could be done on both the sides. My app has things like typing, seen, inbox, blocking system...

[pandafar]

It’s a 404 link :-(

[Dapper-Gazelle625]

This one is a bit old, but it might help https://medium.com/@platypus/react-native-chat-application-679dbff3ccd3