Skip to content
self.md

■ SKILLS // SKILL SPECS

jutsu-react-native

Validation and quality enforcement for React Native mobile applications with components, navigation, styling, and native modules.

Author The Bushido Collective Published Updated Read 8 min
■ [!] ON THIS PAGE ▼
■ INSTALL // npx @self.md/cli install jutsu-react-native
AuthorThe Bushido Collective
Namespace@TheBushidoCollective/han
Category#general
Version1.0.0
Stars★ 66
Downloads↓ 3
Verification[ ✓ ] self.md verified
View Source ↗

Validation and quality enforcement for React Native mobile applications with components, navigation, styling, and native modules.

Installation

npx claude-plugins install @TheBushidoCollective/han/jutsu-react-native

Contents

Folders: skills

Files: CHANGELOG.md, README.md

Documentation

Validation and quality enforcement for React Native mobile applications.

What This Jutsu Provides

Skills

This jutsu provides the following skills:

  • react-native-components: Building UI components with core components (View, Text, Image, FlatList) and component composition patterns
  • react-native-navigation: Implementing navigation with React Navigation including stack, tab, drawer navigation, and deep linking
  • react-native-styling: Styling components with StyleSheet, Flexbox layout, responsive design, and theming
  • react-native-platform: Handling platform-specific code for iOS and Android with Platform API and native modules
  • react-native-performance: Optimizing app performance with FlatList optimization, memoization, and bundle size reduction
  • react-native-native-modules: Building and integrating native modules, Turbo Modules, and bridging native code

Installation

Install with npx (no installation required):

han plugin install jutsu-react-native

Requirements

  • React Native 0.70 or higher
  • TypeScript 4.5 or higher
  • Node.js 16 or higher

Why React Native?

React Native enables building native mobile apps using React and JavaScript/TypeScript:

  • Cross-Platform: Write once, run on iOS and Android
  • Native Performance: Uses native components and APIs
  • Hot Reload: See changes instantly without rebuilding
  • Large Ecosystem: Thousands of packages and community support
  • Shared Codebase: Share code with React web applications
  • Native Modules: Extend with platform-specific functionality

Features Covered by Skills

Core Components

  • View, Text, Image, ScrollView
  • FlatList and SectionList for performance
  • TextInput, Button, Pressable
  • Modal, SafeAreaView
  • Platform-specific components
  • Stack navigation with type safety
  • Tab navigation with icons
  • Drawer navigation
  • Nested navigators
  • Deep linking configuration
  • Authentication flows

Styling

  • StyleSheet API for optimized styles
  • Flexbox layout system
  • Responsive design with Dimensions
  • Platform-specific styling
  • Design tokens and theming
  • Dark mode support

Platform APIs

  • Platform detection (iOS/Android)
  • Platform-specific files (.ios.tsx, .android.tsx)
  • Permissions handling
  • Back button (Android)
  • Status bar configuration
  • Linking to native apps

Performance Optimization

  • FlatList virtualization
  • React.memo and useMemo
  • Image optimization
  • Bundle size reduction
  • Code splitting
  • Debouncing and throttling
  • Animation optimization

Native Modules

  • Creating native modules (Swift/Kotlin)
  • Turbo Modules for better performance
  • Native events
  • Custom native UI components
  • Biometric authentication
  • Camera and device APIs

Quick Start Examples

Simple App

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <Text style={styles.title}>Hello React Native!</Text>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
  },
});

List with Navigation

import React from 'react';
import { FlatList, TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

interface Item {
  id: string;
  title: string;
}

function ListScreen({ items }: { items: Item[] }) {
  const navigation = useNavigation();

  return (
    <FlatList
      data={items}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <TouchableOpacity
          onPress={() => navigation.navigate('Details', { itemId: item.id })}
        >
          <Text>{item.title}</Text>
        </TouchableOpacity>
      )}
    />
  );
}

Platform-Specific Code

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.3,
        shadowRadius: 4,
      },
      android: {
        elevation: 4,
      },
    }),
  },
});

Common Libraries

This jutsu works well with popular React Native libraries:

  • React Navigation: Navigation library (covered in skills)
  • React Native Reanimated: Smooth animations
  • React Native Gesture Handler: Touch gesture system
  • Expo: Managed workflow and additional APIs
  • Redux/MobX/Zustand: State management
  • React Query: Data fetching and caching
  • Fast Image: Optimized image loading

Project Structure

Recommended structure for React Native apps:

my-app/
├── src/
│   ├── components/       # Reusable components
│   ├

...(truncated)

## Included Skills

This plugin includes 5 skill definitions:

### react-native-components

> Use when building React Native UI components with core components, custom components, and component patterns. Covers View, Text, Image, ScrollView, FlatList, and component composition.

<details>
<summary>View skill definition</summary>

# React Native Components

Use this skill when building user interfaces with React Native's core components and creating custom reusable components.

## Key Concepts

### Core Components

React Native provides platform-agnostic components that map to native views:

```tsx
import React from 'react';
import {
  View,
  Text,
  Image,
  ScrollView,
  TextInput,
  TouchableOpacity,
  SafeAreaView,
} from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ScrollView>
        <View>
          <Text>Hello, React Native!</Text>
          <Image
            source={{ uri: 'https://example.com/image.jpg' }}
            style={{ width: 200, height: 200 }}
          />
          <TextInput
            placeholder="Enter text"
            style={{ borderWidth: 1, padding: 10 }}
          />
          <TouchableOpacity onPress={() => console.log('Pressed')}>
            <Text>Press Me</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

View Component

The fundamental building block:

import { View } from 'react-native';

function Container({ children }: { children: React.ReactNode }) {
  return (
    <View style={{
      flex: 1,
      padding: 16,
      backgroundColor: '#fff',
    }}>
      {children}
    </View>
  );
}

Text Component

All text must be wrapped in <Text>:

import { Text } from 'react-native';

function Heading({ children }: { children: s

...(truncated)

</details>

### react-native-native-modules

> Use when building or integrating native modules in React Native. Covers creating native modules, Turbo Modules, bridging native code, and accessing platform-specific APIs.

<details>
<summary>View skill definition</summary>

# React Native Native Modules

Use this skill when creating custom native modules, integrating third-party native libraries, or accessing platform-specific functionality not available through JavaScript.

## Key Concepts

### Native Modules Overview

Native modules bridge JavaScript and native code:

JavaScript Layer ↕ (Bridge) Native Layer (iOS/Android)


### Turbo Modules (Modern Approach)

Turbo Modules provide better performance with type safety:

```tsx
// NativeMyModule.ts
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getString(value: string): Promise<string>;
  getNumber(value: number): number;
  getBoolean(value: boolean): boolean;
  getArray(value: Array<any>): Array<any>;
  getObject(value: Object): Object;
}

export default TurboModuleRegistry.getEnforcing<Spec>('MyModule');

Calling Native Code from JS

import { NativeModules } from 'react-native';

const { MyModule } = NativeModules;

// Call native method
async function callNativeMethod() {
  try {
    const result = await MyModule.getString('Hello from JS');
    console.log(result);
  } catch (error) {
    console.error('Native module error:', error);
  }
}

Best Practices

iOS Native Module (Swift)

Create a native module in Swift:

// MyModule.swift
import Foundation

@objc(MyModule)
class MyModule: NSObject {

  @objc
  func getString(_ value: String,
         

...(truncated)

</details>

### react-native-navigation

> Use when implementing navigation in React Native apps with React Navigation. Covers stack, tab, drawer navigation, deep linking, and navigation patterns.

<details>
<summary>View skill definition</summary>

# React Native Navigation

Use this skill when implementing navigation in React Native applications using React Navigation (the de facto standard navigation library).

## Key Concepts

### Installation

```bash
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

# For stack navigation
npm install @react-navigation/native-stack

# For tab navigation
npm install @react-navigation/bottom-tabs

# For drawer navigation
npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated

Basic Setup

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Stack Navigation

The most common navigation pattern:

import React from 'react';
import { View, Text, Button } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: string; title: string };
};


...(truncated)

</details>

### react-native-performance

> Use when optimizing React Native app performance. Covers FlatList optimization, memoization, image optimization, bundle size reduction, and profiling techniques.

<details>
<summary>View skill definition</summary>

# React Native Performance

Use this skill when optimizing React Native applications for better performance, faster load times, and smoother user experiences.

## Key Concepts

### List Performance

Optimize FlatList for large datasets:

```tsx
import React, { useCallback } from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

interface Item {
  id: string;
  title: string;
}

const ItemComponent = React.memo(({ item }: { item: Item }) => (
  <View style={styles.item}>
    <Text>{item.title}</Text>
  </View>
));

function OptimizedList({ data }: { data: Item[] }) {
  const renderItem = useCallback(
    ({ item }: { item: Item }) => <ItemComponent item={item} />,
    []
  );

  const keyExtractor = useCallback((item: Item) => item.id, []);

  const getItemLayout = useCallback(
    (data: any, index: number) => ({
      length: 80, // Fixed item height
      offset: 80 * index,
      index,
    }),
    []
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      getItemLayout={getItemLayout}
      // Performance optimizations
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={50}
      initialNumToRender={10}
      windowSize={5}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    height: 80,
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});

Component Memoization

Use React.memo and useMemo:

react-native-platform

Use when handling platform-specific code in React Native for iOS and Android. Covers Platform API, platform-specific components, native modules, and cross-platform best practices.

View skill definition

React Native Platform APIs

Use this skill when writing platform-specific code for iOS and Android, handling platform differences, and accessing native functionality.

Key Concepts

Platform Detection

Detect the current platform:

import { Platform } from 'react-native';

// Simple check
if (Platform.OS === 'ios') {
  console.log('Running on iOS');
} else if (Platform.OS === 'android') {
  console.log('Running on Android');
}

// Platform.select
const styles = StyleSheet.create({
  container: {
    ...Platform.select({
      ios: {
        paddingTop: 20,
      },
      android: {
        paddingTop: 0,
      },
    }),
  },
});

// Get platform version
console.log(`Android API Level: ${Platform.Version}`); // Android
console.log(`iOS Version: ${Platform.Version}`); // iOS

Platform-Specific Files

Create platform-specific files:

components/
  Button.ios.tsx      # iOS implementation
  Button.android.tsx  # Android implementation
  Button.tsx          # Shared/default implementation

// Button.ios.tsx
import React from 'react';
import { View, Text } from 'react-native';

export default function Button({ title, onPress }: ButtonProps) {
  return (
    <View style={{ /* iOS-specific styles */ }}>
      <Text>{title}</Text>
    </View>
  );
}

// Button.android.tsx
import React from 'react';
import { View, Text } from 'react-native';

export default function Button({ title, onPress }: ButtonProps) {
  return (
    <View style={{ /* Androi

...(truncated)

</details>

## Source

[View on GitHub](https://github.com/TheBushidoCollective/han)
[!] SKILL TAGS //
#general #react-native#mobile#ios#android#native