Skip to content

Commit 73b8b88

Browse files
droibitdroibit
committed
Update README.md
1 parent 36ae22d commit 73b8b88

File tree

1 file changed

+44
-54
lines changed

1 file changed

+44
-54
lines changed

‎README.md

Lines changed: 44 additions & 54 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.
@@ -84,50 +77,47 @@ You can customize the look & feel in Android. The following option is ignored in
8477

8578
```javascript
8679
import {
87-
ANIMATIONS_SLIDE,
88-
ANIMATIONS_FADE
89-
} from 'react-native-custom-tabs';
80+
CustomTabs,
81+
ANIMATIONS_SLIDE,
82+
ANIMATIONS_FADE
83+
} from "react-native-custom-tabs";
9084

9185
CustomTabs.openURL(url, {
92-
toolbarColor: '#607D8B',
86+
toolbarColor: "#607D8B",
9387
enableUrlBarHiding: true,
9488
showPageTitle: true,
9589
enableDefaultShare: true,
9690
// Specify full animation resource identifier(package:anim/name)
9791
// or only resource name(in case of animation bundled with app).
9892
animations: {
99-
startEnter: 'slide_in_bottom',
100-
startExit: 'slide_out_bottom',
101-
endEnter: 'slide_in_bottom',
102-
endExit: 'slide_out_bottom',
93+
startEnter: "slide_in_bottom",
94+
startExit: "slide_out_bottom",
95+
endEnter: "slide_in_bottom",
96+
endExit: "slide_out_bottom"
10397
},
10498
// And supports SLIDE and FADE as default animation.
10599
// animations: ANIMATIONS_SLIDE or ANIMATIONS_FADE.
106100
headers: {
107-
'my-custom-header': 'my custom header value'
101+
"my-custom-header": "my custom header value"
108102
},
109-
forceCloseOnRedirection: true,
103+
forceCloseOnRedirection: true
110104
});
111105
```
112106

113107
The option to support:
114108

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-
109+
| property | type | default | description |
110+
| ----------------------- | ------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
111+
| 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)>). |
112+
| enableUrlBarHiding | boolean | undefined | Enables the url bar to hide as the user scrolls down on the page. |
113+
| showPageTitle | boolean | undefined | Sets whether the title should be shown in the custom tab. |
114+
| enableDefaultShare | boolean | undefined | Whether to add a default shared items of the menu. |
115+
| 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`. |
116+
| headers | Object | undefined | Sets any custom headers that should be used. |
117+
| 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)) |
125118

126119
`undefined` property is default behavior of the Custom Tabs.
127120

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

133123
Copyright (C) 2015 The Android Open Source Project

0 commit comments

Comments
 (0)