Bind Connection using usePusher | React native

[juandl]

Hi, I'm trying to get the status of the connection. using

 const { client } = usePusher();

 useEffect(() => {
    client.connection.bind('connected', () => {
      console.log('Realtime is go!');
    });
  }, []);

but it's not working, any way to do this?

[juandl]

I also try to use

const { client } = usePusher();

useEvent(client.connection, 'connected', (data) =>  console.log('Realtime is go!'));

but it's not working too.

[mayteio]

Hey, first thing I notice is that client is missing from your dependancy array. On the first render, client will not be defined. Since client is stored in state though, when it becomes available it'll re-trigger the effect:

use-pusher/src/core/PusherProvider.tsx

Line 40 in ea3b549

const [client, setClient] = useState<any | undefined>();

If it still doesn't work, please provide a codesandbox and I can have a look!

[juandl]

@mayteio you are right, i wait for the "client" and is working. But in react native it's not working.

[mayteio]

That's great. Have you checked the rn example? https://github.com/mayteio/use-pusher/tree/master/examples/native-use-pusher-example

[juandl]

@mayteio yes I do, but it's not working, I try with
-React navigation x5
-Expo (latest version)

I wrap the Provider with the navigation.. all the hooks work but in the case of getting the status of the connection, its not working

 const { client } = usePusher();

 useEffect(() => {
 if(client){
   client.connection.bind('connected', () => {
      console.log('Realtime is go!');
    });
  }
}, [client]);

[juandl]

Hi @mayteio , I found the solution, apparently passing the provider like this ist not working...

const Navigation = () => {
  return (
      <NavigationContainer>
        <Stack.Navigator'>
          <Stack.Screen name='Home' component={HomePage} />
        </Stack.Navigator>
      </NavigationContainer>
  );
};

export default function App() {
  return (
   <PusherProvider {...config}>
      <Navigation />
   </PusherProvider>
  );
}

But passing directly to the NavigationContainer it's working:

const Navigation = () => {
    <PusherProvider {...configPusher}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name='Home' component={HomePage} />
        </Stack.Navigator>
      </NavigationContainer>
    </PusherProvider>
};

just leaving here for someone else :)

[mayteio]

Hey @juandl,

That's odd! Glad you could figure it out, cheers.