# React Native Chat SDK, when trying to connect, get Websocket Connection Failed error

**URL:** <https://community.sendbird.com/t/react-native-chat-sdk-when-trying-to-connect-get-websocket-connection-failed-error/1224>\
**Category:** JavaScript\
**Tags:** react-js\
**Created:** [November 1, 2020, 7:30am UTC](https://community.sendbird.com/t/react-native-chat-sdk-when-trying-to-connect-get-websocket-connection-failed-error/1224 "2020-11-01T07:30:26Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mingmingc](https://avatars.discourse-cdn.com/v4/letter/m/258eb7/32.png) [@mingmingc](https://community.sendbird.com/u/mingmingc)\
**Post date:** [November 1, 2020, 7:30am UTC](https://community.sendbird.com/t/react-native-chat-sdk-when-trying-to-connect-get-websocket-connection-failed-error/1224/1 "2020-11-01T07:30:26Z")

</div>

Hi. I have 2 implementations of my app:

1. React (web app),
2. React Native.

My web app is connecting and fully functioning without problems. However, in React Native, when I try to connect using sb.connect(), I am getting the below errors:

API dummy call failed [SendBirdException: Request failed.]  
SendBirdException: Websocket connection failed.

I’m running React Native with Expo Client & Expo CLI on my own Android device.

I’m just using the SDK called. I tried using getInstance() as well in my other SDK methods, but did not succeed.  
Do I need to call sb.disconnect() in my web app? Does it have anything to do with that?  
Do I need to create my own API call to the server to connect/create instances?

Here’s my code:

```
import Sendbird from 'sendbird';

function Connect(sbAppId, sbUserId) {

    return new Promise((resolve, reject) => {

        const sb = new Sendbird({ 'appId': sbAppId });

        sb.connect(sbUserId, (user, error) => {

            if (error) {

                reject('SendBird Connection Failed.');

            } else {

                resolve('success')

            }

        })

    })

}

export default Connect;
```

---

<div class="post-metadata">

**Author:** ![walter.rodriguez](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/walter.rodriguez/32/546_2.png) [@walter.rodriguez](https://community.sendbird.com/u/walter.rodriguez)\
**Post date:** [November 2, 2020, 9:57am UTC](https://community.sendbird.com/t/react-native-chat-sdk-when-trying-to-connect-get-websocket-connection-failed-error/1224/2 "2020-11-02T09:57:49Z")

</div>

If “Websocket connection failed” is present, have you checked your device / simulator has internet connection?

You should move the const sb = new Sendbird({ … }) to the top and call it once.

---

<div class="post-metadata">

**Author:** ![Chin\_Chin](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/chin_chin/32/476_2.png) [@Chin\_Chin](https://community.sendbird.com/u/Chin_Chin)\
**Post date:** [November 9, 2020, 7:29am UTC](https://community.sendbird.com/t/react-native-chat-sdk-when-trying-to-connect-get-websocket-connection-failed-error/1224/3 "2020-11-09T07:29:40Z")

</div>

You need to create sendbirdContext to use for react native

> <https://github.com/chnirt/react-sendbird-messenger/blob/master/src/context/sendBirdContext.jsx>

---

<div class="post-metadata">

**Author:** ![moe](https://avatars.discourse-cdn.com/v4/letter/m/ad7895/32.png) [@moe](https://community.sendbird.com/u/moe)\
**Post date:** [April 29, 2022, 2:05pm UTC](https://community.sendbird.com/t/react-native-chat-sdk-when-trying-to-connect-get-websocket-connection-failed-error/1224/4 "2022-04-29T14:05:07Z")

</div>

I am facing the same issue

this is my App.tsx:

```auto
import React from 'react';
import { NavigationContainer, DarkTheme } from '@react-navigation/native';
import { ThemeProvider, USER_TYPE } from '@app/theme';
import AppNavigation from '@customer/navigation';
import { ApolloProvider } from '@apollo/client';
import { createClient } from '@zedapp/data-access';
import { useAuth } from '@customer/modules/auth/login/hooks/useAuth';
import SendBird from 'sendbird';
import Config from 'react-native-config';
import { chatVar } from '@customer/reactivities';
import ChatProvider from './context';

const sendbird = new SendBird({ appId: Config.SENDBIRD_APP_ID });
// chatVar({ sendbird });
sendbird.setErrorFirstCallback(true);

const initialState = {
  sendbird,
};

const App = () => {
  const { authVar } = useAuth();
  const params = {
    authToken: authVar.token,
  };

  const client = createClient(params);
  return (
    <ChatProvider value={initialState}>
      <ApolloProvider client={client}>
        <NavigationContainer theme={DarkTheme} >
          <ThemeProvider value={{ userType: USER_TYPE.CUSTOMER }}>
            <AppNavigation />
          </ThemeProvider>
        </NavigationContainer>
      </ApolloProvider>
    </ChatProvider>
  );
};

export default App;

```

and my chat screen (where i’m getting the error):

```auto
import React, { useEffect } from 'react';
import { StyleSheet } from 'react-native';
import { Container, Header, hp } from '@app/components';
import { useTheme } from '@app/theme';
import { useChatContext } from '@customer/app/context';
import { useCustomer } from '@customer/modules/profile/hooks/useCustomer';

const ChatWithAgentScreen = () => {
  const theme = useTheme();
  const { sendbird } = useChatContext();
  const { customerVar } = useCustomer();

  useEffect(() => {
    // console.log(sendbird);
    // if (sendbird.connect) connect();
    connect();
  }, []);

  const connect = async () => {
    try {
      const user = await sendbird?.connect(customerVar?.idCustomerUser);
      console.log('connect_user', user);
    } catch (err) {
      console.log('connect_error', err);
    }
  };

  return (
    <>
      <Container.Flex style={styles.container}>
        <Header.AppHeader
          headerText={'Chat with Cx Service agent.'}
          headerTextColor={theme.main.white}
          containerStyle={{ backgroundColor: theme.main.secondary }}
          hideLeft={true}
        />
      </Container.Flex>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginBottom: hp(12),
    backgroundColor: '#fff',
  },
  body: { paddingHorizontal: 24, justifyContent: 'center' },
  moodSelector: {
    marginVertical: 12,
  },
});

export default ChatWithAgentScreen;

```