or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

animation.md core-components.md index.md native-bridge.md platform-apis.md react-hooks.md styling.md user-interaction.md

tile.json

tessl/npm-react-native

A framework for building native apps using React

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/react-native@1000.0.x

To install, run

npx @tessl/cli install tessl/npm-react-native@1000.0.0

React Native

React Native is a framework for building native mobile applications using React and JavaScript/TypeScript. It enables developers to write code once and deploy to both iOS and Android platforms while maintaining native performance and platform-specific functionality.

Package Information

Package Name: react-native
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install react-native

Core Imports

// ESM (recommended)
import { View, Text, StyleSheet, AppRegistry } from 'react-native';

CommonJS:

const { View, Text, StyleSheet, AppRegistry } = require('react-native');

Basic Usage

import React from 'react';
import { View, Text, StyleSheet, AppRegistry } from 'react-native';

function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

// Register the main application component
AppRegistry.registerComponent('MyApp', () => App);

AppRegistry

// ESM
import {AppRegistry} from 'react-native';

// CommonJS  
const {AppRegistry} = require('react-native');

// Register the main application component
AppRegistry.registerComponent('MyApp', () => App);

// Run the application (typically called automatically)
AppRegistry.runApplication('MyApp', {
  rootTag: document.getElementById('react-native-root')
});

interface AppRegistry {
  registerComponent(appKey: string, componentProvider: () => React.ComponentType): void;
  registerRunnable(appKey: string, run: () => void): void;
  registerSection(appKey: string, component: () => React.ComponentType): void;
  getApplication(appKey: string, appParameters?: any): {element: React.ReactElement, getStyleElement: () => React.ReactElement};
  runApplication(appKey: string, appParameters: any): void;
  unmountApplicationComponentAtRootTag(rootTag: number): void;
  registerHeadlessTask(taskKey: string, taskProvider: () => any): void;
  startHeadlessTask(taskId: number, taskKey: string, data: any): void;
}

Quick API Overview

Core Components

Build your UI with these fundamental components:

// Layout containers
import {View, SafeAreaView, ScrollView} from 'react-native';

// Text display
import {Text} from 'react-native';

// Images
import {Image, ImageBackground} from 'react-native';

// User input
import {TextInput, Button, Switch} from 'react-native';

// Touchables
import {TouchableOpacity, TouchableHighlight, Pressable} from 'react-native';

// Lists  
import {FlatList, SectionList} from 'react-native';

// Feedback
import {ActivityIndicator, RefreshControl} from 'react-native';

// Navigation
import {Modal, StatusBar} from 'react-native';

Platform APIs

Access platform-specific functionality:

// Device info
import {Platform, Dimensions, PixelRatio} from 'react-native';

// System state
import {AppState, BackHandler, Keyboard} from 'react-native';

// External integration
import {Linking, Share} from 'react-native';

// Native modules
import {NativeModules, NativeEventEmitter} from 'react-native';

Styling System

Style your components with flexible styling APIs:

// Core styling
import {StyleSheet} from 'react-native';

// Color utilities
import {processColor, PlatformColor, DynamicColorIOS} from 'react-native';

// Appearance
import {Appearance, useColorScheme} from 'react-native';

Animation System

Create smooth animations and interactions:

// Animation APIs
import {Animated, Easing, LayoutAnimation} from 'react-native';

// Gesture handling
import {PanResponder} from 'react-native';

// Performance utilities
import {InteractionManager} from 'react-native';

User Interaction

Handle user interactions and system dialogs:

// System dialogs
import {Alert, Share} from 'react-native';

// Device feedback
import {Vibration} from 'react-native';

// Platform-specific
import {ActionSheetIOS, ToastAndroid} from 'react-native';

React Hooks

React Native provides custom hooks for common use cases:

// Responsive design
import {useWindowDimensions, useColorScheme} from 'react-native';

function MyComponent() {
  const {width, height} = useWindowDimensions();
  const colorScheme = useColorScheme();
  
  return (
    <View style={{
      width,
      backgroundColor: colorScheme === 'dark' ? 'black' : 'white'
    }}>
      <Text>Responsive component</Text>
    </View>
  );
}

Architecture Overview

React Native apps consist of:

JavaScript Layer - Your React components and business logic
Bridge - Communication layer between JavaScript and native code
Native Layer - Platform-specific native modules and UI components

// Access native modules
import {NativeModules} from 'react-native';

// Create custom native event emitters  
import {NativeEventEmitter} from 'react-native';

// Access TurboModules (new architecture)
import {TurboModuleRegistry} from 'react-native';

// Low-level UI management
import {UIManager, findNodeHandle} from 'react-native';

Platform Differences

React Native provides platform-specific APIs and components:

// Check current platform
import {Platform} from 'react-native';

if (Platform.OS === 'ios') {
  // iOS-specific code
} else if (Platform.OS === 'android') {
  // Android-specific code
}

// Platform-specific components
import {ActionSheetIOS} from 'react-native'; // iOS only
import {ToastAndroid, BackHandler} from 'react-native'; // Android only

Comprehensive Documentation

For detailed API references and usage examples, see the specialized documentation:

Core Components - View, Text, ScrollView, Image, TextInput, Lists, Touchables, and more
Platform APIs - Platform detection, device info, app state, keyboard, linking, and system integration
Styling System - StyleSheet, colors, appearance, and theming
Animation & Interaction - Animated API, Easing, LayoutAnimation, PanResponder, and interaction management
User Interaction - Alerts, sharing, vibration, haptics, and platform-specific UI
Native Bridge - NativeModules, TurboModules, event emitters, and native integration
React Hooks - useColorScheme, useWindowDimensions, and responsive utilities

Type Definitions

// Core types for React Native development
interface ReactNativeCore {
  // Component types
  ComponentType<P = {}> = React.ComponentType<P>;
  ReactElement = React.ReactElement;
  
  // Style types
  ViewStyle: object;
  TextStyle: object;
  ImageStyle: object;
  
  // Event types
  NativeSyntheticEvent<T>: {
    nativeEvent: T;
    currentTarget: number;
    target: number;
  };
  
  // Layout types
  LayoutEvent: NativeSyntheticEvent<{
    layout: {x: number; y: number; width: number; height: number};
  }>;
}

// Platform information
interface PlatformStatic {
  OS: 'ios' | 'android' | 'windows' | 'macos' | 'web';
  Version: string | number;
  isPad?: boolean;
  isTesting?: boolean;
  select<T>(specifics: {ios?: T; android?: T; default?: T}): T;
}

// Dimensions
interface ScaledSize {
  width: number;
  height: number;
  scale: number;
  fontScale: number;
}

interface DimensionsStatic {
  get(dim: 'window' | 'screen'): ScaledSize;
  addEventListener(type: 'change', handler: (dims: {window: ScaledSize; screen: ScaledSize}) => void): void;
  removeEventListener(type: 'change', handler: Function): void;
}

React Native provides a comprehensive set of APIs for building cross-platform mobile applications with native performance and platform-specific experiences.