ReChunk is a lightweight React Native library that enables secure over-the-air updates and dynamic component loading, allowing you to update your app's UI without app store submissions.

Website  •  Documentation  •  Discord Community

Why ReChunk?

• 📱 Bypass App Store Updates: Deploy UI changes without waiting for app store approval
• 🔄 Instant Updates: Push changes to all users simultaneously
• 🛠 Developer Friendly: Simple API with TypeScript support
• 🏃 Performance First: Minimal bundle size impact and optimized loading

Installation

npm install @rechunk/core
npm install -D @rechunk/cli @rechunk/babel-plugin @rechunk/metro-config

# or

yarn add @rechunk/core
yarn add -D @rechunk/cli @rechunk/babel-plugin @rechunk/metro-config

Quick Example

1. Initialize Project

# Create a new ReChunk project with a custom host
npx rechunk init -h https://your-rechunk-host.com -u username -p password

If you'd like to use the hosted ReChunk service at rechunk.xyz, you can run:

npx rechunk init --host https://rechunk.xyz/api/v1 --username admin --password password123

Note: This project is currently in beta. As we continue to improve the platform, certain aspects, such as authentication mechanisms (e.g., basic auth), may change in the future. Stay tuned for updates in our documentation and changelogs.

2. Create a ReChunk Component

// components/FeatureCard.tsx
'use rechunk';

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

interface FeatureCardProps {
  title: string;
  description: string;
  onPress?: () => void;
}

export default function FeatureCard({
  title = 'New Feature',
  description = 'Try out our latest update!',
  onPress,
}: FeatureCardProps) {
  const [pressed, setPressed] = useState(false);

  const handlePress = () => {
    setPressed(true);
    onPress?.();
  };

  return (
    <TouchableOpacity
      style={[styles.container, pressed && styles.pressed]}
      onPress={handlePress}>
      <View style={styles.content}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.description}>{description}</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  // ... styles remain the same
});

3. Configure Your Project

// babel.config.js
const {withReactNativeBabelPresetOptions} = require('@rechunk/babel-plugin');

module.exports = {
  presets: [
    [
      'module:metro-react-native-babel-preset',
      api => withReactNativeBabelPresetOptions(api),
    ],
  ],
  plugins: ['@rechunk/babel-plugin'],
};

// metro.config.js
const {cacheVersion} = require('@rechunk/metro-config');

module.exports = {
  cacheVersion,
  // ... other Metro configuration
};

4. Use the Component

// App.tsx
import React, {Suspense} from 'react';
import {View, ActivityIndicator} from 'react-native';
import ReChunk from '@rechunk/core';

import FeatureCard from './FeatureCard';

export default function App() {
  return (
    <Suspense fallback={<ActivityIndicator />}>
      <FeatureCard
        title="Welcome!"
        description="This component was loaded dynamically!"
        onPress={() => console.log('Pressed!')}
      />
    </Suspense>
  );
}

5. Publish Your Component

# Start development server
npx rechunk dev-server

# Or publish to production
npx rechunk publish

Usage Guide

Development Workflow

1. Start Development Server

npx rechunk dev-server

2. Mark Components for Remote Loading Add the "use rechunk" directive to any component you want to load remotely.

3. Configure Environment

# Development
export RECHUNK_ENVIRONMENT=dev

# Production
export RECHUNK_ENVIRONMENT=prod

# Offline testing
export RECHUNK_ENVIRONMENT=offline

Production Deployment

1. Publish Components

npx rechunk publish

2. Manage Deployments

npx rechunk manage

Features

• 🚀 Over-The-Air Updates: Deploy React Native components instantly without app store submissions. Push UI changes directly to your users in real-time.
• ⚡️ Zero-Config Hosting: Host your components anywhere - from S3 to your own servers. Zero vendor lock-in, maximum flexibility.
• 🔒 Built-in Security: Industry-standard digital signatures verify every component. Keep your dynamic updates secure and your users protected.

Getting Started

Visit our Quick Start Guide to begin using ReChunk in your project.

Community

Join our growing community! We're excited to help and hear your feedback:

• 💬 Join our Discord for real-time discussions
• ⭐ Star us on GitHub to show your support

Contributing

Please read our Contributing Guide and help us build ReChunk together. For questions or feedback, feel free to open an issue.

Code of Conduct

Please review our Code of Conduct for guidelines on community interaction.

License

ReChunk is licensed under the MIT License.