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