This project is a demonstration project of TwicPics Components using React Native.
It exemplifies the blog post Seamlessly Integrating Images and Videos into Your React Native Projects.
TwicPics is a Responsive Media Service Solution (SaaS) that enables on-demand responsive image & video generation.
With TwicPics, developers only deal with high-resolution versions of their media while end-users receive optimized, perfectly sized, device-adapted versions delivered from a server close to them.
TwicPics acts as a proxy. It retrieves your master file — from your web server, cloud storage, or DAM — and generates a device-adapted version with best-in-class compression, delivered directly to the end-user from the closest available delivery point.
TwicPics Components is a collection of components that make it dead easy to unleash the power of TwicPics in your own projects with optimized Cumulative Layout Shift (CLS), low-quality image placeholders, and lazy loading out of the box.
<TwicImg> is a drop-in replacement for <Image> component.
<!-- Before -->
<Image source={{uri: "https://assets.twicpics.com/examples/football.jpg"}} style={{width: 400, height: 400}}/>
<!-- After -->
<TwicImg src="football.jpg" /><TwicVideo> is a component for seamless playback of videos optimized with TwicPics.
<TwicVideo src="path/to/your/video"/>| Android | iOS | Web |
|---|---|---|
| [x] | [x] | [x] |
yarn && yarn startAll the examples proposed in this project are located in the pages directory.
Feel free to inspire yourself from these different use cases to unleash the power of TwicPics in your own projects.
Fell free to submit an issue or to ask us anything by dropping an email at [email protected].
