react-native-next-image

Advanced, high-performance image loading for React Native.

Built for speed. Optimized for the New Architecture. Powered by Coil 3 (Android) and SDWebImage (iOS).

---

⚠️ 🚧 Status: Alpha Development

Caution

This package is NOT yet production-ready. react-native-next-image is currently in an active Development and Testing phase. We are rapidly iterating on the API, resolving native crashes, and fixing significant bugs.

Our Recommendation: Do not use this package in production environments until we reach version 1.0.0. Use it for experimentation and testing only.

---

✨ Key Features (Under Development)

• 🏎️ Dynamic Pre-fetching: Background image loading based on proximity to the viewport (Customizable threshold).
• ⚡ Modern Native Engines:
  • Android: Powered by the latest Coil 3 (Kotlin First, Coroutine based).
  • iOS: Powered by SDWebImage (The gold standard for iOS image loading).
• 🎨 Native Transitions: Support for fade, slide, scale, and bouncy gravity animations.
• 🛠️ Native Processing: High-performance borderRadius, isCircle, and grayscale filters handled at the engine level.
• 🧠 Smart Caching: Configurable TTL (Time-To-Live) and custom HTTP headers support.

---

📦 Installation

# Using yarn
yarn add react-native-next-image

# Using npm
npm install react-native-next-image

iOS Setup

cd ios && pod install

---

💡 Usage

import NextImage from 'react-native-next-image';

<NextImage
  source={{
    uri: 'https://example.com/image.jpg',
    headers: { Authorization: 'Bearer YOUR_TOKEN' },
    priority: 'high',
    cache: 'immutable',
    cacheDuration: 60, // 60 minutes
  }}
  prefetchThreshold={4}  // Load when within 400% of screen height
  transition="gravity"
  borderRadius={20}
  style={{ width: '100%', height: 300 }}
/>

---

📖 API Reference

Props

Prop	Type	Default	Description
source	Source	-	Required. Image source configuration.
defaultSource	string	-	Fallback image URL.
resizeMode	ResizeMode	'cover'	'contain', 'cover', 'stretch', 'center'.
transition	Transition	'none'	'fade', 'slide', 'scale', 'gravity'.
transitionDuration	number	300	Transition duration in milliseconds.
prefetchThreshold	number	4	Viewport threshold (multiple of screen size).
borderRadius	number	0	Native corner radius.
isCircle	boolean	false	Native circular crop.
grayscale	boolean	false	Native grayscale filter.
downsample	boolean	true	Memory-optimized loading.

Source Object

Field	Type	Default	Description
uri	string	-	Required. Image URL.
headers	Object	{}	HTTP Headers.
cacheDuration	number	10080	Cache TTL in minutes.

---

🗺️ Roadmap to v1.0

• Stabilize Native API Parity (Coil 3 vs SDWebImage)
• Resolve memory leaks in large lists
• Implement robust error handling and retry logic
• Complete Test Suite (Unit + Integration)
• Detailed Documentation Site
• v1.0.0 Production Release

---

🤝 Contributing

Contributions are welcome! Please read our CONTRIBUTING.md to get started.

---

📜 License

MIT © I Plus T Solution