Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

How to add an overlay on SFSafariViewController with react-navigation?

$
0
0

I'd like to show an overlay above the SFSafariViewController when I click on a link within SFSafariViewController.

An expected view is displayed below.

enter image description here

A similar issue has been posted in react-native-navigation. The solution is copied here:

// AppDelegate.m
[ReactNativeNavigation registerExternalComponent:@"RNNSafariViewController" callback:^UIViewController *(NSDictionary *props, RCTBridge *bridge) {
  return [[RNNSafariViewController alloc] initWithProps:props];
}];

// RNNSafariViewController.m
#import "RNNSafariViewController.h"

@import SafariServices;

@implementation RNNSafariViewController {
  NSURL* _url;
  boolean* _readerMode;
}

- (instancetype)initWithProps:(NSDictionary *)props {
  self = [super init];
  _url = [[NSURL alloc] initWithString:props[@"url"]];
  _readerMode = [props[@"readerMode"] boolValue];
  return self;
}

- (void)viewDidAppear:(BOOL)animated {
  [super viewDidAppear:animated];
  SFSafariViewController *safariViewController = [[SFSafariViewController alloc] initWithURL:_url entersReaderIfAvailable:_readerMode];
  safariViewController.delegate = self;
  [self presentViewController:safariViewController animated:animated completion:nil];
}

@end

// RNNSafariViewController.h
#import <UIKit/UIKit.h>

@interface RNNSafariViewController : UIViewController<SFSafariViewControllerDelegate>

- (instancetype)initWithProps:(NSDictionary*)props;

@end

I would like to do the same in react-navigation. But I am not sure if react-navigation provides the same library RNNSafariViewController.h as react-native-navigation does.

What would be a good way to implement this in react-navigation? Thanks!


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>