React native XMPP Client using stanza

December 14, 2020

React native XMPP Client using stanza.io

1. This is based off Matt Folley's implementation of XMPP client using stanza
2. Adding some caveats from my experience.
        -> Doesn't WORK WITH EXPO based packaging i.e. create-react-naitve-app (CRNA) xmpprn WON'T WORK.  CRNA has limitation on including node core modules.

	-> Code doesn't cross compile for some linking reasons RNRandomBytes.seed not defined
           i.e. Linux machine cannot create a ios app and vice versa
        -> Works with ejabberd
        -> the virtual host name in ejabberd has to be same as the domain name of the JID
           Example alice@myhost should be hosted on a host named 'myhost'
           If not then you need to modiy the connect call to specify the jabber server.
 
3. Steps.
     install ejabberd
     create a virtualhost named 'emacsdesktop' or any hostname you like
     create 3 users with following user name password. (Simple password for demo)
       Username Password
       admin    amdin
       alice    alice
       bob      bob 

    3.3 Create the app
        # react-native init xmpprn
        # cd xmpprn
        # npm install stanza --save
        # npm install react-native-browser-builtins --save
        # npm install rn-nodeify --save-dev
        # ./node_modules/.bin/rn-nodeify --install --hack
        # Add the following line package.json
          "postinstall": "rn-nodeify --install --hack"

        # You should now be able to do a
          import "./shim.js" # first line in roject 
          ........ 
        import * as XMPP from 'stanza'; 
          <Normal stanza code>

        # see Sample in App.js


additinal
wss://mydomain:5443/ws
https://github.com/legastero/stanza/blob/master/docs/React_Native.md

React Native Code

import "./shim"
import React ,{useEffect} from 'react'
import { Button, Text } from 'react-native'
import styled from 'styled-components/native';
import * as XMPP from 'stanza.io';
let client;
const App = () => {



  

  useEffect(() => {
     client = XMPP.createClient({
      jid: 'userdemo@domain',
      password: '',  
      transport: 'websocket',
      wsURL: 'wss://domain:5443/ws' 
     }) 
      client.on('session:started', () => {
      //SESSION IS IMPORTANT without session you will not recevice message
          client.getRoster();
          client.sendPresence();
      });  
      client.on('chat', (msg) => {
        alert(msg.from.local + ':' + msg.body);
      }); 
      client.connect();     
  }, []) 

 

 const SendMessage=()=>{
  client.sendMessage({
    to: 'admin@domain',
    body: 'input text data'
})
 }
  return ( 
    <Container>
      <Text>App</Text>
      <Button title="Send" onPress={SendMessage}></Button>
    </Container>
  )
}

export default App

const Container = styled.View`
      flex:1;
      align-items:center;
      justify-content:center;
`;

Written by Manoj Bhardwaj who lives and works in Mohali Punjab (India). My stackoverflow