React Native

# Using yarn
yarn add @twicpics/components

# Or using npm
npm install @twicpics/components

# Expo AV installation (required for TwicVideo component)

## Using yarn
yarn add expo-av

## Or using npm
npm install expo-av

# Expo Image installation (required for image caching)

## Using yarn
yarn add expo-image

## Or using npm
npm install expo-image

npx install-expo-modules@latest

# Expo AV installation (required for TwicVideo component)

## Using yarn
yarn add expo-av

## Or using npm
npm install expo-av

# Expo Image installation (required for image caching)

## Using yarn
yarn add expo-image

## Or using npm
npm install expo-image

npx pod-install

// App.js

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

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

export default function App() {
  return (
    // your app code
  )
}

// MyComponent.jsx

import { TwicImg, TwicVideo } from '@twicpics/components/react-native'

const MyComponent = () => (
  <TwicImg
    src="image.jpg"
    style={styles.customImage}
    mode="cover"
    placeholder="preview"
  />
  <TwicVideo
    src="video.mp4"
    style={styles.customVideo}
    mode="cover"
    placeholder="preview"
  />
)

const styles = StyleSheet.create({
  customImage: {
    // some styles
  },
  customVideo: {
    // some styles
  },
})

export default MyComponent

// App.js

import { installTwicpics } from '@twicpics/components/react-native';

// defines the cache policy for the entire application during setup
installTwicpics({
  "domain": `https://<your-domain>.twic.pics/`,
  "cachePolicy": `disk`, // set the cache policy to 'disk' for persistent storage
});

// MyComponent.jsx

import { TwicImg } from "@twicpics/components/react-native";

const MyComponent = () => (
  <View>
    <TwicImg 
      src="path/to/your/image" {/* image will be cached to disk as defined in setup options */}
    />
    <TwicImg
      src="path/to/your/image"
      cachePolicy="memory" {/* overrides setup option with `memory` value for in-memory caching  */}
    />
    <TwicImg
      src="path/to/your/image"
      cachePolicy="none" {/* overrides setup option with `none` value: image will not be cached */}
    />
  </View>
);

// MyComponent.jsx

import React from 'react';
import { FlatList, View } from 'react-native';
import { TwicImg } from '@twicpics/components/react-native'

const data = [
  // Data containing image URLs
  { id: 1, imageUrl: 'image1.jpg' },
  { id: 2, imageUrl: 'image2.jpg' },
  // More data...
];

const renderItem = ({ item }) => (
  <View>
    <TwicImg
      src={item.imageUrl}
      eager {/* disables lazy loading for this image */} />
  </View>
);

const MyComponent = () => {
  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={(item) => item.id.toString()}
      // Other FlatList props...
    />
  );
};

export default MyComponent;

  <!-- default refit: centered object(s), no padding around -->
  <TwicImg src="image1.jpg" refit />

  <!-- a 5% padding will be applied around main subject(s) -->
  <TwicImg src="image2.jpg" refit="5p" />

  <!-- a 5% padding will be applied vertically, a 10% padding will be applied horizontally -->
  <TwicImg src="image3.jpg" refit="5p,10p" />

  <!-- main subject(s) will be left aligned -->
  <TwicImg src="image3.jpg" anchor="left" />

// MyComponent.jsx

import { TwicImg } from '@twicpics/components/react-native'

const MyComponent = () => (
  <TwicImg src="path/to/your/image" ratio="none" style={styles.heroImage} />
)

// When using `ratio="none"`, you are responsible for properly sizing the component
const styles = StyleSheet.create({
  heroImage: {
    height: 500,
  },
})

export default MyComponent

<TwicImg
  src="<path>"
  alt="<String>"
  anchor="<String>"
  cachePolicy="<none|disk|memory|memory-disk>"
  crossOrigin="<anonymous|use-credentials>"
  eager="<boolean>"
  focus="<auto|coordinates>"
  mode="<contain|cover>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  referrerPolicy="<no-referrer|no-referrer-when-downgrade|origin|`origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin|unsafe-url>"
  refit="<boolean|String>"
  step="<integer>"
  style="<Object>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<Function>"
/>

<TwicVideo
  src="<path>"
  anchor="<String>"
  duration="<String|number>"
  eager="<boolean>"
  from="<String|number>"
  focus="<coordinates>"
  mode="<contain|cover>"
  posterFrom="<String|number>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  step="<integer>"
  style="<Object>"
  to="<String|number>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
/>