TwicPics React Native Components Sample

This project is a demonstration project of TwicPics Components using React Native.

This project uses Expo which will allow you to launch a server for the web, a native IOS or android app.

Execution on a mobile device is possible via ExpoGo.

How to build

Using npm

$ npm install
$ npm run start

Using yarn

$ yarn install
$ yarn start

Overview

What is TwicPics?

TwicPics is a Responsive Image Service Solution (SaaS) that enables on-demand responsive image 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 an image proxy. It requests your master image, be it on your own web server, cloud storage or DAM, then generates a device-adapted version with best-in-class compression, delivered directly to the end-user from the closest delivery point available.

What is TwicPics Components?

TwicPics Components is a collection of web components that make it dead easy to unleash the power of TwicPics in your own projects.

Basically, TwicPics component for React Native replace Image tag.

Simply replace this:

<Image
    source={{
        uri: 'https://assets.twicpics.com/examples/football.jpg',
    }}
/>

With this:

<TwicImg src="https://assets.twicpics.com/examples/football.jpg" />

Thanks to the open source TwicPics Components delivering images in your React Native projects has never been easier.

Installation

This project is ready to use. The different dependencies, and in particular @twicpics/components, are already added in the package.json.

TwicPics configuration

App.js

// import TwicPics react components
import {installTwicPics} from '@twicpics/components/react-native';
...

...
installTwicPics( {
  // domain is mandatory
  "domain": "https://<your-domain>.twic.pics"
} );
...

Usage

For more information, see the complete documentation here.

your-page-or-component.js

// this component will be used in place of an img element.
import { TwicImg } from '@twicpics/components/react-native';
...

return (
    <TwicImg
        src="path/to/your/image"
        alt="..."
        anchor="..."
        focus="auto..."
        preTransform="..."
        mode="your-mode" // cover by default
        ratio="your-ratio" // 1 by default.
        step="custom-step" // if set, this value will override config value
        style={styles.customImage}
    />
)

Questions and feedback

Fell free to submit an issue or to ask us anything by dropping an email at support@twic.pics.

Licence