Navigate to RN page from player
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.
When users click the cart icon, the host app may want to navigate the custom React Native cart page.
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).
If the floating player is enabled, the host app could start the floating player when users click the CTA button or the cart icon.
FireworkSDK.getInstance().onCustomCTAClick = async () => {
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();
}
// Navigate to the RN webview page of the host app.
navigation.navigate('LinkContent', { url: event.url });
}
FireworkSDK.getInstance().shopping.onCustomClickCartIcon = async () => {
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();
}
// Navigate to the RN cart page of the host app.
navigation.navigate('Cart');
};
Last modified 2mo ago