Forem: Alex

Control a Farming Drone with C++ — Play It in Your Browser (Cropbot)

Alex — Tue, 03 Mar 2026 09:53:10 +0000

What if a farming game didn’t let you click anything?

What if the only way to control the world… was to write C++?

I built exactly that.

A browser-based game where you control a farming drone entirely through C++ code — compiled to WebAssembly and executed live in the game.

👉 Play it here:

https://cropbot.fly.dev/

No install.

No setup.

Just open and start coding.

You Don’t Play. You Program.

The world is a grid.

Each cell can be:

Empty
Tilled
Planted
Growing
Ready to harvest
Base station

The drone can:

Move across the grid
Till soil
Plant different crops
Water them
Harvest them
Buy seeds
Manage energy and water
Earn gold
Increase score

But here’s the key difference:

You never click to move.

You never press a harvest button.

You write the logic — and the drone executes it.

It Quickly Stops Being “Farming”

At first, it feels simple:

If a cell is empty — plant.

If it’s ready — harvest.

But then systems start stacking:

Water tank capacity
Energy limits
Seeds cost gold
Crops grow over time
Grid traversal must be efficient
Score depends on smart decisions

Suddenly, it’s not a farming game.

It’s an optimization problem.

It’s About Designing Behavior

You don’t react.

You design.

You write loops.
You define conditions.
You structure traversal.
You manage resources.

If your logic is inefficient:

You waste ticks
You waste energy
You miss harvest windows
Your score drops

The game becomes about algorithm design.

Why C++?

Most programming games use Python.

I deliberately chose C++.

Because C++ forces clarity:

Strong typing
Explicit control flow
Deterministic execution
Clear system boundaries

It feels less like scripting.

More like engineering a machine.

And your drone is that machine.

Under the Hood

Your C++ code is compiled to WebAssembly
A restricted drone API is injected
The simulation runs in a sandbox
Grid size is provided dynamically
Only safe functions are exposed

Your code becomes the AI brain.

The game becomes the environment.

Clean separation.

Deterministic simulation.

Pure logic.

Where This Can Go

This is just the first version.

But the concept has serious room to grow:

Competitive bot leaderboards
Optimization tournaments
Different maps with obstacles
Energy-constrained challenges
Multi-drone simulations
Profit-maximizing strategies
Time-based scoring competitions

It could evolve into a full C++ automation strategy game.

Or even a competitive AI arena in the browser.

Try It

If you enjoy:

Automation
Systems thinking
Algorithm design
Programming-driven gameplay

Building the Fastest Base64 Library for React Native - Introducing react-native-turbo-base64

Alex — Mon, 09 Feb 2026 09:28:49 +0000

If you work with images, camera frames, blobs or crypto in React Native, you are probably using Base64 more than you think.

I discovered this the hard way while profiling a production React Native app. Base64 encoding and decoding kept showing up in hot paths and consuming noticeable CPU time. At first it felt surprising. Then it became obvious - Base64 sits right in the middle of many media and binary workflows.

That is when I decided to dig deeper.

After analyzing existing solutions, especially react-native-quick-base64, I realized there was still a lot of performance left on the table. Most apps do not feel it immediately, but when Base64 operations happen frequently or on large buffers, the cost becomes real.

So I built a new library from scratch focused purely on performance.

Meet react-native-turbo-base64 🚀

Why another Base64 library

This was not about rewriting something that already works. The goal was simple - push performance as far as possible for React Native workloads.

The library is implemented in C++ and exposed through JSI, which means:

No bridge overhead
No async hops between JS and native
Direct work with ArrayBuffers
Much less copying and allocation

In other words, the data stays where it should be and moves as little as possible.

What makes it fast

The implementation focuses on low level optimizations that matter in real mobile workloads:

Zero unnecessary memory copies
Cache-friendly lookup tables
Tight loops optimized for modern CPUs
Designed specifically for Hermes and React Native
Works directly with binary buffers instead of strings whenever possible

These changes may sound small individually, but together they create a big difference.

Benchmark results

Across multiple tests, react-native-turbo-base64 consistently achieved multiple times faster encoding and decoding compared to react-native-quick-base64.

This becomes especially noticeable when working with:

Camera frames
Image processing
Large files and uploads
Crypto and hashing pipelines
Heavy ArrayBuffer usage

Even small improvements in hot paths can translate into real battery and performance gains on mobile devices.

Drop-in replacement

If you are already using react-native-quick-base64, migrating should be straightforward. The API was designed to be familiar so you can switch with minimal effort.

Open source and feedback welcome

This project was born from real profiling and real bottlenecks. I would love feedback from developers who are pushing React Native performance or working with heavy media pipelines.

Repository: react-native-turbo-base64

If Base64 ever showed up in your profiler, this library is for you 🙂

I built a 500x faster ULID generator for React Native (JSI + C++)

Alex — Fri, 30 Jan 2026 09:29:07 +0000

If you build React Native apps long enough, you eventually hit a point where “small” things start showing up in performance profiles.

For me, one of those things was ID generation.

Chat messages, offline queues, analytics events, local DB rows, sync logs - you generate IDs everywhere. And once you start generating IDs a lot (sometimes thousands in one run), a pure JavaScript solution becomes surprisingly expensive.

So I built react-native-ulid-jsi: an ultra-fast ULID generator for React Native implemented in C++ via JSI, with monotonic ordering, thread-local state, and platform-native secure randomness.

Result: ~500x faster than a popular JS ULID implementation in my benchmark.

Why ULID (and not UUID)

ULID stands for Universally Unique Lexicographically Sortable Identifier.

A ULID is a 26-character string like:

01ARZ3NDEKTSV4RRFFQ69G5FAV

It’s composed of:

48-bit timestamp (milliseconds since epoch)
80-bit randomness

That gives you two huge benefits:

Lexicographic sort order by creation time (great for DB indexes)
Strong uniqueness without coordination

In practice, ULIDs are excellent for:

database primary keys (B-tree friendly)
event sourcing
logging and telemetry
distributed systems
file names / resource IDs

UUIDs are fine for uniqueness, but they don’t preserve time ordering and usually fragment indexes harder.

The React Native problem: JavaScript ID generation is not “free”

Even if a JS ULID library is well-written, in React Native it still has typical JS costs:

allocations and GC pressure
repeated encoding work (Base32)
randomness generation overhead
runtime overhead in hot loops
lots of “tiny” work that becomes big at scale

And in mobile apps, you often care about:

battery
smoothness on mid-tier devices
cold start / background tasks
performance under load

I wanted an ID generator that behaves like a native primitive:
fast, predictable, and cheap.

The solution: ULID in C++ via JSI (zero bridge overhead)

react-native-ulid-jsi is implemented in C++ and exposed to JavaScript via JSI.

That means:

no React Native Bridge serialization
no JSON conversion
direct function call from JS into native

It supports both:

New Architecture (Fabric + TurboModules)
Old Architecture

Same API. Same performance benefits.

Benchmark: 1000 ULIDs in 0.17ms (iPhone 16 Pro)

I compared it against the official ulid/javascript package.

Implementation	Time (1000 iterations)	Relative
react-native-ulid-jsi (JSI/C++)	0.17ms	~500x faster
JavaScript (ulid package)	83.62ms	baseline

Benchmark notes:

device: iPhone 16 Pro
build: production
loop: 1000 ULID generations

Why it’s fast

The speed comes from several practical choices:

1) Zero bridge overhead

JSI binding means the call is direct, not marshaled through the RN Bridge.

2) Native secure randomness

The random portion uses platform-native secure RNG:

iOS: SecRandomCopyBytes
Android: getrandom when available, otherwise /dev/urandom
last resort: std::random_device on other platforms

3) Hand-optimized Base32 encoding

ULID uses Crockford’s Base32 (excluding ambiguous chars like I, L, O, U).

The encoding is implemented in C++ with tight control over memory and branching.

4) Monotonic generation with thread-local state

If you generate multiple ULIDs within the same millisecond, “pure random” ULIDs are not guaranteed to be sorted.

This library ensures monotonic ordering by keeping per-thread state:

same ms - increment randomness
time changed - generate fresh random bytes
overflow - regenerate safely

5) Minimal allocations

Stack buffers. No heap churn. No dependency overhead.

Monotonic ULID: why it matters in real apps

If you generate IDs quickly (chat typing, bulk inserts, offline queue replay), you want ordering to reflect creation order.

Without monotonic behavior:

// Pure random: not guaranteed to be > lexicographically
id1: 01HGW4Z6C8ABCDEFGHIJKLMNOP
id2: 01HGW4Z6C8ZYXWVUTSRQPONMLK  // could be "smaller" later

With monotonic ULID (this library):

id1: 01HGW4Z6C8ABCDEFGHIJKLMNOP
id2: 01HGW4Z6C8ABCDEFGHIJKLMNPQ  // guaranteed > id1
id3: 01HGW4Z6C8ABCDEFGHIJKLMNPR  // guaranteed > id2

Why you care:
• smoother DB inserts and index locality
• stable ordering when timestamps match
• better behavior in event streams and sync logs

Install:

yarn add react-native-ulid-jsi
cd ios && pod install

Generate:

import { ulid } from "react-native-ulid-jsi";

const id = ulid();

Technical details (for people who care)
• C++ implementation + JSI bindings
• secure randomness with platform fallbacks
• Crockford’s Base32 encoding
• supports iOS 12+ and Android API 21+
• works on New + Old RN architecture
• zero JavaScript dependency footprint

When you should use it
This library is especially useful when:
• you generate lots of IDs in a session
• you insert frequently into SQLite/Postgres indexes
• you want time-sortable IDs without storing separate timestamps
• you have offline-first queues / event logs
• you care about performance and battery

Links
• GitHub: https://github.com/pioner92/react-native-ulid-jsi
• npm: https://www.npmjs.com/package/react-native-ulid-jsi

⚡️ Superfast, Cross-Platform String Hashing in React Native with react-native-xxhash

Alex — Thu, 17 Apr 2025 12:15:09 +0000

“How can I hash strings super fast, on both Android and iOS?”

If you're building a React Native app and have ever asked this question, this post is for you.

🧹 The Problem

React Native has incredible potential for cross-platform development — but performance bottlenecks lurk beneath the surface, especially when dealing with string transformations or hashing large payloads.

Need a fast, deterministic hash function to:

Create stable cache keys?
Compare large strings quickly?
Identify duplicates or generate lightweight identifiers?

JavaScript isn't ideal here: hashing in JS can be slow, and worse, it runs on the main thread. That can seriously impact performance in complex apps.

🚀 Meet `react-native-xxhash`

react-native-xxhash is a lightweight JSI-based React Native library that uses xxHash: a lightning-fast, non-cryptographic hashing algorithm written in C++.

With zero bridge overhead and native execution, it delivers:

🔥 Blazing-fast hashing
🔄 Deterministic output
📏 64-bit and 128-bit hash support
📱 iOS and Android compatibility
⚖️ JSI bindings for zero-copy, zero-bridge calls

📦 Installation

npm install react-native-xxhash
# or
yarn add react-native-xxhash

Then install pods on iOS:

cd ios && pod install

✨ Usage Example

import { hash64, hash128 } from 'react-native-xxhash';

const hashA = hash64('hello world');
const hashB = hash128('hello world');

console.log('64-bit hash:', hashA);
console.log('128-bit hash:', hashB);

In a Component

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';
import { hash64, hash128 } from 'react-native-xxhash';

export default function App() {
  useEffect(() => {
    const str = "react-native";
    console.log("64-bit:", hash64(str));
    console.log("128-bit:", hash128(str));
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Check your console for hash results!</Text>
    </View>
  );
}

📚 API Reference

`hash64(input: string): string`

Returns a 64-bit xxHash of the input string.

`hash128(input: string): string`

Returns a 128-bit xxHash of the input string.

🚀 Under the Hood

This library:

Uses the official C++ implementation of xxHash
Leverages JSI for direct bindings (no bridge involved)
Runs entirely in native code
Avoids serialization overhead

📂 Use Cases

This library is ideal when you need:

Deterministic keys for cache or storage
Fast string comparisons
Low-collision hash identifiers
A non-cryptographic, high-speed hash

🙌 Final Thoughts

If you're building high-performance React Native apps and need lightweight hashing, react-native-xxhash can be a perfect fit.

Check it out here: https://github.com/pioner92/react-native-xxhash

PRs, feedback, and ideas are always welcome!

Thanks for reading ✨

🚀 Access .env variables in React Native with native speed — Introducing react-native-config-jsi

Alex — Tue, 15 Apr 2025 10:45:57 +0000

Environment variables are a staple in every project. Whether it's your API key, app name, or feature flags — you've probably used .env files with react-native-config or similar solutions.

But here’s the catch: those tools are mostly bridge-based, rely on runtime JSON, and aren’t exactly the fastest — especially for performance-sensitive apps.

That’s why I built react-native-config-jsi — a lightweight, ultra-fast JSI-based library that lets you access .env variables natively, via C++.

⚡ Why this matters

✅ Synchronous access to .env variables at runtime (no async/Promise)
⚙️ Backed by C++ and integrated via React Native JSI
🧠 Minimal overhead — no bridges, no JSON, no wrappers
🧩 Works like react-native-config but faster and cleaner

📦 Install

npm install react-native-config-jsi

🔧 Setup

Create your .env file:

API_KEY=your_api_key
APP_NAME=MyAwesomeApp

For iOS:
Run pod install inside the ios/ directory
Add a Run Script Phase in Xcode Build Phases:

bash "${SRCROOT}/../node_modules/react-native-config-jsi/src/scripts/generate.sh"

This step ensures that your .env gets compiled into a native source file during build time.

🚀 Usage

import { RNConfig } from "react-native-config-jsi";

const apiKey = RNConfig.get("API_KEY");
console.log("API_KEY:", apiKey);

⚠️ After changing .env, make sure to rebuild or restart the app to apply changes.

🧩 Behind the scenes

This library uses a small C++ layer to parse the .env file at build time and expose the key-value pairs via a JSI binding. That means:

No bridge involved
No runtime parsing
Instant reads from C++ memory

🛠 Use cases

Reading API keys or environment-specific configs at startup
Feature toggles via env vars
Optimizing config reads in performance-sensitive screens

🔗 Links

GitHub: pioner92/react-native-config-jsi
NPM: react-native-config-jsi

This is especially useful for those who already use JSI-based tooling or want the cleanest possible access to .env variables without touching the bridge.

Try it out and let me know what you think — happy to answer questions and improve it based on real-world feedback!

🧠

🚀 Introducing react-native-sync-tasks: Native JSI-Powered HTTP Polling Off the JS Thread

Alex — Mon, 14 Apr 2025 20:51:10 +0000

Have you ever needed to periodically fetch data from a remote API in your React Native app? Maybe you're building a chat client that polls for new messages, or a dashboard that refreshes frequently with updated metrics?

Most developers reach for this kind of code:

useEffect(() => {
  const interval = setInterval(async () => {
    const response = await fetch("https://your-api.com/status");
    const data = await response.json();
    // do something
  }, 1000);

  return () => clearInterval(interval);
}, []);

This works... until it doesn’t:

Multiple polling tasks run in parallel and get messy ☠️
You start hitting performance issues and blocking the JS thread 🚨
Managing lifecycles and cleanup becomes tedious 🧠
You process the same data repeatedly, wasting CPU cycles 📉

That’s why I built react-native-sync-tasks — a blazing-fast, native JSI-based polling library for React Native, written in C++ and Rust, with a clean and intuitive JS API. It runs outside of the JS thread, leveraging native threads for maximum performance.

🧠 Why use SyncTasksManager?

✅ Executes periodic polling in native threads, not in JS timers
✅ Callback only fires when the response has changed (using response hash)
✅ Centralized task management with start/stop control
✅ Keeps your JS thread free and UI smooth
✅ Zero runtime dependencies — fully native via JSI

✨ Features

🔁 Periodic HTTP polling with configurable interval
📡 onData callback when data is received (only if changed)
❌ onError callback for failed requests
🧵 Native execution via C++/Rust threads (JSI)
🧠 Smart deduplication (response body hash)
✅ Centralized control over all polling tasks

🚀 Quick Example

import { createTask, SyncTasksManager } from 'react-native-sync-tasks';

const task = createTask({
  config: {
    url: 'https://jsonplaceholder.typicode.com/posts/1',
    interval: 2000,
  },
  onData: (data) => console.log('DATA:', data),
  onError: (err) => console.error('ERROR:', err),
});

SyncTasksManager.addTask(task);
SyncTasksManager.startAll();

📦 Installation

npm install react-native-sync-tasks

Don’t forget to run pod install on iOS.

⚙️ Under the Hood

This library is built entirely with native performance in mind:

🦀 Rust handles the HTTP logic and hashing
⚙️ C++ bridges with JSI in React Native
🚫 No timers or polling in JS — it’s all native

⚠️ Not a true background task

This library does not continue polling when the app is in background or terminated. It is meant for offloading polling work to native threads while the app is active.

🔍 Use cases

🔄 Real-time metrics dashboards
💬 Chat apps polling for new messages
📲 Device status updates
🔔 Periodic checks to backend APIs

🔗 Links

GitHub: pioner92/react-native-sync-tasks
NPM: react-native-sync-tasks

If you’re building something that needs smooth, high-frequency API polling without hurting performance — give it a try!

Feedback and contributions are welcome 🙌

🚀 Save Any React Native View to Gallery Using RN Skia + JSI (react-native-img-buffer-save)

Alex — Thu, 10 Apr 2025 14:30:13 +0000

Capture any React Native view using react-native-skia, convert it into an image, and save it directly to the device's gallery using a high-performance JSI-native library.

Saving images directly from rendered views into the device's gallery used to require multiple bridges, performance compromises, or complex native code. Not anymore.

In this article, we’ll show you how to capture any view content in React Native, convert it to an image using react-native-skia, and save it directly to the device's gallery using a blazing-fast native JSI module.

Introducing: react-native-img-buffer-save

🧩 The Problem

You're building a feature where the user sees a custom visual element — maybe a QR code, a certificate, a card, a chart — and you want them to be able to save it as an image into their gallery.

In a typical React Native setup, this means:

Capturing a view visually.
Converting it to image bytes.
Passing it through the JS bridge to native code to save it.

This process is often clunky, slow, and complex.

What if you could do it all — capture any React Native View and save it instantly to the gallery — in just a few lines of code?

⚡ The Solution: `react-native-img-buffer-save`

This library, built using JSI (JavaScript Interface), allows you to save raw image buffers (like Uint8Array or ArrayBuffer) directly to the device's gallery — with zero bridge overhead.

Paired with React Native Skia, you can snapshot any view or canvas, encode it as a PNG or JPEG, and push it straight to the gallery. Fast and native.

📦 Installation

Yarn

yarn add react-native-img-buffer-save

NPM

npm install react-native-img-buffer-save

iOS Only

cd ios && pod install

👨‍💻 Example: Capture Any View and Save It

Let’s say you have any visual content in a view that you want to turn into an image and save:

<View ref={refView}>
  {/* Your custom QR code, styled view, or anything else */}
</View>

Using react-native-skia, you can render the view and extract its image bytes:

const snapshot = await makeImageFromView(refView);
const bytes = snapshot?.encodeToBytes(ImageFormat.PNG, 100);

if (bytes?.buffer) {
  try {
    saveImageToGallery(bytes.buffer);
  } catch (err) {
    console.error('Failed to save image:', err);
  }
}

✅ This works for any rendered content — QR codes, charts, posters, styled UI blocks — as long as you can capture it with react-native-skia.

🧠 Under the Hood

Written in C++ with JSI for maximum performance.
No JS bridge overhead.
Accepts both Uint8Array and ArrayBuffer.
Works on both Android and iOS.

🧪 Full Usage Example

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { saveImageToGallery } from 'react-native-img-buffer-save';

export default function App() {
  const saveImg = () => {
    const imageBytes = Uint8Array.from([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]) // Replace with real image
    saveImageToGallery(imageBytes);
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={saveImg}>
        <Text>Save IMG to gallery</Text>
      </TouchableOpacity>
    </View>
  );
}

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

🛠️ Contribute or Report Issues

The library is open-source. Star it ⭐, use it, and feel free to contribute!

GitHub: https://github.com/pioner92/react-native-img-buffer-save

Made with ❤️ and create-react-native-library

🧵 Improve UX in React Native with Native Fade Gradients

Alex — Thu, 10 Apr 2025 10:58:23 +0000

Smooth fade gradients at the edges of your content can make a huge difference in how users perceive scrolling interfaces. They hint at overflow, suggest direction, and provide a more polished look. But implementing them natively in React Native can be tricky...

That’s why I built rn-fade-wrapper—a lightweight, high-performance library for adding native gradient fades to any scrollable or overflowing content. It works with both old and new architectures (Fabric), and supports iOS, Android, and Expo out of the box.

✨ Features

✅ Native rendering via CAGradientLayer (iOS) and Canvas (Android)
↕ Supports vertical and horizontal fades
🌟 Fully customizable: color, size, per-edge control
↔ Inward fading option (towards content)
⚖ Drop-in wrapper component with simple API
🚀 Fabric-ready with TypeScript types

⚡ Quick Example

import { FadeWrapper } from 'rn-fade-wrapper';

<FadeWrapper
  color="#000"
  size={24}
  orientation="vertical"
>
  <ScrollView>
    <Text>Some long content...</Text>
  </ScrollView>
</FadeWrapper>

📦 Installation

yarn add rn-fade-wrapper
# or
npm install rn-fade-wrapper

Works with Expo too:

npx expo install rn-fade-wrapper

🔧 Use Cases

ScrollViews, FlatLists, and SectionLists
Carousels or horizontal sliders
Modals with long content
Any container with potential overflow

🌐 Under the Hood

iOS: uses CAGradientLayer inside a custom UIView, overlaid on the target content.
Android: draws a LinearGradient via Canvas on a custom ViewGroup.
Efficient onLayout and re-render management to minimize overhead.

🎉 Bonus: Customization Power

<FadeWrapper
  color="rgba(0,0,0,0.5)"
  sizes={{ top: 16, bottom: 24 }}
  inward
>
  <FlatList ... />
</FadeWrapper>

Want horizontal fading? Just set orientation="horizontal" or define left / right in sizes.

📅 Why It Matters

Polished visual feedback can increase perceived performance and user satisfaction. Native gradients feel smooth and fluid, especially in content-heavy UIs. rn-fade-wrapper helps you build delightful UI with minimal effort.

📚 Learn More

GitHub: pioner92/react-native-auto-skeleton
NPM: rn-fade-wrapper
Expo support

If you like this, give it a ⭐ on GitHub or try it out in your next UI!

Happy fading ✨

🔥 React Native Auto Skeleton – Lightweight Skeleton Loader for React Native

Alex — Thu, 10 Apr 2025 09:23:07 +0000

Effortless Skeleton Loading in React Native: Introducing react-native-auto-skeleton

Skeleton loaders are essential for improving perceived performance and user experience, especially in mobile apps where data fetching can take time. But let’s face it — configuring them manually in React Native is tedious. Defining skeleton views for every block, ensuring consistent styles, adding shimmer... it all takes time.

What if your UI could generate its own skeletons automatically?

That’s exactly what react-native-auto-skeleton does — automatically builds skeleton placeholders based on your existing layout, with zero configuration, full Fabric support, and clean animation out of the box.

🚀 Why This Library Stands Out

Here’s what makes react-native-auto-skeleton unique:

No boilerplate setup — wrap your UI with AutoSkeletonView and you're done.
Supports both old and new architectures (Fabric-ready).
Expo-compatible — works with expo prebuild.
Three animation modes: gradient shimmer, pulse, or no animation.
Smart defaults for radius, layout, and background.

Unlike other libraries that require verbose configurations for each skeleton block, this one reads your view structure and applies skeletons intelligently.

🛠 How to Use

Installation:

yarn add react-native-auto-skeleton
# or
npm install react-native-auto-skeleton

Basic usage:

import { AutoSkeletonView, AutoSkeletonIgnoreView } from 'react-native-auto-skeleton';

<AutoSkeletonView isLoading={isLoading}>
  <Text style={styles.title}>Loading user profile...</Text>
  <AutoSkeletonIgnoreView>
    <Text>This section won’t get a skeleton</Text>
  </AutoSkeletonIgnoreView>
</AutoSkeletonView>

You can customize:

Shimmer speed
Gradient colors
Default border radius
Animation type (pulse, gradient, or none)

📱 Fabric-Ready and Future-Proof

The library is written with the new architecture in mind. Whether you’re migrating to Fabric or building greenfield, it fits right in. It also supports old architecture, so you can adopt it incrementally.

🆚 How It Compares

Feature	react-native-auto-skeleton	react-native-skeleton-placeholder
Auto layout parsing	✅ Yes	❌ No
Fabric support	✅ Yes	❌ No
Works with Expo	✅ Yes	⚠️ Partial
Manual block setup required	❌ No	✅ Yes
Built-in shimmer and pulse animation	✅ Yes	✅ Yes

📦 Explore More

📦 NPM package
💻 GitHub Repository
📱 Expo support

If you're building React Native apps in 2024, it’s time to stop writing skeletons manually. Try react-native-auto-skeleton, and enjoy fast, beautiful, and automatic loading states.

✨ Star the project on GitHub if it helps you — it means a lot!

Created and maintained by @pioner92 — feel free to contribute or ask questions!

Forem: Alex

Control a Farming Drone with C++ — Play It in Your Browser (Cropbot)

You Don’t Play. You Program.

It Quickly Stops Being “Farming”

It’s About Designing Behavior

Why C++?

Under the Hood

Where This Can Go

Try It

Building the Fastest Base64 Library for React Native - Introducing react-native-turbo-base64

I built a 500x faster ULID generator for React Native (JSI + C++)

Why ULID (and not UUID)

The React Native problem: JavaScript ID generation is not “free”

The solution: ULID in C++ via JSI (zero bridge overhead)

Benchmark: 1000 ULIDs in 0.17ms (iPhone 16 Pro)

Why it’s fast

1) Zero bridge overhead

2) Native secure randomness

3) Hand-optimized Base32 encoding

4) Monotonic generation with thread-local state

5) Minimal allocations

Monotonic ULID: why it matters in real apps

⚡️ Superfast, Cross-Platform String Hashing in React Native with react-native-xxhash

🧹 The Problem

🚀 Meet react-native-xxhash

📦 Installation

✨ Usage Example

In a Component

📚 API Reference

hash64(input: string): string

hash128(input: string): string

🚀 Under the Hood

📂 Use Cases

🙌 Final Thoughts

🚀 Access .env variables in React Native with native speed — Introducing react-native-config-jsi

⚡ Why this matters

📦 Install

🔧 Setup

🚀 Usage

🧩 Behind the scenes

🛠 Use cases

🔗 Links

🚀 Introducing react-native-sync-tasks: Native JSI-Powered HTTP Polling Off the JS Thread

🧠 Why use SyncTasksManager?

✨ Features

🚀 Quick Example

📦 Installation

⚙️ Under the Hood

⚠️ Not a true background task

🔍 Use cases

🔗 Links

🚀 Save Any React Native View to Gallery Using RN Skia + JSI (react-native-img-buffer-save)

Capture any React Native view using react-native-skia, convert it into an image, and save it directly to the device's gallery using a high-performance JSI-native library.

🧩 The Problem

⚡ The Solution: react-native-img-buffer-save

📦 Installation

Yarn

NPM

iOS Only

👨‍💻 Example: Capture Any View and Save It

🧠 Under the Hood

🧪 Full Usage Example

🛠️ Contribute or Report Issues

🧵 Improve UX in React Native with Native Fade Gradients

✨ Features

⚡ Quick Example

📦 Installation

🔧 Use Cases

🌐 Under the Hood

🎉 Bonus: Customization Power

📅 Why It Matters

📚 Learn More

🔥 React Native Auto Skeleton – Lightweight Skeleton Loader for React Native

Effortless Skeleton Loading in React Native: Introducing react-native-auto-skeleton

🚀 Why This Library Stands Out

🛠 How to Use

📱 Fabric-Ready and Future-Proof

🆚 How It Compares

📦 Explore More

🚀 Meet `react-native-xxhash`

`hash64(input: string): string`

`hash128(input: string): string`

⚡ The Solution: `react-native-img-buffer-save`