diegolmello/App.tsx

## README.md

      
    Raw
  

              README.md
            
          
    Docs

Make sure to read https://developer.rocket.chat/rocket.chat/iframe-integration/adding-a-rocket.chat-chat-room-to-your-web-app
There are two important settings there:

Administration > Settings > General > Restrict access to any iframe needs to be disabled
Administration > Settings > General > iframe Integration > Enable Receive needs to be enabled
Keep Receive Origins as *

Env

"react": "18.2.0",
"react-native": "0.71.5",
"react-native-webview": "11.26.1"
Macbook Pro M1 Pro


## App.tsx
import React, {useRef} from 'react';
import {SafeAreaView} from 'react-native';
import WebView from 'react-native-webview';

function Page(): JSX.Element {
  const webRef = useRef(null);

  const login = () => {
    setTimeout(() => {
      if (webRef.current) {
        webRef.current.injectJavaScript(
          `window.postMessage({ externalCommand:'login-with-token', token: 'TOKEN_HERE' }); true;`,
        );
      }
    }, 300);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <WebView
        ref={webRef}
        source={{
          uri: 'https://mobile.rocket.chat/channel/general?layout=embedded',
        }}
        style={{flex: 1}}
        onLoadEnd={() => login()}
      />
    </SafeAreaView>
  );
}

export default Page;
	import React, {useRef} from 'react';
	import {SafeAreaView} from 'react-native';
	import WebView from 'react-native-webview';

	function Page(): JSX.Element {
	const webRef = useRef(null);

	const login = () => {
	setTimeout(() => {
	if (webRef.current) {
	webRef.current.injectJavaScript(
	`window.postMessage({ externalCommand:'login-with-token', token: 'TOKEN_HERE' }); true;`,
	);
	}
	}, 300);
	};

	return (
	<SafeAreaView style={{flex: 1}}>
	<WebView
	ref={webRef}
	source={{
	uri: 'https://mobile.rocket.chat/channel/general?layout=embedded',
	}}
	style={{flex: 1}}
	onLoadEnd={() => login()}
	/>
	</SafeAreaView>
	);
	}

	export default Page;