🔁 How to Redirect Users to the App Store or Play Store in React Native
Amit Kumar

Amit Kumar @amitkumar13

About: Software Engineer

Location:
New Delhi, India
Joined:
Apr 19, 2024

🔁 How to Redirect Users to the App Store or Play Store in React Native

Publish Date: May 9
7 0

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',
  },
});

Enter fullscreen mode Exit fullscreen mode

✅ 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.

Comments 0 total

    Add comment