# React Native & Sendbird not working

**URL:** <https://community.sendbird.com/t/react-native-sendbird-not-working/81>\
**Category:** JavaScript\
**Tags:** react-js, chatsdk\
**Created:** [April 1, 2020, 9:09pm UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81 "2020-04-01T21:09:41Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![emmad](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/emmad/32/345_2.png) [@emmad](https://community.sendbird.com/u/emmad)\
**Post date:** [April 1, 2020, 9:09pm UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/1 "2020-04-01T21:09:41Z")

</div>

Hi everyone, I have been trying to build a simple react native chat following the Sendbird tutorial here: [https://blog.sendbird.com/react-native-chat-tutorial-one-build-chat-with-sendbird/](https://blog.sendbird.com/react-native-chat-tutorial-one-build-chat-with-sendbird/)

I don’t know whether it is out of date, but it just isn’t working. When I try to import sendbird and initialise a connection, I get an error saying Unable to resolve module fs from 'node\_modules/sendbird/SendBird.min.js

This is how to repro

1. I created my project using the React Native CLI ( react-native init ChatApp )
2. I installed Sendbird with npm (npm install sendbird)
3. I then tried to import the module (import SendBird from ‘sendbird’; in app.js)

Can someone tell me where I am going wrong here? I feel it is something to do with the sendbird dependency not being in the right place (maybe its not meant to be installed by npm - but this is what the tutorial advised)

---

<div class="post-metadata">

**Author:** ![eric.kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eric.kim/32/8_2.png) [@eric.kim](https://community.sendbird.com/u/eric.kim)\
**Post date:** [April 2, 2020, 12:28am UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/2 "2020-04-02T00:28:31Z")

</div>

Hi @emmad,

The blog link you shared was written in November of 2017 (3 years ago!!!) which is not probably best one to follow. (I delivered this information to our team)

For latest sample app that you want to use can be found

> **[sendbird/SendBird-JavaScript](https://github.com/sendbird/SendBird-JavaScript)**
>
> SendBird JavaScript Sample. Contribute to sendbird/SendBird-JavaScript development by creating an account on GitHub.

and we just released UI Kit today which you can also check out at

> **[Ui Kit Getting Started | JavaScript Chat SDK Documentation | SendBird](https://docs.sendbird.com/javascript/ui_kit_getting_started)**
>
> SendBird UIKit for React is a development kit with an user interface that enables an easy and fast integration of standard chat features into your JavaScript react client apps. Note that this library is not designed to work with other frameworks such...

---

<div class="post-metadata">

**Author:** ![emmad](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/emmad/32/345_2.png) [@emmad](https://community.sendbird.com/u/emmad)\
**Post date:** [April 2, 2020, 3:22pm UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/3 "2020-04-02T15:22:32Z")

</div>

Hi Eric,

Unfortunately, I still can’t get it working in react native - found this issue ([https://github.com/sendbird/SendBird-JavaScript/issues/113](https://github.com/sendbird/SendBird-JavaScript/issues/113)) which seems similar although I tried to downgrade to 3.0.117 as per the answer and it still didn’t work.

As I am new to javascript and react-native world, please would you be able to give me more explicit instructions on how I can install sendbird into my react-native app (using npm?) and then import into my script? Apologies if this is very basic but I have been struggling with this for two days now ☹

 ![image](https://us1.discourse-cdn.com/flex020/uploads/sendbird/original/1X/96d74da45b41dd40d2d8d5e118645b3a3863a6c5.jpeg)

---

<div class="post-metadata">

**Author:** ![eric.kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eric.kim/32/8_2.png) [@eric.kim](https://community.sendbird.com/u/eric.kim)\
**Post date:** [April 3, 2020, 8:40am UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/4 "2020-04-03T08:40:57Z")

</div>

@emmad

My apologies for the late response.

Our engineering team is working really hard to make a fix of this bug.

It should be fixed by 4/3 PST and will let you know if there is any blocker for the fix

---

<div class="post-metadata">

**Author:** ![inrecovery](https://avatars.discourse-cdn.com/v4/letter/i/a4c791/32.png) [@inrecovery](https://community.sendbird.com/u/inrecovery)\
**Post date:** [April 5, 2020, 6:15am UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/6 "2020-04-05T06:15:42Z")

</div>

Hey @emmad ! Please post your metro.config.js and package.json.

The error message you’re getting from Metro bundler shows that you’re trying to run fs, which is a Node js core module. We’ve all been here at one point or another, so don’t feel bad 🙂

There are a few ways to go about this, here’s two:

1. **Best Approach** Include a resolver: { extraNodeModules: … } config in your metro.config.js file. Here can learn more here: [Metro Docs: Resolver Options](https://facebook.github.io/metro/docs/configuration#resolver-options)

2. Alternatively, you can use a library like [rn-nodeify](https://github.com/tradle/rn-nodeify) but this adds a ton of extra weight to your App. However, it’s super useful if you’ll be using other core Node modules (ex. crypto for hashing, etc)

Here are the reference links:

- [https://facebook.github.io/metro/docs/configuration#resolver-options](https://facebook.github.io/metro/docs/configuration#resolver-options)
- [https://github.com/tradle/rn-nodeify](https://github.com/tradle/rn-nodeify)

Also, this is a great article on including core Node modules into an RN project:

- [https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd](https://gist.github.com/parshap/e3063d9bf6058041b34b26b7166fd6bd)

Lastly, since you mentioned you’re new to JS and React Native, I’d highly recommend spending a day or two on this React Native course from Harvard’s CS50 classes. It’s on Youtube and totally free (the guy speaks a bit slow so I recommend putting it on speed 1.5x haha). It’s one of the best series of videos out there on RN. Unlike most “tutorials”, this one is really well-grounded on CS and software engineering:

- [https://www.youtube.com/playlist?list=PLhQjrBD2T382gdfveyad09Ierl\_3Jh\_wR](https://www.youtube.com/playlist?list=PLhQjrBD2T382gdfveyad09Ierl_3Jh_wR)

Good luck and keep it up, you’ll be an RN rockstar in no time!

David

---

<div class="post-metadata">

**Author:** ![emmad](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/emmad/32/345_2.png) [@emmad](https://community.sendbird.com/u/emmad)\
**Post date:** [April 6, 2020, 1:12pm UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/7 "2020-04-06T13:12:01Z")

</div>

Hi David,

Thanks so much for this detailed response. I actually downgraded my sendbird package to 3.0.117 THEN re read cd iod, pod install, cd … (which I hadn’t done in my previous post) and it worked without the fs error. Thanks for the info about rn-nodeify though, it looks very helpful.

I have looked at the article and Harvard course and they look fantastic - thanks so much for sharing. I have been plodding away with the tutorial and got it to connect to the sendbird servers now (yey). However, the next hurdle I am on is at the point of adding the disconnect function and getting the same error as this: [https://stackoverflow.com/questions/56725477/undefined-is-not-an-object-evaluating-menu-isdisconnected](https://stackoverflow.com/questions/56725477/undefined-is-not-an-object-evaluating-menu-isdisconnected) (following the code exactly as it is here: [https://blog.sendbird.com/react-native-chat-tutorial-3-menu-screen/](https://blog.sendbird.com/react-native-chat-tutorial-3-menu-screen/)). Any advise?

Thanks again so much for this help. I look forward to using SendBird extensively in my app once I have crossed this hurdle!

---

<div class="post-metadata">

**Author:** ![eric.kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eric.kim/32/8_2.png) [@eric.kim](https://community.sendbird.com/u/eric.kim)\
**Post date:** [April 6, 2020, 5:06pm UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/8 "2020-04-06T17:06:56Z")

</div>

@emmad Thanks great that you got it working and our apologies for the problem you had to go through. But I am happy that you are getting closer to the launch!

Once you launch your project, would you like to share your project with other SendBird community members by sharing details in show & tell category? ([https://community.sendbird.com/c/show-tell/7](https://community.sendbird.com/c/show-tell/7))

And please let us know if you have any other problems moving forward !!

---

<div class="post-metadata">

**Author:** ![eric.kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eric.kim/32/8_2.png) [@eric.kim](https://community.sendbird.com/u/eric.kim)\
**Post date:** [April 6, 2020, 5:10pm UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/9 "2020-04-06T17:10:34Z")

</div>

@inrecovery Thank you for helping other fellow community members 🙂 🥰 (lots of love on your way from SendBird)

Thank you for sharing the Harvard course as well, in fact, I actually took that class when it was just released!

---

<div class="post-metadata">

**Author:** ![emmad](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/emmad/32/345_2.png) [@emmad](https://community.sendbird.com/u/emmad)\
**Post date:** [April 6, 2020, 6:06pm UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/10 "2020-04-06T18:06:38Z")

</div>

Hi Eric - thanks so much for the help and yes that sounds great. I do have another problem as described to David above. Would you be able to help?

If it is easier, I can post it in a new Q+A to distinguish it as a separate issue.

Thanks,  
Emma

---

<div class="post-metadata">

**Author:** ![eric.kim](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/eric.kim/32/8_2.png) [@eric.kim](https://community.sendbird.com/u/eric.kim)\
**Post date:** [April 6, 2020, 6:07pm UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/11 "2020-04-06T18:07:50Z")

</div>

@emmad Yes, new Q&A would work!!

---

<div class="post-metadata">

**Author:** ![inrecovery](https://avatars.discourse-cdn.com/v4/letter/i/a4c791/32.png) [@inrecovery](https://community.sendbird.com/u/inrecovery)\
**Post date:** [April 7, 2020, 3:59am UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/12 "2020-04-07T03:59:53Z")

</div>

Thanks @eric.kim! Happy to help 🙂

---

<div class="post-metadata">

**Author:** ![inrecovery](https://avatars.discourse-cdn.com/v4/letter/i/a4c791/32.png) [@inrecovery](https://community.sendbird.com/u/inrecovery)\
**Post date:** [April 7, 2020, 4:02am UTC](https://community.sendbird.com/t/react-native-sendbird-not-working/81/13 "2020-04-07T04:02:45Z")

</div>

Hey @emmad! Awesome glad you’re making progress. I replied to your other Q&A with the solution and got your app running on my laptop! Go check it out and good luck )

> [@React Native: menu.isDisconnected undefined is not an object](https://community.sendbird.com/t/react-native-menu-isdisconnected-undefined-is-not-an-object/113/4):
>
> Hey @emmad! Congrats on getting over that first hurdle! You’re almost there slight_smile Thanks for posting this on Github. Loved your first commit message “I dont really know what im doing” lol classic! Skip to the bottom for the solution: I got your App working. smiley First of all, I’d 100% would echo what @eric.kim said about not following that old tutorial. Just from a quick look, it’s super outdated. RN literally changes every month, with a 3yr old tutorial you’re bound to run into er…
