Skip to content

Commit 846d67e

Browse files
droibitdroibit
committed
Update README.md
1 parent 36ae22d commit 846d67e

File tree

1 file changed

+41
-55
lines changed

1 file changed

+41
-55
lines changed

‎README.md‎

Lines changed: 41 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,38 @@
11
# React Native Custom Tabs
2+
23
[![npm version](https://badge.fury.io/js/react-native-custom-tabs.svg)](https://badge.fury.io/js/react-native-custom-tabs) [![Software License](https://img.shields.io/badge/license-Apache%202.0-brightgreen.svg)](https://github.com/droibit/react-native-custom-tabs/blob/develop/LICENSE)
34

4-
[Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) for React Native.
5+
[Chrome Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) for React Native.
6+
7+
![screenshot](http://i.imgur.com/0qE2E7a.gif)
8+
59
Custom Tabs is supported only for Android, so the behavior on each platform is bellow.
610

7-
* Android
8-
If Chrome is installed, open the URL in Chrome that you have customized some of the look & feel. If it is not installed, open in other browser.
11+
- Android
12+
If Chrome is installed, open the URL in Chrome that you have customized some of the look & feel. If it is not installed, open in other browser.
913

10-
* iOS
11-
If Chrome is installed, open the URL in it. If it is not installed, open in Safari.
14+
- iOS
15+
If Chrome is installed, open the URL in it. If it is not installed, open in Safari.
1216

1317
Customization and detailed behavior refer to the [Usage](#Usage).
1418

1519
## Installation
1620

1721
```
22+
yarn add react-native-custom-tabs
23+
or
1824
npm install react-native-custom-tabs --save
1925
```
2026

21-
To link the native module automatically, it is recommended that you use the [rnpm](https://github.com/rnpm/rnpm).
27+
Link your native dependencies:
2228

2329
```
24-
rnpm link
30+
react-native link react-native-custom-tabs
2531
```
2632

2733
#### Android
2834

29-
In Android, Add it in your **root** `build.gradle`([e.g. example](https://github.com/droibit/react-native-custom-tabs/blob/develop/example/android/build.gradle)) at the end of repositories:
35+
In Android, Add it in your **root** `build.gradle` at the end of repositories:
3036

3137
```groovy
3238
allprojects {
@@ -37,35 +43,22 @@ allprojects {
3743
}
3844
```
3945

40-
And, provide `CustomTabsPackage` in your Application class.
46+
ref. [example](https://github.com/droibit/react-native-custom-tabs/blob/develop/example/android/build.gradle#L25)
4147

42-
```java
43-
import com.github.droibit.android.reactnative.customtabs.CustomTabsPackage;
48+
If you want to change the dependency version of this library, add the necessary properties to **root** `build.gradle`.
4449

45-
@Override
46-
protected List<ReactPackage> getPackages() {
47-
return Arrays.asList(
48-
...,
49-
new CustomTabsPackage()
50-
);
51-
}
5250
```
53-
54-
If you use version `0.1.5` or higher, change the **app** `build.gradle`.
55-
56-
```groovy
57-
android {
58-
...
59-
compileSdkVersion 25
60-
buildToolsVersion "25.0.1"
61-
}
62-
63-
dependencies {
64-
...
65-
compile "com.android.support:appcompat-v7:25.0.1"
51+
// e.g. For RN 0.56
52+
ext {
53+
buildToolsVersion = "26.0.3"
54+
compileSdkVersion = 26
55+
targetSdkVersion = 26
56+
supportLibVersion = "26.1.0"
6657
}
6758
```
6859

60+
ref. [example](https://github.com/droibit/react-native-custom-tabs/blob/develop/example/android/build.gradle#L29-L34)
61+
6962
## Usage
7063

7164
Open the URL as `Linking` of React Native.
@@ -83,51 +76,44 @@ CustomTabs.openURL('https://www.google.com').then((launched: {boolean}) => {
8376
You can customize the look & feel in Android. The following option is ignored in iOS.
8477

8578
```javascript
86-
import {
87-
ANIMATIONS_SLIDE,
88-
ANIMATIONS_FADE
89-
} from 'react-native-custom-tabs';
79+
import { ANIMATIONS_SLIDE, ANIMATIONS_FADE } from "react-native-custom-tabs";
9080

9181
CustomTabs.openURL(url, {
92-
toolbarColor: '#607D8B',
82+
toolbarColor: "#607D8B",
9383
enableUrlBarHiding: true,
9484
showPageTitle: true,
9585
enableDefaultShare: true,
9686
// Specify full animation resource identifier(package:anim/name)
9787
// or only resource name(in case of animation bundled with app).
9888
animations: {
99-
startEnter: 'slide_in_bottom',
100-
startExit: 'slide_out_bottom',
101-
endEnter: 'slide_in_bottom',
102-
endExit: 'slide_out_bottom',
89+
startEnter: "slide_in_bottom",
90+
startExit: "slide_out_bottom",
91+
endEnter: "slide_in_bottom",
92+
endExit: "slide_out_bottom"
10393
},
10494
// And supports SLIDE and FADE as default animation.
10595
// animations: ANIMATIONS_SLIDE or ANIMATIONS_FADE.
10696
headers: {
107-
'my-custom-header': 'my custom header value'
97+
"my-custom-header": "my custom header value"
10898
},
109-
forceCloseOnRedirection: true,
99+
forceCloseOnRedirection: true
110100
});
111101
```
112102

113103
The option to support:
114104

115-
|property|type|default|description|
116-
|--------|----|-------|-----------|
117-
|toolbarColor|string|undefined|the Toolbar color. Supported formats are: #RRGGBB, #AARRGGBB, [etc](http://d.android.com/reference/android/graphics/Color.html#parseColor(java.lang.String)). |
118-
|enableUrlBarHiding|boolean|undefined|Enables the url bar to hide as the user scrolls down on the page.|
119-
|showPageTitle|boolean|undefined|Sets whether the title should be shown in the custom tab.|
120-
|enableDefaultShare|boolean|undefined|Whether to add a default shared items of the menu.|
121-
|animations|Object|undefined|Sets the exit and start animations. ANIMATIONS_FADE, ANIMATIONS_SLIDE or custom object with string properties `startEnter`, `startExit`, `endEnter` and `endExit` each defining an Android animation resource ID to use for the animations, such as `slide_in_right`.|
122-
|headers|Object|undefined|Sets any custom headers that should be used.|
123-
|forceCloseOnRedirection|boolean|undefined|Workaround that Custom Tabs doesn't close on redirecting back to app scheme.([#11](https://github.com/droibit/react-native-custom-tabs/pull/11))|
124-
105+
| property | type | default | description |
106+
| ----------------------- | ------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
107+
| toolbarColor | string | undefined | the Toolbar color. Supported formats are: #RRGGBB, #AARRGGBB, [etc](<http://d.android.com/reference/android/graphics/Color.html#parseColor(java.lang.String)>). |
108+
| enableUrlBarHiding | boolean | undefined | Enables the url bar to hide as the user scrolls down on the page. |
109+
| showPageTitle | boolean | undefined | Sets whether the title should be shown in the custom tab. |
110+
| enableDefaultShare | boolean | undefined | Whether to add a default shared items of the menu. |
111+
| animations | Object | undefined | Sets the exit and start animations. ANIMATIONS_FADE, ANIMATIONS_SLIDE or custom object with string properties `startEnter`, `startExit`, `endEnter` and `endExit` each defining an Android animation resource ID to use for the animations, such as `slide_in_right`. |
112+
| headers | Object | undefined | Sets any custom headers that should be used. |
113+
| forceCloseOnRedirection | boolean | undefined | Workaround that Custom Tabs doesn't close on redirecting back to app scheme.([#11](https://github.com/droibit/react-native-custom-tabs/pull/11)) |
125114

126115
`undefined` property is default behavior of the Custom Tabs.
127116

128-
Customize and default look & feel.
129-
![screenshot](http://i.imgur.com/0qE2E7a.gif)
130-
131117
## License
132118

133119
Copyright (C) 2015 The Android Open Source Project

0 commit comments

Comments
 (0)