React Native / xmppjs test

xmppjs-rn.js

import React, { useEffect, useState } from "react";
import { AppState, StyleSheet, Text, View, Button } from "react-native";
import { client } from "@xmpp/client/react-native";
import xml from "@xmpp/xml";

const CREDENTIALS = [
  {
    name: "Arwen",
    username: "4h9rd2yd3t58fbwxe257rvjd6",
    password: "S7yZBsDIe7boi6ruVhhioGHzM6YW6vboMnmlguS5BUU="
  },
  {
    name: "Elrond",
    username: "6q24ijww2q0bj1aw1tn8ierf5",
    password: "db/cSj6tGTUIR8+2bGd+Pw2h2Cca3s3hhYGbUhj+j5Q="
  },
  {
    name: "Frodo",
    username: "kushevskfglfau6v7dgpzcb42",
    password: "GIQuXzJqwEm9z9Nog5EFZIPKFl9YxUziNdq+zxPvBSs="
  },
  {
    name: "Sam",
    username: "yrchtbcbxane4j3kt73a7d3wd",
    password: "TeiU27Jvo2Vq9pBpHr3qQNbS5J3fbAyezgLCLSq8x1A="
  }
];

let credentialIndex = 0;

async function authenticate(auth) {
  try {
    await auth(CREDENTIALS[credentialIndex]);
  } catch (error) {
    console.error("XMPP authentication failed", error);
  }
}

var xmpp = client({
  service: "wss://test.crypho:8080/xmpp",
  domain: "localhost",
  resource: "expo-test",
  credentials: authenticate
});

async function switchUser() {
  credentialIndex = (credentialIndex + 1) % CREDENTIALS.length;
  try {
    await xmpp.restart();
  } catch (error) {
    console.log("Restarting XMPP with new credentials failed", error);
  }
}

xmpp.reconnect.on("reconnecting", () =>
  console.log("XMPP started reconnecting")
);
xmpp.reconnect.on("reconnected", () => console.log("XMPP started reconnected"));

AppState.addEventListener("change", async state => {
  switch (state) {
    case "active":
      await xmpp.stop();
      await xmpp.start();
      xmpp.reconnect.start();
      break;
    case "inactive":
      xmpp.reconnect.stop();
      xmpp.send(xml("presence", { type: "unavailable " }));
  }
});
export default function App() {
  const [currentUser, setCurrentUser] = useState(CREDENTIALS[credentialIndex].name)
  const [xmppState, setXmppState] = useState("unknown");
  const [appState, setAppState] = useState("active");

  useEffect(() => {
    AppState.addEventListener("change", state => {
      console.log(`App state change to ${state}`);
      setAppState(state);
    });
    return () => AppState.removeEventListener("change", setAppState);
  }, []);

  useEffect(() => {
    xmpp.on("status", state => {
      console.log(`XMPP state changed to ${state}`);
      setXmppState(state);
      setCurrentUser(CREDENTIALS[credentialIndex].name)
    });
    xmpp.start();
    xmpp.reconnect.start();
    return xmpp.stop;
  }, []);

  return (
    <View style={styles.container}>
      <Text>Using credentials for {currentUser}</Text>
      <Text>The XMPP status is {xmppState}</Text>
      <Text>The app status is {appState}</Text>
      <Button title="Switch user" onPress={switchUser} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});