Navigate To RN Page From Player

Scenarios

Scenario 1

When users click the CTA, the default behavior is rendering the CTA link content using the native web view. But the host app developers may want to render the CTA link content using the React Native page.

Scenario 2

When users click the cart icon, the host app may want to navigate the custom React Native cart page.

Issues

Both the CTA button and cart icon belong to the video player. There are similar issues in these two scenarios. As follows, when the video player is launched, the RN navigation stack is covered by the video player.

Generally, the host app use React Navigation library to handle the page navigation in RN App. And when the host app developers use the push method of React Navigation to navigate to the RN page in the above scenarios, the page will be rendered in the bottom RN navigation stack. Therefore, the new RN page would be covered by the video player(native page).

Solution

As follows, we add a new native container to embed a new RN navigation stack:

We also use your app component to render the new RN navigation stack. You need to handle different props in your app component.

API

We add FWNavigator to help navigate from the native page to the RN page.

Integration steps for scenario 1

1. Set your app component name through FireworkSDK.getInstance().appComponentName . The app component name is the first parameter you pass to AppRegistry.registerComponent. And you could set your app component name after calling AppRegistry.registerComponent. The sample file is index.tsx.

2. In FireworkSDK.getInstance().onCustomCTAClick, you could call FireworkSDK.getInstance().navigator.pushNativeContainer to navigate a new native container. You could pass the props to FireworkSDK.getInstance().navigator.pushNativeContainer. And we will pass the props to your app component. The sample file is EnableCustomCTAClickCallbackForm.tsx.

3. Handle the props in your app component. The sample file is App.tsx. The version that the sample codes use for react-navigation is 6.x. You need to handle the dynamic props based on the version you use.

For integration steps for scenario 2, you could refer to onClickCartIcon.

Start the floating player or close the player

We support starting the floating player on the iOS side. Therefore, the host app could use following codes to handle navigating from the player.

FireworkSDK.getInstance().onCustomCTAClick = async () => {
  
  if (Platform.OS === 'ios') {
    // we only support starting floating player on the iOS side
    const result = await FireworkSDK.getInstance().navigator.startFloatingPlayer();
    if (!result) {
      /* when the result is false, the current fullscreen player may not
       * enable the floating player. In that case, we could call the
       * following method to close the fullscreen player.
       */
      await FireworkSDK.getInstance().navigator.popNativeContainer();
    }
  } else {
      await FireworkSDK.getInstance().navigator.popNativeContainer();
  }
  
  // Navigate to the RN webview page of the host app.
  navigation.navigate('LinkContent', { url: event.url });
}

FireworkSDK.getInstance().shopping.onCustomClickCartIcon = async () => {
  
  if (Platform.OS === 'ios') {
    // we only support starting floating player on the iOS side
    const result = await FireworkSDK.getInstance().navigator.startFloatingPlayer();
    if (!result) {
      /* when the result is false, the current fullscreen player may not
       * enable the floating player. In that case, we could call the
       * following method to close the fullscreen player.
       */
      await FireworkSDK.getInstance().navigator.popNativeContainer();
    }
  } else {
      await FireworkSDK.getInstance().navigator.popNativeContainer();
  }
  
  // Navigate to the RN cart page of the host app.
  navigation.navigate('Cart');
};