or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

device-system.mdfile-system.mdhooks.mdindex.mdlocation-sensors.mdmedia.mdnavigation.mdnetwork.mdstorage.mdui-apis.md
tile.json

tessl/npm-tarojs--taro-rn

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tarojs/taro-rn@4.1.x

To install, run

npx @tessl/cli install tessl/npm-tarojs--taro-rn@4.1.0

index.mddocs/

@tarojs/taro-rn

@tarojs/taro-rn is the React Native implementation layer for the Taro cross-platform framework, providing React Native-specific APIs and utilities that enable Taro applications to run on React Native platforms. It exposes a comprehensive set of APIs including navigation, UI controls, device capabilities, network functionality, and platform-specific utilities for cross-platform mobile development.

Package Information

  • Package Name: @tarojs/taro-rn
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tarojs/taro-rn

Core Imports

import Taro from "@tarojs/taro-rn";

For named imports:

import { 
  navigateTo, 
  showToast, 
  request, 
  getSystemInfo,
  getStorage,
  useDidShow 
} from "@tarojs/taro-rn";

CommonJS:

const Taro = require("@tarojs/taro-rn");
const { navigateTo, showToast, request } = require("@tarojs/taro-rn");

Basic Usage

import Taro from "@tarojs/taro-rn";

// Navigation
await Taro.navigateTo({ url: '/pages/detail/index' });

// Show UI feedback
await Taro.showToast({ 
  title: 'Success!', 
  icon: 'success' 
});

// Make network request
const response = await Taro.request({
  url: 'https://api.example.com/data',
  method: 'GET'
});

// Get device information
const systemInfo = await Taro.getSystemInfo();

// Storage operations
await Taro.setStorage({ key: 'user', data: { id: 1, name: 'John' } });
const userData = await Taro.getStorage({ key: 'user' });

Architecture

@tarojs/taro-rn is built around several key architectural components:

  • API Layer: Re-exports core navigation and lifecycle APIs from @tarojs/runtime-rn
  • Library Layer: React Native-specific implementations for device, network, storage, and media APIs
  • Callback Pattern: Standardized callback-based API with success, fail, and complete handlers
  • Promise Support: All APIs return Promises for modern async/await usage
  • React Hooks: Lifecycle and state management hooks for React components
  • Type Safety: Full TypeScript support with comprehensive type definitions

Capabilities

Navigation & Routing

Core navigation functionality for page routing, tab management, and navigation bar control in Taro React Native applications.

function navigateTo(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
function navigateBack(options?: { delta?: number }): Promise<TaroGeneral.CallbackResult>;
function redirectTo(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
function reLaunch(options: { url: string }): Promise<TaroGeneral.CallbackResult>;
function switchTab(options: { url: string }): Promise<TaroGeneral.CallbackResult>;

Navigation & Routing

User Interface APIs

Comprehensive UI control APIs for displaying toasts, modals, action sheets, and managing screen properties.

function showToast(options: {
  title: string;
  icon?: 'success' | 'error' | 'loading' | 'none';
  image?: string;
  duration?: number;
}): Promise<TaroGeneral.CallbackResult>;

function showModal(options: {
  title?: string;
  content?: string;
  showCancel?: boolean;
  cancelText?: string;
  confirmText?: string;
}): Promise<{ confirm: boolean; cancel: boolean }>;

User Interface APIs

Storage APIs

Local storage management with both synchronous and asynchronous operations for persistent data storage.

function getStorage(options: { key: string }): Promise<{ data: any }>;
function setStorage(options: { key: string; data: any }): Promise<TaroGeneral.CallbackResult>;
function getStorageSync(key: string): any;
function setStorageSync(key: string, data: any): void;

Storage APIs

Network APIs

HTTP request functionality and WebSocket connection management for network communication.

function request<T = any>(options: {
  url: string;
  data?: any;
  header?: Record<string, string>;
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'HEAD' | 'OPTIONS';
  dataType?: 'json' | 'text';
  responseType?: 'text' | 'arraybuffer';
}): Taro.RequestTask<T>;

Network APIs

Device & System APIs

Device information, system capabilities, and platform-specific functionality access.

function getSystemInfo(): Promise<{
  brand: string;
  model: string;
  system: string;
  platform: string;
  screenWidth: number;
  screenHeight: number;
  windowWidth: number;
  windowHeight: number;
}>;

Device & System APIs

Media APIs

Image, video, and audio management including camera access, media selection, and file operations.

function chooseImage(options?: {
  count?: number;
  sizeType?: ('original' | 'compressed')[];
  sourceType?: ('album' | 'camera')[];
}): Promise<{ tempFilePaths: string[]; tempFiles: any[] }>;

Media APIs

Location & Sensor APIs

Geolocation services and device sensor access including accelerometer, gyroscope, and device motion.

function getLocation(options?: {
  type?: 'wgs84' | 'gcj02';
  altitude?: boolean;
}): Promise<{
  latitude: number;
  longitude: number;
  speed: number;
  accuracy: number;
}>;

Location & Sensor APIs

File System APIs

File management operations for reading, writing, and managing local files.

function getFileSystemManager(): FileSystemManager;

interface FileSystemManager {
  readFile(options: { filePath: string; encoding?: string }): Promise<{ data: string | ArrayBuffer }>;
  writeFile(options: { filePath: string; data: string | ArrayBuffer; encoding?: string }): Promise<TaroGeneral.CallbackResult>;
}

File System APIs

React Hooks

Lifecycle and state management hooks for React components in Taro applications.

function useDidShow(callback: () => void): void;
function useDidHide(callback: () => void): void;
function useLaunch(callback: (options: any) => void): void;
function useRouter(): { params: Record<string, string>; path: string };

React Hooks

Types

namespace TaroGeneral {
  interface CallbackResult {
    errMsg: string;
  }
}

interface RequestTask<T> extends Promise<T> {
  abort(): void;
}