CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tarojs--taro-rn

React Native implementation layer for the Taro cross-platform framework, providing React Native-specific APIs and utilities.

Pending
Overview
Eval results
Files

device-system.mddocs/

Device & System APIs

Device information, system capabilities, clipboard operations, vibration, phone calls, and authorization management for Taro React Native applications.

Capabilities

System Information

Access comprehensive device and system information.

/**
 * Get system information asynchronously
 * @param options System info options
 */
function getSystemInfo(options?: {
  success?: (res: SystemInfo) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<SystemInfo>;

/**
 * Get system information synchronously
 * @returns System information
 */
function getSystemInfoSync(): SystemInfo;

interface SystemInfo {
  brand: string;
  model: string;
  system: string;
  platform: string;
  version: string;
  SDKVersion: string;
  pixelRatio: number;
  screenWidth: number;
  screenHeight: number;
  windowWidth: number;
  windowHeight: number;
  statusBarHeight: number;
  safeArea: {
    left: number;
    right: number;
    top: number;
    bottom: number;
    width: number;
    height: number;
  };
  language: string;
  fontSizeSetting: number;
}

Usage Examples:

import { getSystemInfo, getSystemInfoSync } from "@tarojs/taro-rn";

// Get system info asynchronously
const systemInfo = await getSystemInfo();
console.log('Device brand:', systemInfo.brand);
console.log('Screen dimensions:', systemInfo.screenWidth, 'x', systemInfo.screenHeight);
console.log('Safe area:', systemInfo.safeArea);

// Get system info synchronously
const syncSystemInfo = getSystemInfoSync();
console.log('Platform:', syncSystemInfo.platform);

// Adapt UI based on device info
if (syncSystemInfo.screenWidth < 400) {
  console.log('Small screen detected, use compact layout');
}

App Information

Get basic application information.

/**
 * Get app base information
 * @param options App info options
 */
function getAppBaseInfo(options?: {
  success?: (res: {
    SDKVersion: string;
    enableDebug: boolean;
    host: any;
    language: string;
    version: string;
    theme: string;
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  SDKVersion: string;
  enableDebug: boolean;
  host: any;
  language: string;
  version: string;
  theme: string;
}>;

Vibration

Control device vibration for haptic feedback.

/**
 * Trigger a long vibration (400ms)
 * @param options Long vibration options
 */
function vibrateLong(options?: {
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

/**
 * Trigger a short vibration (15ms)
 * @param options Short vibration options
 */
function vibrateShort(options?: {
  type?: 'heavy' | 'medium' | 'light';
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

Usage Examples:

import { vibrateLong, vibrateShort } from "@tarojs/taro-rn";

// Long vibration for notifications
await vibrateLong();

// Short vibration for button taps
await vibrateShort({ type: 'light' });

// Medium vibration for feedback
await vibrateShort({ type: 'medium' });

Clipboard Operations

Manage clipboard data for copy/paste functionality.

/**
 * Set data to clipboard
 * @param options Clipboard set options
 */
function setClipboardData(options: {
  data: string;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

/**
 * Get data from clipboard
 * @param options Clipboard get options
 */
function getClipboardData(options?: {
  success?: (res: { data: string }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{ data: string }>;

Usage Examples:

import { setClipboardData, getClipboardData } from "@tarojs/taro-rn";

// Copy text to clipboard
await setClipboardData({ 
  data: 'Hello, this text is now in clipboard!' 
});

// Get text from clipboard
const clipboardResult = await getClipboardData();
console.log('Clipboard content:', clipboardResult.data);

// Copy complex data (as JSON string)
const userData = { id: 123, name: 'John Doe' };
await setClipboardData({ 
  data: JSON.stringify(userData) 
});

Phone Call

Initiate phone calls from the application.

/**
 * Make a phone call
 * @param options Phone call options
 */
function makePhoneCall(options: {
  phoneNumber: string;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

Usage Examples:

import { makePhoneCall } from "@tarojs/taro-rn";

// Make a phone call
await makePhoneCall({ 
  phoneNumber: '+1234567890' 
});

// Handle call with error handling
try {
  await makePhoneCall({ phoneNumber: '911' });
} catch (error) {
  console.error('Failed to make call:', error);
}

QR Code Scanning

Scan QR codes and barcodes using the device camera.

/**
 * Scan QR code or barcode
 * @param options Scan code options
 */
function scanCode(options?: {
  onlyFromCamera?: boolean;
  scanType?: ('barCode' | 'qrCode' | 'datamatrix' | 'pdf417')[];
  success?: (res: {
    result: string;
    scanType: string;
    charSet: string;
    path: string;
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  result: string;
  scanType: string;
  charSet: string;
  path: string;
}>;

Usage Examples:

import { scanCode } from "@tarojs/taro-rn";

// Scan QR code
const scanResult = await scanCode({
  onlyFromCamera: true,
  scanType: ['qrCode']
});

console.log('Scanned result:', scanResult.result);
console.log('Scan type:', scanResult.scanType);

// Scan multiple types
const multiScanResult = await scanCode({
  scanType: ['qrCode', 'barCode', 'datamatrix']
});

Settings & Authorization

Manage app settings and request permissions.

/**
 * Open system settings page
 * @param options Open settings options
 */
function openSetting(options?: {
  success?: (res: {
    authSetting: Record<string, boolean>;
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  authSetting: Record<string, boolean>;
}>;

/**
 * Get current app authorization settings
 * @param options Get settings options
 */
function getSetting(options?: {
  success?: (res: {
    authSetting: Record<string, boolean>;
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  authSetting: Record<string, boolean>;
}>;

/**
 * Request user authorization
 * @param options Authorization options
 */
function authorize(options: {
  scope: string;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

Usage Examples:

import { getSetting, openSetting, authorize } from "@tarojs/taro-rn";

// Check current settings
const settings = await getSetting();
console.log('Auth settings:', settings.authSetting);

// Request camera permission
try {
  await authorize({ scope: 'scope.camera' });
  console.log('Camera permission granted');
} catch (error) {
  console.log('Camera permission denied');
  
  // Open settings page for user to manually enable
  await openSetting();
}

// Check specific permissions
const currentSettings = await getSetting();
if (currentSettings.authSetting['scope.camera']) {
  console.log('Camera permission is granted');
} else {
  console.log('Camera permission is not granted');
}

Environment & Capability Detection

Check environment and API availability.

/**
 * Get current environment type
 * @returns Environment type
 */
function getEnv(): 'WEB' | 'RN' | 'WEAPP' | 'SWAN' | 'ALIPAY' | 'TT' | 'QQ' | 'JD';

/**
 * Check if an API is available in current environment
 * @param schema API schema to check
 * @returns Whether the API is available
 */
function canIUse(schema: string): boolean;

Usage Examples:

import { getEnv, canIUse } from "@tarojs/taro-rn";

// Check current environment
const env = getEnv();
console.log('Current environment:', env);

// Adapt behavior based on environment
if (env === 'RN') {
  console.log('Running in React Native');
} else if (env === 'WEB') {
  console.log('Running in browser');
}

// Check API availability
if (canIUse('getLocation')) {
  console.log('Location API is available');
} else {
  console.log('Location API is not available');
}

// Check specific API features
if (canIUse('showToast.image')) {
  console.log('Toast with custom image is supported');
}

User Profile

Get user profile information (platform-specific).

/**
 * Get user profile information
 * @param options User profile options
 */
function getUserProfile(options: {
  desc: string;
  lang?: 'en' | 'zh_CN' | 'zh_TW';
  success?: (res: {
    userInfo: {
      nickName: string;
      avatarUrl: string;
      gender: 0 | 1 | 2;
      country: string;
      province: string;
      city: string;
      language: string;
    };
    rawData: string;
    signature: string;
    encryptedData: string;
    iv: string;
  }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{
  userInfo: {
    nickName: string;
    avatarUrl: string;
    gender: 0 | 1 | 2;
    country: string;
    province: string;
    city: string;
    language: string;
  };
  rawData: string;
  signature: string;
  encryptedData: string;
  iv: string;
}>;

Install with Tessl CLI

npx tessl i tessl/npm-tarojs--taro-rn

docs

device-system.md

file-system.md

hooks.md

index.md

location-sensors.md

media.md

navigation.md

network.md

storage.md

ui-apis.md

tile.json