Skip to content

Commit a997185

Browse files
committed
chore: update Readme
1 parent b976151 commit a997185

File tree

1 file changed

+42
-271
lines changed

1 file changed

+42
-271
lines changed

README.md

Lines changed: 42 additions & 271 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
2-
[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)
3-
[![NPM Version](https://img.shields.io/npm/v/@xmartlabs/react-native-line.svg?style=flat-square)](https://www.npmjs.com/package/@xmartlabs/react-native-line)
1+
# ![React Native Line](/assets/github-banner.png)
42

5-
# ![React Native LINE](/assets/github-banner.png)
3+
[![npm version](https://img.shields.io/npm/v/@xmartlabs/react-native-line.svg?style=flat-square)](https://www.npmjs.com/package/@xmartlabs/react-native-line)
4+
[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
65

76
Line SDK wrapper for React Native 🚀
87

9-
- [LINE SDK v5 for iOS Swift](https://developers.line.biz/en/reference/ios-sdk-swift/), wrapped with [Swift](https://developer.apple.com/swift/).
8+
- [LINE SDK v5 for iOS](https://developers.line.biz/en/reference/ios-sdk-swift/), wrapped with [Swift](https://developer.apple.com/swift/).
109
- [LINE SDK v5 for Android](https://developers.line.biz/en/reference/android-sdk/), wrapped with [Kotlin](https://kotlinlang.org/).
1110

1211
## Requirements
@@ -17,133 +16,71 @@ Line SDK wrapper for React Native 🚀
1716

1817
## Installation
1918

20-
```bash
21-
$ npm install --save @xmartlabs/react-native-line
19+
### With Expo
2220

23-
# --- or ---
21+
1. Install the JavaScript with:
2422

25-
$ yarn add @xmartlabs/react-native-line
26-
```
23+
```bash
24+
npx expo install @xmartlabs/react-native-line
25+
```
2726

28-
## Expo Support
27+
2. Add the plugin `expo-build-properties` to your `app.json`:
2928

30-
If you're using Expo you need to add this plugins
31-
32-
```json
29+
```json
3330
"plugins": [
34-
...
3531
[
36-
"expo-build-properties", // This is required
32+
"expo-build-properties",
3733
{
3834
"ios": {
39-
"useFrameworks": "static"
35+
"useFrameworks": "static" // This is required
4036
}
4137
}
42-
],
43-
[
44-
"@xmartlabs/react-native-line",
45-
{
46-
"channelId": "YOUR_CHANNEL_ID"
47-
}
4838
]
49-
],
50-
```
51-
52-
⚠️ [iOS] if you're using other plugins it might cause conflict on `appDelegate.mm` file, please implement your own appDelegate mod if conflict occur
53-
54-
### Setup
55-
56-
#### iOS using Objective-C
57-
58-
Inside your `AppDelegate.m`, setup the line sdk by passing the channel id obtained.
59-
60-
1. Modify your info.plist like it says here [Configuring the Info.plist file](https://developers.line.biz/en/docs/line-login-sdks/ios-sdk/swift/setting-up-project/#config-infoplist-file)
61-
2. Change your `AppDelegate.m` to match the following:
62-
63-
```objc
64-
// AppDelegate.m
39+
]
40+
```
6541

66-
//
67-
// Import the Library
68-
//
69-
#import "RNLine-Swift.h"
42+
### With react-native-cli
7043

71-
//
72-
// Setup the plugin using your CHANNEL_ID when the app finishes launching
73-
//
74-
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
75-
{
76-
[LineLogin setupWithChannelID:@"YOUR_CHANNEL_ID" universalLinkURL:nil];
77-
}
44+
1. Install library:
7845

79-
//
80-
// Handle redirection back to the app from Line
81-
//
82-
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
83-
{
84-
return [LineLogin application:app open:url options:options];
85-
}
46+
```bash
47+
npm install @xmartlabs/react-native-line
8648
87-
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
88-
{
89-
BOOL handledLine = [LineLogin application:application continue:userActivity restorationHandler:restorationHandler];
90-
return handledLine;
91-
}
92-
```
49+
# --- or ---
9350
94-
#### iOS using Swift
51+
yarn add @xmartlabs/react-native-line
52+
```
9553

96-
1. Follow instructions in [Integrating LINE Login with your iOS app](https://developers.line.biz/en/docs/ios-sdk/swift/integrate-line-login/).
97-
2. Change your `AppDelegate.m` to match the following:
54+
2. Link native code:
9855

99-
```swift
100-
// AppDelegate.swift
56+
```bash
57+
cd ios && pod install
58+
```
10159

102-
//
103-
// Import the Library
104-
//
105-
import LineLogin
106-
107-
//
108-
// Setup the plugin using your CHANNEL_ID when the app finishes launching
109-
//
110-
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
111-
LineLogin.setup(channelID: "YOUR_CHANNEL_ID", universalLinkURL: nil)
112-
113-
return true
114-
}
60+
## Usage
11561

116-
//
117-
// Handle redirection back to the app from Line
118-
//
119-
func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
120-
return LineLogin.application(app, open: url, options: options)
121-
}
122-
```
62+
1. Import the `LineLogin` module:
12363

124-
Don't forget to add `application` function, as line's instructions indicate.
64+
```typescript
65+
import LineLogin from '@xmartlabs/react-native-line'
66+
```
12567

126-
#### Android
68+
2. Initialize the module with the `setup` method:
12769

128-
1. Follow all the configuration steps in [Line's Android integration guide](https://developers.line.biz/en/docs/android-sdk/integrate-line-login/)
129-
2. Add the string `line_channel_id` to your strings file with the the channel id that you have on your line console.
70+
```typescript
71+
useEffect(() => {
72+
LineLogin.setup('YOUR_CHANNEL_ID')
73+
}, [])
74+
```
13075

131-
```xml
132-
<string name="line_channel_id" translatable="false">Your channel id here</string>
133-
```
76+
3. Login with the `login` method:
13477

135-
3. In your manifest add `xmlns:tools="http://schemas.android.com/tools"` in your `manifest` tag and also `tools:replace="android:allowBackup"` in your `application` tag
78+
```typescript
79+
LineLogin.login({})
80+
```
13681

13782
## API
13883

139-
First, require the `LineLogin` module:
140-
141-
```javascript
142-
import LineLogin from '@xmartlabs/react-native-line'
143-
```
144-
145-
Then, you can start using all the functions that are available:
146-
14784
| Function | Description |
14885
| -------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
14986
| `login(args?: LoginArguments): Promise<LoginResult>` | Starts the login flow of Line's SDK (Opens the apps if it's installed and defaults to the browser otherwise). It accepts the same argumements as the LineSDK, in an object `{ key: value }`, defaults the same way as LineSDK too. |
@@ -154,175 +91,9 @@ Then, you can start using all the functions that are available:
15491
| `verifyAccessToken(): Promise<AccessTokenVerifyResult>` | Verifies the access token and returns it. |
15592
| `getBotFriendshipStatus(): Promise<BotFriendshipStatus>` | Gets bot friendship status if [configured](https://developers.line.biz/en/docs/ios-sdk/swift/link-a-bot/). |
15693
157-
### Return values
158-
159-
The following objects are returned on the methods described above:
160-
161-
1. UserProfile:
162-
163-
```typescript
164-
{
165-
/// The user ID of the current authorized user.
166-
userID: string
167-
/// The display name of the current authorized user.
168-
displayName: string
169-
/// The profile image URL of the current authorized user. `null` if the user has not set a profile
170-
/// image.
171-
pictureURL?: string
172-
/// The status message of the current authorized user. `null` if the user has not set a status message.
173-
statusMessage?: string
174-
}
175-
```
176-
177-
2. AccessToken:
178-
179-
```typescript
180-
{
181-
/// The value of the access token.
182-
access_token: string
183-
/// The expiration time of the access token. It is calculated using `createdAt` and the validity period
184-
/// of the access token. This value might not be the actual expiration time because this value depends
185-
/// on the system time of the device when `createdAt` is determined.
186-
expires_in: string
187-
/// The raw string value of the ID token bound to the access token. The value exists only if the access token
188-
/// is obtained with the `.openID` permission.
189-
id_token?: string
190-
}
191-
```
192-
193-
3. AccessTokenVerifyResult:
194-
195-
```typescript
196-
{
197-
// The channel ID bound to the access token.
198-
client_id: string
199-
/// The amount of time until the access token expires.
200-
expires_in: string
201-
/// Valid permissions of the access token separated by spaces
202-
scope: string
203-
}
204-
```
205-
206-
4. LoginResult
207-
208-
```typescript
209-
{
210-
/// The access token obtained by the login process.
211-
accessToken: AccessToken
212-
/// The permissions bound to the `accessToken` object by the authorization process. Scope has them separated by spaces
213-
scope: string
214-
/// Contains the user profile including the user ID, display name, and so on. The value exists only when the
215-
/// `.profile` permission is set in the authorization request.
216-
userProfile?: UserProfile
217-
/// Indicates that the friendship status between the user and the bot changed during the login. This value is
218-
/// non-`null` only if the `.botPromptNormal` or `.botPromptAggressive` are specified as part of the
219-
/// `LoginManagerOption` object when the user logs in. For more information, see Linking a bot with your LINE
220-
/// Login channel at https://developers.line.me/en/docs/line-login/web/link-a-bot/.
221-
friendshipStatusChanged?: boolean
222-
/// The `nonce` value when requesting ID Token during login process. Use this value as a parameter when you
223-
/// verify the ID Token against the LINE server. This value is `null` if `.openID` permission is not requested.
224-
IDTokenNonce?: string
225-
}
226-
```
227-
228-
5. BotFriendshipStatus
229-
230-
```typescript
231-
{
232-
friendFlag: boolean
233-
}
234-
```
235-
236-
### Arguments
237-
238-
1. LoginArguments
239-
240-
```typescript
241-
{
242-
scopes?: LoginPermission[]
243-
onlyWebLogin?: boolean
244-
botPrompt?: BotPrompt
245-
}
246-
```
247-
248-
2. LoginPermission
249-
250-
```typescript
251-
{
252-
EMAIL = 'email',
253-
/// The permission to get an ID token in the login response.
254-
OPEN_ID = 'openid',
255-
/// The permission to get the user's profile including the user ID, display name, and the profile image
256-
/// URL in the login response.
257-
PROFILE = 'profile',
258-
}
259-
```
260-
261-
3. BotPrompt
262-
263-
```typescript
264-
{
265-
aggressive = 'aggressive',
266-
normal = 'normal',
267-
}
268-
```
269-
270-
## Usage
271-
272-
1. Login with default values:
273-
274-
```typescript
275-
try {
276-
...
277-
const loginResult = await Line.login()
278-
...
279-
} catch (error) {
280-
...
281-
}
282-
```
283-
284-
2. Login with arguments:
285-
286-
```typescript
287-
try {
288-
...
289-
const loginResult = await Line.login({
290-
scopes: ['email', 'profile'],
291-
botPrompt: 'normal'
292-
})
293-
...
294-
} catch (error) {
295-
...
296-
}
297-
```
298-
299-
3. Get user profile:
300-
301-
```typescript
302-
try {
303-
...
304-
const profile = await Line.getProfile()
305-
...
306-
} catch (error) {
307-
...
308-
}
309-
```
310-
311-
3. Logout
312-
313-
```typescript
314-
try {
315-
...
316-
await Line.logout()
317-
...
318-
} catch (error) {
319-
...
320-
}
321-
```
322-
32394
## Example
32495
325-
If you want to see `@xmartlabs/react-native-line` in action, just move into the [example](/example) folder and run `yarn ios`/`yarn android`. By seeing its source code, you will have a better understanding of the library usage.
96+
If you want to see `@xmartlabs/react-native-line` in action, just move into the [example](/example) folder and run `npm install` and then `npm run ios`/`npm run android`. By seeing its source code, you will have a better understanding of the library usage.
32697
32798
## Contributors
32899

0 commit comments

Comments
 (0)