#JavaScript Module

Besides native components, we are exposing JavaScript functions to control the behavior of those components from React Native app.

#Usage

To use the module, import it:

import ReactNativeBrownfield from '@callstack/react-native-brownfield';

#Methods

#setNativeBackGestureAndButtonEnabled

A method used to toggle iOS native back gesture and Android hardware back button.

ReactNativeBrownfield.setNativeBackGestureAndButtonEnabled(enabled: boolean);

Parameters:

Example:

ReactNativeBrownfield.setNativeBackGestureAndButtonEnabled(true);

#popToNative

A method to pop to native screen used to push React Native experience.

ReactNativeBrownfield.popToNative(animated?: boolean);

Parameters:

Example:

ReactNativeBrownfield.popToNative(true);

#postMessage

Send a JSON-serializable message to the native host application. This resembles the web window.postMessage API.

ReactNativeBrownfield.postMessage(data: any);

Parameters:

Example:

ReactNativeBrownfield.postMessage({ action: 'greet', name: 'Alice' });

#onMessage

Subscribe to messages sent from the native host application. Returns a subscription object with a remove() method for cleanup.

const subscription = ReactNativeBrownfield.onMessage(
  callback: (event: MessageEvent) => void
);

Parameters:

The MessageEvent object has a data property containing the deserialized message payload.

Returns: { remove: () => void } - call remove() to unsubscribe.

Example:

import ReactNativeBrownfield from '@callstack/react-native-brownfield';
import type { MessageEvent } from '@callstack/react-native-brownfield';

const subscription = ReactNativeBrownfield.onMessage((event: MessageEvent) => {
  console.log('Received from native:', event.data);
});

// Later, to unsubscribe:
subscription.remove();

Full example with React hooks:

import { useEffect, useState } from 'react';
import ReactNativeBrownfield from '@callstack/react-native-brownfield';
import type { MessageEvent } from '@callstack/react-native-brownfield';

function MyComponent() {
  const [lastMessage, setLastMessage] = useState<unknown>(null);

  useEffect(() => {
    const sub = ReactNativeBrownfield.onMessage((event: MessageEvent) => {
      setLastMessage(event.data);
    });
    return () => sub.remove();
  }, []);

  return (
    <Button
      title="Send to Native"
      onPress={() => {
        ReactNativeBrownfield.postMessage({ greeting: 'Hello!' });
      }}
    />
  );
}