matei-radu/react-native-in-app-browser

In-App browser support for React Native using Chrome Custom Tabs and Safari View Controller.

react-native-in-app-browser's Issues

Incorrect custom tabs import for React Native 0.59.X for Android?

Currently on React Native 0.59.0. Installed 2.1.0 of this library and went through the steps specified in the README, but ran into this build error when running react-native run-android in debug mode (/foo/bar is irrelevant directory path):

> Task :@matt-block_react-native-in-app-browser:compileDebugKotlin FAILED
w: Argfile not found: /Users/andrewchou/Library/Application Support/kotlin/daemon/matt-block_react-native-in-app-browser_debug
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (17, 25): Unresolved reference: customtabs
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (46, 26): Unresolved reference: CustomTabsClient
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (47, 27): Unresolved reference: CustomTabsSession
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (51, 9): Unresolved reference: CustomTabsClient
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (51, 79): Unresolved reference: CustomTabsServiceConnection
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (52, 13): 'onCustomTabsServiceConnected' overrides nothing
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (52, 84): Unresolved reference: CustomTabsClient
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (54, 46): Unresolved reference: CustomTabsCallback
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (57, 13): 'onServiceDisconnected' overrides nothing
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (68, 23): Unresolved reference: CustomTabsIntent
e: /foo/bar/node_modules/@matt-block/react-native-in-app-browser/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt: (146, 13): Unresolved reference: CustomTabsClient

Judging from the source code in the android directory (and my local node_modules), it seems like you're importing from an AndroidX library, which I wasn't expecting since the React Native version doesn't support it.

https://github.com/matei-radu/react-native-in-app-browser/blob/development-2.x.x/src/android/src/main/kotlin/com/mattblock/reactnative/inappbrowser/RNInAppBrowserModule.kt#L17

It seems like it worked after I replaced that line with import android.support.customtabs.*.

I'm pretty inexperienced with Android and React Native so let me know if I'm misunderstanding something or if you need additional info! And thanks for working on this library :)

Replace custom convertDpToPixel with Facebook's PixelUtil.toPixelFromDIP

Apparently, React Native already provides an Android utility class for pixel manipulation called PixelUtil.

Replace the custom made convertDpToPixel function with PixelUtil.toPixelFromDIP since it's probably more reliable and battle-tested.

[v2] crash on start on Android

There is an exception when I start the app:

E/unknown:ReactNative: Exception in native call
    java.lang.IllegalArgumentException: Service Intent must be explicit: Intent { act=android.support.customtabs.action.CustomTabsService }
        at android.app.ContextImpl.validateServiceIntent(ContextImpl.java:1519)
        at android.app.ContextImpl.bindServiceCommon(ContextImpl.java:1663)
        at android.app.ContextImpl.bindService(ContextImpl.java:1612)
        at android.content.ContextWrapper.bindService(ContextWrapper.java:698)
        at android.content.ContextWrapper.bindService(ContextWrapper.java:698)
        at android.support.customtabs.CustomTabsClient.bindCustomTabsService(CustomTabsClient.java:73)
        at com.mattblock.reactnative.inappbrowser.RNInAppBrowserModule.<init>(RNInAppBrowserModule.kt:51)
        at com.mattblock.reactnative.inappbrowser.RNInAppBrowserPackage.createNativeModules(RNInAppBrowserPackage.kt:17)
        at com.facebook.react.ReactPackageHelper.getNativeModuleIterator(ReactPackageHelper.java:42)
        at com.facebook.react.NativeModuleRegistryBuilder.processPackage(NativeModuleRegistryBuilder.java:41)
        at com.facebook.react.ReactInstanceManager.processPackage(ReactInstanceManager.java:1212)
        at com.facebook.react.ReactInstanceManager.processPackages(ReactInstanceManager.java:1182)
        at com.facebook.react.ReactInstanceManager.createReactContext(ReactInstanceManager.java:1120)
        at com.facebook.react.ReactInstanceManager.access$900(ReactInstanceManager.java:123)
        at com.facebook.react.ReactInstanceManager$5.run(ReactInstanceManager.java:943)
        at java.lang.Thread.run(Thread.java:764)

I'm using RN v0.59.10 and react-native-in-app-browser v2.1.1.

Prepare for React Native 0.59.x

Since RN 0.59.0-rc.0 is out, it would be time to test compatibility with it (althought problems are not expected).

Conform project structure and tooling to react-native-community standards

Given that:

• some potential contributors have expressed concerns about the project structure being unintuitive and uncommon for a RN project, and
• react-native-community has started drafting a common standard for their projects,

It would be better if the project conforms to these upcoming standards as much as possible to make it easier for developers to "jump" into development.

The main changes would be:

• Moving the android and ios folders to the root of the repo
• Applying ESLint with the community standards preset
• Simplify scripts and CI pipeline

The Kotlin/Swift combo will stay as opposed to switch it to Java/Obj-C.

Resources

• react-native-community/discussions-and-proposals#65
• https://www.npmjs.com/package/@react-native-community/eslint-config

Prepare for React Native 0.62.x

The first RC is out and there seems to be a lot of changes:

This release will be quite massive (there are around 1200 commits of delta between this version and 0.61!) - Release notes

Although there are a lot of commits, there are no notes about API changes, so there is no hint on what changes, if any, need to be made.

Nonetheless, at least a smoke test must be made with a 0.62 build.

Add a changelog

Currently, updates to the library bring unknown changes. A developer would need to dig through the commits and PRs to understand what is being changed.

Add a changelog and use the Keep a Changelog format. Also, mirror the changelog information in the Releases section of the repo.

Add support for 'windows' platform

Although Windows does not offer an Edge-based in-app browser utility, this library should still add the necessary changes for it to be used on windows.

An option is to add an isAvailable() method but other ideas are under consideration.

Update Flow definitions

As it is, Flow definitions already do not cover the changes added with version 1.2.0.

For version 2.0.0, Flow definitions need to be updated to reflect the braking changes.

Depends on #19.

Cannot test invalid values in Typescript test

Upgrading ts-jest to version ^23.10.x brings full type-checking, making tests to evaluate invalid value assignment behavior (i.e. sanitize() that filters out invalid setting properties) impossible.

Unsupported URL scheme

this does not support intent:// url scheme

Add support for SFSafariViewController dismissButtonStyle

Add support for customizing the dismissButtonStyle of SFSafariViewController.

Official docs: dismissButtonStyle - SFSafariViewController | Apple Developer Documentation

Please make Xcode project compatible with 9.2

The Xcode project cannot be opened by Xcode 9.2, which also prevents react-native link from functioning properly. Please change compatibility to 8.0 so it can be opened and integrated the same way all core RN Xcode projects are setup.

Expose library functionalities as an object

Concern

Since version 1.2.0, the library exports three functions:

• openInApp (default export)
• closeInAppInstance
• initialize

The issue with this setup is that it's easy to lose their syntactical meaning and context when used in real projects that are more complex than a simple demo app. Some examples are:

• What am I initializing here with initialize?
• closeInAppInstance is not a common pattern for instance management in OOP or in general.

Proposal

Expose the library functions via a wrapper object, ultimately mimicking the global Number and Date objects.

The benefits of this approach would be a clearer context on what the functions do and, because of this grouping under an object, the function names can be shortened or renamed in a more meaningful way. A possible arrangement:

import InAppBrowser from "@matt-block/react-native-in-app-browser";

// openInApp("https://www.wikipedia.org");
InAppBrowser.open("https://www.wikipedia.org");

// closeInAppInstance();
InAppBrowser.close();

// initialize({ /* */ });
InAppBrowser.configure({ /* */ });

These ar braking changes so a major version bump would be needed!

Upgrade dependencies

Especially Kotlin since it hasn't been upgraded since May 2019 (9968ee3).

iOS InAppBrowser.close threading violation

when i try

import { InAppBrowser } from "@matt-block/react-native-in-app-browser";

InAppBrowser.close();

i received red box, but app not crashed

[fatal][tid:com.facebook.react.RNInAppBrowserQueue] Exception 'threading violation: expected the main thread' was thrown while invoking closeInApp on target RNInAppBrowser with params (
)
callstack: (
	0   CoreFoundation                      0x00007fff23b98bde __exceptionPreprocess + 350
	1   libobjc.A.dylib                     0x00007fff503b5b20 objc_exception_throw + 48
	2   CoreFoundation                      0x00007fff23b98958 +[NSException raise:format:arguments:] + 88
	3   Foundation                          0x00007fff255eb6f5 -[NSAssertionHandler handleFailureInMethod:object:file:lineNumber:description:] + 191
	4   FrontBoardServices                  0x00007fff363306d7 -[FBSSerialQueue assertOnQueue] + 236
	5   FrontBoardServices                  0x00007fff362e00d7 -[FBSSceneImpl updateClientSettings:withTransitionContext:] + 71
	6   FrontBoardServices                  0x00007fff362e03be -[FBSSceneImpl updateClientSettingsWithTransitionBlock:] + 154
	7   FrontBoardServices                  0x00007fff362e02e3 -[FBSSceneImpl updateClientSettingsWithBlock:] + 110
	8   UIKitCore                           0x00007fff46cbe390 -[FBSScene(UIApp) updateUIClientSettingsWithBlock:] + 160
	9   UIKitCore                           0x00007fff468c0795 -[_UISystemAppearanceManager updateScreenEdgesDeferringSystemGestures] + 374
	10  UIKitCore                           0x00007fff46b1d528 __70-[UIViewController setNeedsUpdateOfScreenEdgesDeferringSystemGestures]_block_invoke_2 + 118
	11  UIKitCore                           0x00007fff46afb952 -[UIViewController _updateSystemAppearanceWithRecursionBlock:action:] + 295
	12  UIKitCore                           0x00007fff46b1d16f -[UIViewController _setPresentedStatusBarViewController:] + 220
	13  UIKitCore                           0x00007fff46b13010 -[UIViewController _dismissViewControllerWithAnimationController:interactionController:completion:] + 675
	14  UIKitCore                           0x00007fff46b12b75 -[UIViewController _dismissViewControllerWithTransition:from:completion:] + 662
	15  UIKitCore                           0x00007fff46b122e7 -[UIViewController dismissViewControllerWithTransition:completion:] + 1256
	16  UIKitCore                           0x00007fff46b11d23 -[UIViewController _performCoordinatedPresentOrDismiss:animated:] + 511
	17  UIKitCore                           0x00007fff46b1460a -[UIViewController dismissViewControllerAnimated:completion:] + 135
	18  AppName                             0x000000010a8b1f26 $s27react_native_in_app_browser14RNInAppBrowserC07closeInG0yyF + 118
	19  AppName                             0x000000010a8b1f6b $s27react_native_in_app_browser14RNInAppBrowserC07closeInG0yyFTo + 43
	20  CoreFoundation                      0x00007fff23b9f95c __invoking___ + 140
	21  CoreFoundation                      0x00007fff23b9cd8f -[NSInvocation invoke] + 287
	22  CoreFoundation                      0x00007fff23b9d1f4 -[NSInvocation invokeWithTarget:] + 68
	23  AppName                             0x000000010a5f1d12 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2658
	24  AppName                             0x000000010a5f5e47 _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 791
	25  AppName                             0x000000010a5f5953 _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 131
	26  AppName                             0x000000010a5f58c9 ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 25
	27  libdispatch.dylib                   0x000000010cdd5df0 _dispatch_call_block_and_release + 12
	28  libdispatch.dylib                   0x000000010cdd6d64 _dispatch_client_callout + 8
	29  libdispatch.dylib                   0x000000010cddd60b _dispatch_lane_serial_drain + 788
	30  libdispatch.dylib                   0x000000010cdde19b _dispatch_lane_invoke + 422
	31  libdispatch.dylib                   0x000000010cde9a59 _dispatch_workloop_worker_thread + 722
	32  libsystem_pthread.dylib             0x00007fff51420763 _pthread_wqthread + 290
	33  libsystem_pthread.dylib             0x00007fff514205c3 start_wqthread + 15
)

info

@matt-block/react-native-in-app-browser@^3.1.1"
"react-native": "0.61.2"

ios 13

Update the Kotlin Gradle plugin

Refer to Maven for the most recen Kotlin Gradle plugin version: https://mvnrepository.com/artifact/org.jetbrains.kotlin/kotlin-gradle-plugin

npm pack fails with no such file or directory

There is a typo in scripts/postpack.ts. matt-block-react-native-in-app-browser-v${packageJson.version}.tgz should be replaced with
matt-block-react-native-in-app-browser-${packageJson.version}.tgz. There is an extra v before ${packageJson.version}

Error: ENOENT: no such file or directory, stat 'matt-block-react-native-in-app-browser-v1.4.0.tgz'
    at Object.statSync (fs.js:851:3)
    at extractFileSync (/Users/abhishekkumar/ReactLibraries/react-native-in-app-browser/node_modules/tar/lib/extract.js:68:19)
    at Object.module.exports (/Users/abhishekkumar/ReactLibraries/react-native-in-app-browser/node_modules/tar/lib/extract.js:35:33)
    at Object.<anonymous> (/Users/abhishekkumar/ReactLibraries/react-native-in-app-browser/scripts/postpack.ts:15:5)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Module.m._compile (/Users/abhishekkumar/ReactLibraries/react-native-in-app-browser/node_modules/ts-node/src/index.ts:439:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.require.extensions.(anonymous function) [as .ts] (/Users/abhishekkumar/ReactLibraries/react-native-in-app-browser/node_modules/ts-node/src/index.ts:442:12)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)

What happens if Chrome is not Installed on Android Device?

I would like to know if the Chrome Custom Tabs would still work if Chrome is not installed on the user's Android device.

Add mayLaunchUrl and warmup methods in Android

Abide to the Recommended Community Standards

See https://github.com/matei-radu/react-native-in-app-browser/community

Readme review

For version 2.0.0, since many things will change (API, docs, etc) the Readme should be reviewed and changed where needed.

Depends on #19.

Provide option to control modal transition style

It would be great to be able to have a setting that customizes the transition style of the modal when it opens/closes. I noticed that the way I currently have it set up, it comes in from the bottom on Android, whereas it comes in from the side on iOS. Would love to make it consistent for my use case.

Just from a quick search, seems like this is the relevant property for iOS:

• https://developer.apple.com/documentation/uikit/uiviewcontroller/1621388-modaltransitionstyle
• https://developer.apple.com/documentation/uikit/uimodaltransitionstyle

Not sure what the equivalent is on Android but I would imagine that they have something similar.

How to change Bottom navigation bar color ?

How to change Bottom navigation bar color ?

Android:
it can change toorbarColor (top bar)
but..
Why it cannot change Bottom navigation ?
Or maybe me stupid..

pls help

Prepare for React Native 0.60.x

Since RN 0.60.0-rc.0 is about to be released, it would be time to test compatibility with it (although problems are not expected).

Refactor getBitmapFromUriOrDrawable

getBitmapFromUriOrDrawable is a mess and can certainly be done better.

Consider using ApplicationInfo.FLAG_DEBUGGABLE to determine which image retrieval strategy is needed instead of nesting try-catch blocks.

Mention WebBrowser in Readme for Expo projects

Mention WebBrowser as an alternative for Expo projects in the "Compatibility" section of the README.

Add support for SFSafariViewController enterReaderIfAvailable

Add support for setting enterReaderIfAvailable of SFSafariViewController.

Official docs: enterReaderIfAvailable - SFSafariViewController | Apple Developer Documentation

iOS Podspec file is outdated

/src/ios/RNInAppBrowser.podspec must be kept in sync with with the package.json. The following properties must be updated:

• s.version, from 0.5.0 to current version

Investigate how to implement Custom Action Buttons

See, if possible with React Native, how to implement custom action buttons for Custom Chrom Tab and how much effort would be required.

Create extensive documentation

Add exhaustive documentation using the Wiki section of the repo, then update accordingly the readme (see #25).

Sections of the readme to move to the Wiki:

• Deprecated features
• Usage examples
• Settings details

Remaining sections should be duplicated anyway for completeness.

Depends on #19.

Integrate TinyColor for color processing

Using TinyColor would:

• Give some more format options for setting AndroidSettings.toolbarColor.
• Give many more format options for setting IOSSettings toolbar colors (currently, only hex format is supported).
• Eliminate some boilerplate like colors.ts and UIColorExtensions.swift.

Prepare for React Native 0.58.x

Since RN 0.58.x is getting close to a stable release, it would be time to test compatibility with the current release candidate (althought problems are not expected).