How to implement OAuth login with react-native-safari-view?

Register a URL scheme in Xcode, use SafariView.show() to open the OAuth URL, and listen for callbacks with Linking.addEventListener('url', handler) to complete the flow.

react-native-safari-view vs react-native-webview: which should I use?

Use react-native-safari-view for native Safari features and performance on iOS, but choose react-native-webview for cross-platform support, URL monitoring, and deeper customization.

How to customize the colors in Safari View Controller?

Pass tintColor and barTintColor as hex or rgba strings in the show() method options to change the browser controls' appearance, as documented in the README.

Does react-native-safari-view work on Android?

No, it's iOS-only since it wraps Apple's SFSafariViewController. For Android, consider alternatives like react-native-webview or platform-specific libraries.

How to handle when the Safari View is closed?

Add an event listener for onDismiss to run code like resetting the status bar style, ensuring smooth UI transitions after the view closes.

What fallback is needed for older iOS devices?

For iOS 8 and earlier, implement a fallback using a WebView component in the catch block of isAvailable(), as shown in the example code.

Open-Awesome

react-native-safari-view

Objective-Cv2.1.0

A React Native wrapper for iOS Safari View Controller to display web content with native browser features.

Visit Website GitHub

493 stars104 forks0 contributors

What is react-native-safari-view?

React Native Safari View is a React Native wrapper for Apple's Safari View Controller (SFSafariViewController) that enables iOS apps to display web content with native browser functionality. It provides a seamless way to integrate web views while maintaining native performance and user experience, such as Safari's reader mode and sharing capabilities. The library focuses on offering a simple, reliable bridge to iOS's native components, prioritizing native performance over custom web view implementations.

Target Audience

React Native developers building iOS applications who need to embed web content with a native browser experience, particularly those implementing features like OAuth2/OpenID Connect flows or requiring Safari's built-in functionalities. It is also suitable for developers needing fallback support for iOS 8 and earlier versions.

Value Proposition

Developers choose this library because it leverages iOS's native SFSafariViewController, ensuring full Safari functionality (e.g., reader mode, URL scheme support, and system sharing) within apps, which enhances user experience and security compared to custom web views. Its straightforward API, event handling for lifecycle management, and customization options (like tint colors) make it a reliable and performant alternative to other web view solutions in React Native.

Overview

A React Native wrapper for Safari View Controller.

Use Cases

Best For

Implementing OAuth2 or OpenID Connect authentication flows in React Native iOS apps with URL scheme callbacks.
Displaying web content in React Native iOS apps with native Safari features like reader mode and sharing options.
Ensuring a consistent, secure browsing experience within iOS apps by using Apple's SFSafariViewController.
Customizing the appearance of embedded web views with tint colors and bar tint colors for brand consistency.
Handling web view lifecycle events (onShow and onDismiss) for status bar or UI adjustments in React Native.
Providing fallback web view support for older iOS versions (8 and earlier) while using native Safari View on newer devices.

Not Ideal For

Cross-platform React Native projects requiring Android or web support
Applications needing real-time URL navigation monitoring or custom JavaScript injection
Projects that require deeply embedded, inline web views rather than modal presentations
Teams targeting iOS versions below 8 without a fallback WebView implementation

Pros & Cons

Pros

Native Safari Integration

Leverages Apple's SFSafariViewController for full Safari functionality like reader mode and sharing, ensuring a secure and familiar user experience.

URL Scheme Support

Enables seamless OAuth2/OpenID Connect flows through URL scheme notifications, essential for authentication callback handling.

Simple API

Offers straightforward methods like show() and isAvailable(), making integration quick with minimal code complexity.

Event Lifecycle Management

Provides onShow and onDismiss events for handling UI adjustments, such as status bar changes during view transitions.

Cons

iOS-Only Limitation

Exclusively supports iOS, requiring separate solutions for Android in cross-platform apps, which increases development overhead.

No URL Change Monitoring

The README admits SFSafariViewController lacks APIs for tracking URL changes, restricting use cases like analytics or navigation control.

Limited Version Support

Officially supports only the latest React Native version, risking compatibility issues with older projects and necessitating frequent updates.

Frequently Asked Questions

Related Projects

react-native-inappbrowser-reborn

📱InAppBrowser for React Native (Android & iOS) 🤘

Stars1,414

Forks235

Last commit4 months ago

react-native-webview-bridge

React Native Webview with Javascript Bridge

Stars1,373

Forks477

Last commit2 years ago

react-native-webview-android

Simple React Native Android module to use Android's WebView inside your app

Stars357

Forks156

Last commit6 years ago

react-native-for-web

A set of classes and react components to make work your react-native app in a browser. (with some limitations obviously)

Stars253

Forks17

Last commit10 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub