Question 395439 in React native Question posted in
The official React Native documentation can be found here.

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

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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();
 };
}, []);

  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search