React Native - Messages not being listened with Access Manager v3 approach

[lakardion]

Hello!
We did an implementation of react-chat-components for react-native (bare react native project). We approached the auth of this by following https://www.pubnub.com/docs/general/security/access-control

In this it says we should setToken after creating the client, so we did as such. Everything seems to work fine except that when we go into a chat, the listener for new messages seems like it is not updating the MessagesList component:

Here's an extract of what we're doing:

Higher up in the tree we have our provider with our pubnub client instantiated. And we added an app listener that refreshes the token every a certain amount of time. It looks sort of like this

const refreshPubnubToken = async () => {
  const {
    client,
    isRefreshingToken,
    actions: { changeIsRefreshingToken },
  } = usePubnubStore.getState()
  if (isRefreshingToken) return

  changeIsRefreshingToken(true)
  const token = await getPubnubToken()
  changeIsRefreshingToken(false)

  if (!token) return

  console.log('token fetched', token, Boolean(client?.setToken))
  client?.setToken(token)
  usePubnubStore.getState().actions.changeTokenLastRefreshedTime(Date.now())
}

We confirmed that the token is set since we do actually get access to the chat. And it fetches the messages whenever we get into the chat screen. Which is pretty simple:

And then our chat looks like this:

export const ChatScreen = () => {
  const { channelId, users } = useRoute<RouteProp<ParamList, 'Chat'>>().params
  const chat = (
    <View className="flex-1 flex-grow">
      <Chat
        currentChannel={channelId}
        users={users}
        onError={(e) => {
          Config.logger.error(JSON.stringify(e))
        }}
      >
        <MessageList
          fetchMessages={10}
          style={{
            messageListScroller: { backgroundColor: 'white' },
          }}
        />
        <MessageInput />
      </Chat>
      <BackButton />
    </View>
  )
  return (
    <MultiPlatformSafeAreaView safeAreaClassName="flex-1 flex-grow">
      <KeyboardAvoidingViewWind className="flex-1" behavior={behavior}>
        {chat}
      </KeyboardAvoidingViewWind>
    </MultiPlatformSafeAreaView>
  )
}

So from what I could gather it seems like the problem is wherever the messages listener is being set.
Maybe something to do with setToken and react not properly handling this change in the client reference?

Let me know whichever more information you might need for this I'm all in helping out getting this fixed

Versions:

    "@pubnub/react-native-chat-components": "^0.30.0",
    "pubnub": "^7.2.2",
    "pubnub-react": "^3.0.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.72.4",

Thanks!

[lakardion]

For anyone with a similar issue than this. We figured out we didn't have presence enabled which seems to be required for the access manager v3 approach.