https://github.com/crherman7/rechunk
🚀 OTA React Native Components & Functions
https://github.com/crherman7/rechunk
bundler code-splitting expo ota react-native remote-component server-driven-ui typescript
Last synced: 4 months ago
JSON representation
🚀 OTA React Native Components & Functions
- Host: GitHub
- URL: https://github.com/crherman7/rechunk
- Owner: crherman7
- License: mit
- Created: 2024-03-12T18:35:34.000Z (almost 2 years ago)
- Default Branch: develop
- Last Pushed: 2025-04-08T21:28:59.000Z (11 months ago)
- Last Synced: 2025-04-09T14:52:04.894Z (11 months ago)
- Topics: bundler, code-splitting, expo, ota, react-native, remote-component, server-driven-ui, typescript
- Language: TypeScript
- Homepage: https://rechunk.xyz
- Size: 6.26 MB
- Stars: 17
- Watchers: 3
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
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.
## 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
```bash
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
```bash
# 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](https://rechunk.xyz), you can run:
```bash
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
```tsx
// 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 (
{title}
{description}
);
}
const styles = StyleSheet.create({
// ... styles remain the same
});
```
### 3. Configure Your Project
```javascript
// 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
```tsx
// 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 (
}>
console.log('Pressed!')}
/>
);
}
```
### 5. Publish Your Component
```bash
# Start development server
npx rechunk dev-server
# Or publish to production
npx rechunk publish
```
## Usage Guide
### Development Workflow
1. **Start Development Server**
```bash
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**
```bash
# Development
export RECHUNK_ENVIRONMENT=dev
# Production
export RECHUNK_ENVIRONMENT=prod
# Offline testing
export RECHUNK_ENVIRONMENT=offline
```
### Production Deployment
1. **Publish Components**
```bash
npx rechunk publish
```
2. **Manage Deployments**
```bash
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](https://rechunk.xyz/docs/) to begin using ReChunk in your project.
## Community
Join our growing community! We're excited to help and hear your feedback:
- 💬 Join our [Discord](https://discord.gg/xFhuxjwhss) for real-time discussions
- ⭐ Star us on [GitHub](https://github.com/crherman7/rechunk) to show your support
## Upcoming Features
We’re actively working on improvements to make ReChunk even more powerful. Here's what’s coming soon:
### 🔖 Version-Based Manifest
- Enable selective loading of components based on app version.
- Support backward compatibility across deployments.
- Manifest schema will define available components, versions, signatures, and dependencies.
### 🏷️ Component Tagging & Versioning
- Tag and version individual components (e.g. `v1.2.0`, `beta`, `experimental`).
- Use tags to manage releases, rollbacks, and A/B testing.
- CLI support for tagging:
```bash
npx rechunk publish --tag beta
```
### 📚 Exhaustive Documentation
- Expanded guides and advanced use cases
- Custom environments, CDN hosting, and authentication strategies
- End-to-end examples for enterprise workflows
> Stay tuned — we’re building this in the open. Join [Discord](https://discord.gg/xFhuxjwhss) for updates.
## Contributing
Please read our [Contributing Guide](./CONTRIBUTING.md) 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](./CODE_OF_CONDUCT.md) for guidelines on community interaction.
## License
ReChunk is licensed under the [MIT License](./LICENSE.md).