Redirecting to a specific screen in React Native from Android share menu

Question

I have implemented sharing functionality in my React Native. When I click the share button within my app, the share menu opens, including my app among others. I want to direct users to a specific screen (e.g., message screen) in my React Native app when they select my app from this share menu. How can I achieve this redirection in React Native?

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.VIBRATE"/>
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <queries>
    <intent>
      <action android:name="android.intent.action.VIEW"/>
      <category android:name="android.intent.category.BROWSABLE"/>
      <data android:scheme="https"/>
    </intent>
  </queries>
  <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="true" android:theme="@style/AppTheme">
    <meta-data android:name="expo.modules.updates.ENABLED" android:value="false"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_CHECK_ON_LAUNCH" android:value="ALWAYS"/>
    <meta-data android:name="expo.modules.updates.EXPO_UPDATES_LAUNCH_WAIT_MS" android:value="0"/>
    <activity android:name=".MainActivity" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:theme="@style/Theme.App.SplashScreen" android:exported="true" android:screenOrientation="portrait">
      <intent-filter>
        <action android:name="android.intent.action.MAIN"/>
        <category android:name="android.intent.category.LAUNCHER"/>
        <data android:scheme="com.my.AppShare" />
      </intent-filter>
      <intent-filter>
        <action android:name="android.intent.action.SEND" />
        <category android:name="android.intent.category.DEFAULT" />
        <data android:mimeType="*/*" />
      </intent-filter>
    </activity>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>
  </application>
</manifest>

App.js

import HomeScreen from "./src/components/HomeScreen";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { Text, View } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

export default function App() {
  const navigationRef = React.useRef(null);

  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Message" component={MessageScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.jsx

export default function HomeScreen() {
 
  const onShare = async () => {
    try {
      const options = {
        title: "Share via",
        message: "Check this out!",
        url: "http://example.com",
      };
      Share.open(options);
    } catch (err) {
      console.log(err);
    }
  };
  return (
    <View>
      <TouchableOpacity onPress={() => onShare()}>
        <Entypo name="share" size={24} color="black" />
        <Text>Share</Text>
      </TouchableOpacity>
    </View>
  );
};

MessgeScreen.jsx

export default function MessageScreen({ route, navigation }) {
  return (
    <View>
      <Text>Message Screen</Text>
    </View>
  );
}

I expected that selecting my app from the share menu would redirect users to a specific screen (e.g., message screen) within my app.

However, when I select my app from the share menu, it does not redirect to the desired screen. Instead, it opens the app normally without navigating to the specific screen. I am looking for a way to correctly handle this intent and navigate to the specific screen in React Native.

Answer 1

In my case I found a solution for this. In myMainActivity.kt, I need to handle the intent in the onCreate and onNewIntent methods.

 override fun onCreate(savedInstanceState: Bundle?) {
    setTheme(R.style.AppTheme)
    super.onCreate(null)
    handleIntent(intent)
  }

  override fun onNewIntent(intent: Intent?) {
    super.onNewIntent(intent)
    handleIntent(intent)
  }

  private fun handleIntent(intent: Intent?) {
    if (intent?.action == Intent.ACTION_SEND) {
      val sharedText = intent.getStringExtra(Intent.EXTRA_TEXT)
      sharedText?.let {
        val reactContext = reactInstanceManager.currentReactContext
        reactContext?.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter::class.java)
          ?.emit("appOpenedWithShare", it)
      }
    }
  }

And add an event listener to handle the event when the app is opened with shared text.

useEffect(() => {
const { DeviceEventManagerModule } = NativeModules;
const eventEmitter = new NativeEventEmitter(DeviceEventManagerModule);
const subscription = eventEmitter.addListener(
  "appOpenedWithShare",
  (sharedText) => {
    if (navigationRef.current) {
      navigationRef.current.navigate("Message", { sharedText });
    }
  }
);

return () => {
  subscription.remove();
 };
}, []);

Answer 2

For redirecting to a specific screen, you must implement deep linking in the app.

Unfortunately, I cannot give you the whole code but you can refer to this blog for more info and examples.