https://github.com/twicpics/component-react-native-sample
Sample React Native project for testing the @twicpics/components-react-native lib.
https://github.com/twicpics/component-react-native-sample
Last synced: about 2 months ago
JSON representation
Sample React Native project for testing the @twicpics/components-react-native lib.
- Host: GitHub
- URL: https://github.com/twicpics/component-react-native-sample
- Owner: TwicPics
- Created: 2022-09-26T17:07:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-01T16:04:35.000Z (about 2 years ago)
- Last Synced: 2025-01-22T15:29:58.965Z (3 months ago)
- Language: JavaScript
- Size: 293 KB
- Stars: 0
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TwicPics React Native Components Sample
This project is a demonstration project of [TwicPics Components](https://www.twicpics.com/docs/components/next?utm_source=github&utm_medium=organic&utm_campaign=components) using [React Native](https://reactnative.dev/).
This project uses [`Expo`](https://expo.dev/) 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`](https://expo.dev/client).
## How to build
### Using npm
```bash
$ npm install
$ npm run start
```
### Using yarn
```bash
$ yarn install
$ yarn start
```
## Overview
### What is [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components)?
[TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) is a **Responsive Image Service Solution** (SaaS) that enables **on-demand responsive image generation**.
With [TwicPics](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components), 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](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) 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](https://www.twicpics.com/?utm_source=github&utm_medium=organic&utm_campaign=components) in your own projects.
Basically, TwicPics component for React Native replace `Image` tag.
Simply replace this:
```html
```
With this:
```html
```
Thanks to the open source [TwicPics Components](https://www.twicpics.com/docs/components/react-native) delivering images in your [React Native](https://reactnative.dev/) projects has never been easier.
## Installation
This project is ready to use. The different dependencies, and in particular [`@twicpics/components`](https://www.twicpics.com/docs/components/react-native), are already added in the package.json.
### TwicPics configuration
#### App.js
```jsx
// import TwicPics react components
import {installTwicPics} from '@twicpics/components/react-native';
...
...
installTwicPics( {
// domain is mandatory
"domain": "https://.twic.pics"
} );
...
```
### Usage
For more information, see the complete documentation [here](https://github.com/TwicPics/components/blob/main/documentation/react-native.md).
#### your-page-or-component.js
```jsx
// this component will be used in place of an img element.
import { TwicImg } from '@twicpics/components/react-native';
...
return (
)
```
## Questions and feedback
Fell free to submit an [issue](https://github.com/TwicPics/components/issues) or to ask us anything by dropping an email at [[email protected]](mailto:[email protected]).
## Licence
[![License][license-image]][license-url]
[license-image]: https://img.shields.io/npm/l/@twicpics/components.svg?style=flat-square
[license-url]: https://raw.githubusercontent.com/twicpics/components/master/LICENSE