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

User Interface APIs

Name: tessl/npm-tarojs--taro-rn
Author: tessl

Comprehensive UI control APIs for displaying toasts, modals, action sheets, and managing screen properties in Taro React Native applications.

Capabilities

Toast Messages

Display temporary toast messages with different styles and durations.

/**
 * Show a toast message
 * @param options Toast configuration options
 */
function showToast(options: {
  title: string;
  icon?: 'success' | 'error' | 'loading' | 'none';
  image?: string;
  duration?: number;
  mask?: boolean;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

/**
 * Hide the currently shown toast
 * @param options Hide toast options
 */
function hideToast(options?: {
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): void;

Usage Examples:

import { showToast, hideToast } from "@tarojs/taro-rn";

// Show success toast
await showToast({
  title: 'Success!',
  icon: 'success',
  duration: 2000
});

// Show custom image toast
await showToast({
  title: 'Custom Toast',
  image: '/images/custom-icon.png',
  duration: 3000
});

// Hide toast manually
hideToast();

Loading Indicators

Display loading indicators for asynchronous operations.

/**
 * Show a loading indicator
 * @param options Loading configuration options
 */
function showLoading(options?: {
  title?: string;
  mask?: boolean;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

/**
 * Hide the loading indicator
 * @param options Hide loading options
 */
function hideLoading(options?: {
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): void;

Modal Dialogs

Display modal dialogs with customizable content and actions.

/**
 * Show a modal dialog
 * @param options Modal configuration options
 */
function showModal(options: {
  title?: string;
  content?: string;
  showCancel?: boolean;
  cancelText?: string;
  cancelColor?: string;
  confirmText?: string;
  confirmColor?: string;
  success?: (res: { confirm: boolean; cancel: boolean }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{ confirm: boolean; cancel: boolean }>;

Usage Examples:

import { showModal, showLoading, hideLoading } from "@tarojs/taro-rn";

// Show loading
await showLoading({ title: 'Loading...' });

// Simulate async operation
setTimeout(() => {
  hideLoading();
}, 2000);

// Show confirmation modal
const result = await showModal({
  title: 'Confirm Action',
  content: 'Are you sure you want to delete this item?',
  showCancel: true,
  cancelText: 'Cancel',
  confirmText: 'Delete'
});

if (result.confirm) {
  console.log('User confirmed');
}

Action Sheets

Display action sheets for presenting multiple options to users.

/**
 * Show an action sheet
 * @param options Action sheet configuration options
 */
function showActionSheet(options: {
  itemList: string[];
  itemColor?: string;
  success?: (res: { tapIndex: number }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{ tapIndex: number }>;

Usage Examples:

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

// Show action sheet with options
const result = await showActionSheet({
  itemList: ['Option 1', 'Option 2', 'Option 3'],
  itemColor: '#007AFF'
});

console.log('Selected option index:', result.tapIndex);

Screen Properties

Control screen brightness and keep-awake functionality.

/**
 * Set screen brightness
 * @param options Brightness options
 */
function setScreenBrightness(options: {
  value: number; // 0-1
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

/**
 * Get current screen brightness
 * @param options Get brightness options
 */
function getScreenBrightness(options?: {
  success?: (res: { value: number }) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: any) => void;
}): Promise<{ value: number }>;

/**
 * Keep screen on or allow it to turn off
 * @param options Keep screen on options
 */
function setKeepScreenOn(options: {
  keepScreenOn: boolean;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

Image Preview

Display full-screen image preview with zoom and swipe functionality.

/**
 * Preview images in full screen
 * @param options Image preview options
 */
function previewImage(options: {
  urls: string[];
  current?: string;
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

Usage Examples:

import { 
  setScreenBrightness, 
  setKeepScreenOn, 
  previewImage 
} from "@tarojs/taro-rn";

// Set screen brightness to 50%
await setScreenBrightness({ value: 0.5 });

// Keep screen on
await setKeepScreenOn({ keepScreenOn: true });

// Preview images
await previewImage({
  urls: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg'
  ],
  current: 'https://example.com/image1.jpg'
});

Keyboard Management

Control keyboard visibility and handle keyboard height changes.

/**
 * Hide the keyboard
 * @param options Hide keyboard options
 */
function hideKeyboard(options?: {
  success?: (res: TaroGeneral.CallbackResult) => void;
  fail?: (res: TaroGeneral.CallbackResult) => void;
  complete?: (res: TaroGeneral.CallbackResult) => void;
}): Promise<TaroGeneral.CallbackResult>;

/**
 * Listen to keyboard height changes
 * @param callback Callback function when keyboard height changes
 */
function onKeyboardHeightChange(callback: (res: { height: number }) => void): void;

/**
 * Stop listening to keyboard height changes
 * @param callback Optional callback to remove specific listener
 */
function offKeyboardHeightChange(callback?: (res: { height: number }) => void): void;

DOM Query

Create selector queries for DOM element information.

/**
 * Create a selector query instance
 * @returns SelectorQuery instance
 */
function createSelectorQuery(): SelectorQuery;

interface SelectorQuery {
  select(selector: string): NodesRef;
  selectAll(selector: string): NodesRef;
  selectViewport(): NodesRef;
  exec(callback?: (res: any[]) => void): Promise<any[]>;
}

interface NodesRef {
  boundingClientRect(callback?: (res: any) => void): SelectorQuery;
  scrollOffset(callback?: (res: any) => void): SelectorQuery;
  fields(fields: {
    id?: boolean;
    dataset?: boolean;
    rect?: boolean;
    size?: boolean;
    scrollOffset?: boolean;
    properties?: string[];
  }, callback?: (res: any) => void): SelectorQuery;
}

Usage Examples:

import { createSelectorQuery, hideKeyboard } from "@tarojs/taro-rn";

// Hide keyboard
await hideKeyboard();

// Query DOM elements
const query = createSelectorQuery();
const result = await query
  .select('#my-element')
  .boundingClientRect()
  .exec();

console.log('Element bounds:', result[0]);

Install with Tessl CLI