Redirecting users to the App Store or Google Play Store is a common requirement in mobile app development β whether you're prompting users to rate your app, update to the latest version, or simply redirect them after certain actions. In this blog, we'll walk through how to do this efficiently in a React Native app with support for both iOS and Android.
π― What We'll Build
- A simple React Native component that:
- Detects the platform (iOS or Android),
- Attempts to open the native app store using a deep link,
- Falls back to the browser URL if the native store app is unavailable.
π Complete Code
Here's the complete example:
import {StyleSheet, Text, View, Linking, Platform, Button} from 'react-native';
import React from 'react';
const App = () => {
const AppleAppID = 'YOUR_APPLE_APP_ID';
const GooglePackageName = 'YOUR_PACKAGE_NAME';
const STORE_CONFIG = {
ios: {
deepLink: `itms-apps://itunes.apple.com/app/id${AppleAppID}`,
fallback: `https://apps.apple.com/app/id${AppleAppID}`,
},
android: {
deepLink: `market://details?id=${GooglePackageName}`,
fallback: `https://play.google.com/store/apps/details?id=${GooglePackageName}`,
},
};
const redirectToAppStore = async () => {
const platformConfig =
STORE_CONFIG[Platform.OS] || STORE_CONFIG.android;
const {deepLink, fallback} = platformConfig;
try {
const supported = await Linking.canOpenURL(deepLink);
await Linking.openURL(supported ? deepLink : fallback);
} catch (error) {
console.error('Failed to redirect to app store:', error);
await Linking.openURL(fallback);
}
};
return (
<View style={styles.container}>
<Text>Redirect Users to App Store or Play Store</Text>
<Button title="redirect to store" onPress={redirectToAppStore} />
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
β Conclusion
With just a few lines of code, you can create a smooth redirection experience for your users across platforms. This pattern keeps the UX native and reliable, while also handling edge cases with fallbacks.
Top comments (0)