Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/rnheroes/tiktok-opensdk-react-native

Unofficial TikTok OpenSDK features Share Kit which allow your users to share content from your app to TikTok.
https://github.com/rnheroes/tiktok-opensdk-react-native

react-native tiktok tiktok-sdk

Last synced: 3 months ago
JSON representation

Unofficial TikTok OpenSDK features Share Kit which allow your users to share content from your app to TikTok.

Awesome Lists containing this project

README

        

# TikTok OpenSDK React Native

This package provides a React Native wrapper for the TikTok OpenSDK, allowing you to integrate TikTok sharing functionality into your React Native applications.

## Installation

```bash
npm install tiktok-opensdk-react-native
# or
yarn add tiktok-opensdk-react-native
````

## Usage

```javascript
import TikTokOpenSDK from 'tiktok-opensdk-react-native';

// ...

try {
const result = await TikTokOpenSDK.share(
['path/to/media1', 'path/to/media2'],
false, // isImage (true for images, false for videos)
false // isGreenScreen
);

if (result.isSuccess) {
console.log('Share successful!');
} else {
console.error('Share failed:', result.errorMsg);
}
} catch (error) {
console.error('Error sharing to TikTok:', error);
}
```

# API

## `TikTokOpenSDK.share(mediaPaths: string[], isImage: boolean, isGreenScreen: boolean): Promise`

Shares media to TikTok.

### Parameters

- `mediaPaths: string[]` - Array of local media file paths to share
- `isImage: boolean` - Set to `true` for images, `false` for videos
- `isGreenScreen: boolean` - Set to `true` to use green screen effect (TikTok app only)

Returns a Promise that resolves to a `ShareResult` object.

```typescript
type ShareResult = ShareSuccessResult | ShareErrorResult;

interface ShareSuccessResult {
isSuccess: true;
}

interface ShareErrorResult {
isSuccess: false;
errorCode: number;
subErrorCode?: number;
shareState?: number;
errorMsg: string;
}
```

# iOS Setup

Minimum iOS version: 12.0
Minimum Xcode version: 10.0

1. Link the package to your project by running `npx pod-install` or `cd ios && pod install`.
2. Add the TikTok OpenSDK client key to your `Info.plist` file:

```xml
LSApplicationQueriesSchemes

tiktokopensdk
tiktoksharesdk
snssdk1180
snssdk1233

TikTokClientKey
$TikTokClientKey
CFBundleURLTypes


CFBundleURLSchemes

$TikTokClientKey

```

3. Add NSPhotoLibraryUsageDescription to your `Info.plist` file:

```xml
NSPhotoLibraryAddUsageDescription
$(PRODUCT_NAME) would like to save photos to your photo library
NSPhotoLibraryUsageDescription
$(PRODUCT_NAME) would like to access your photo library
```

4. Update your AppDelegate.m

```objc
#import

@implementation AppDelegate

// ... other methods ...

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options
{
BOOL handled = NO;

if ([TiktokOpensdkReactNative handleOpenURL:url]) {
handled = YES;
}

// Handle other custom URL schemes

return handled;
}

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity restorationHandler:(nonnull void (^)(NSArray> * _Nullable))restorationHandler
{
BOOL handled = NO;

if ([TiktokOpensdkReactNative handleUserActivity:userActivity]) {
handled = YES;
}

// Handle other user activities

return handled;
}

@end
```

# Android Setup

Minimum Android version: API level 21 (Android 5.0 Lollipop) or later

1. Add the TikTok SDK repository to your project-level build.gradle:

```gradle
allprojects {
repositories {
maven { url "https://artifact.bytedance.com/repository/AwemeOpenSDK" }
}
}
```

2. Add the TikTok SDK dependencies to your app-level build.gradle

```gradle
dependencies {
implementation 'com.tiktok.open.sdk:tiktok-open-sdk-core:2.3.0'
implementation 'com.tiktok.open.sdk:tiktok-open-sdk-share:2.3.0' // for share API
}
```

3. For Android 11 and higher, add the following to your AndroidManifest.xml:

```xml


```

4. Add client key to your strings.xml file:

```xml
$TikTokClientKey
```

5. Add metadata to your AndroidManifest.xml file:

```xml

```

6. Add this provider to your AndroidManifest.xml:
```xml

```

7. Create a filepaths.xml file in your res/xml folder:

```xml

```

# Troubleshooting

If you encounter any issues, please check the TikTok OpenSDK documentation for more detailed setup instructions and troubleshooting tips.

# License

MIT

# Roadmap

- [ ] Refactor API to use a single `share` method with an options object
- [ ] Add support for login and authorization APIs
- [ ] Send shareShate for error handling in iOS
- [ ] Add support redirectUri for both platforms
- [ ] Add custom client key for both platforms
- [ ] Refactor API, pass client key, redirectUri, and callerScheme as last parameters
- [ ] Add support remote media URLs
- [ ] Handle photo library permissions in native side
- [ ] Refactor whole android part
- [ ] Check if tiktok app is installed
- [ ] Remove isImage parameter and detect media type automatically