### Start React Native Example App Packager

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Initiates the Metro bundler for the example application, enabling live reloading of JavaScript changes during development without a full rebuild.

```sh
yarn example start
```

--------------------------------

### Run React Native Example App on iOS

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Builds and deploys the example application to an iOS simulator or connected device for testing.

```sh
yarn example ios
```

--------------------------------

### Run React Native Example App on Web

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Compiles and launches the example application in a web browser environment for testing web compatibility.

```sh
yarn example web
```

--------------------------------

### Run React Native Example App on Android

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Builds and deploys the example application to an Android emulator or connected device for testing.

```sh
yarn example android
```

--------------------------------

### Full Example of ReactNativeZoomableView in a React Native App

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

A complete, runnable React Native application example demonstrating the usage of ReactNativeZoomableView. This example includes importing necessary components, defining styles, and embedding an image within the zoomable view, showcasing how to handle content dimensions for proper boundary application.

```JSX
import * as React from 'react';

import { StyleSheet, View, Text, Image } from 'react-native';
import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>ReactNativeZoomableView</Text>
      <View style={{ borderWidth: 5, flexShrink: 1, height: 500, width: 310 }}>
        <ReactNativeZoomableView
          maxZoom={30}
          // Give these to the zoomable view so it can apply the boundaries around the actual content.
          // Need to make sure the content is actually centered and the width and height are
          // dimensions when it's rendered naturally. Not the intrinsic size.
          // For example, an image with an intrinsic size of 400x200 will be rendered as 300x150 in this case.
          // Therefore, we'll feed the zoomable view the 300x150 size.
          contentWidth={300}
          contentHeight={150}
        >
          <Image
            style={{ width: '100%', height: '100%', resizeMode: 'contain' }}
            source={{ uri: 'https://via.placeholder.com/400x200.png' }}
          />
        </ReactNativeZoomableView>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  box: {
    width: 60,
    height: 60,
    marginVertical: 20,
  },
});
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Installs all required dependencies for the project's packages using Yarn, setting up the local development environment.

```sh
yarn
```

--------------------------------

### Install React Native Zoomable View Package

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

Instructions on how to add the @openspacelabs/react-native-zoomable-view package to your React Native project using either npm or yarn. This package provides the core functionality for zoomable views.

```shell
npm add @openspacelabs/react-native-zoomable-view
```

```shell
yarn add @openspacelabs/react-native-zoomable-view
```

--------------------------------

### Basic Usage of ReactNativeZoomableView Component

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

An example of how to integrate ReactNativeZoomableView into your application, replacing a standard React Native View. It shows basic configuration options like maximum and minimum zoom levels, initial zoom, and binding to borders, along with a simple text content.

```JSX
<ReactNativeZoomableView
   maxZoom={1.5}
   minZoom={0.5}
   zoomStep={0.5}
   initialZoom={1}
   bindToBorders={true}
   onZoomAfter={this.logOutZoomState}
   style={{
      padding: 10,
      backgroundColor: 'red',
   }}
>
   <Text>This is the content</Text>
</ReactNativeZoomableView>
```

--------------------------------

### React Native ZoomableView Programmatic Control Example (TSX)

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

This TypeScript JSX example demonstrates how to integrate and programmatically control the ReactNativeZoomableView component within a React Native application. It shows how to use a ref to access the component's methods like `moveBy`, `moveTo`, `zoomBy`, and `zoomTo` via external buttons.

```TSX
export default function App() {
  // you will need a reference to the ReactNativeZoomableView component
  const zoomableViewRef = createRef<ReactNativeZoomableView>();

  return (
    <View style={styles.container}>
      <View style={styles.zoomWrapper}>
        <ReactNativeZoomableView
          ref={zoomableViewRef}
          bindToBorders={true}
        >
          <Text style={styles.caption}>HelloWorld</Text>
        </ReactNativeZoomableView>
      </View>

      <View style={styles.controlWrapperLeft}>
        {/* Here you see some examples of moveBy */}
        <Button onPress={() => zoomableViewRef.current!.moveBy(-30, 0)} title="⬅️" />
        <Button onPress={() => zoomableViewRef.current!.moveBy(30, 0)} title="➡️" />
        <Button onPress={() => zoomableViewRef.current!.moveBy(0, -30)} title="⬆️" />
        <Button onPress={() => zoomableViewRef.current!.moveBy(0, 30)} title="⬇️" />

        {/* Here you see an example of moveTo */}
        <Button onPress={() => zoomableViewRef.current!.moveTo(300, 200)} title="Move to" />
      </View>

      <View style={styles.controlWrapperRight}>
        {/* Here you see examples of zoomBy */}
        <Button onPress={() => zoomableViewRef.current!.zoomBy(-0.1)} title="-" />
        <Button onPress={() => zoomableViewRef.current!.zoomBy(0.1)} title="+" />

        {/* Here you see an example of zoomTo */}
        <Button onPress={() => zoomableViewRef.current!.zoomTo(1)} title="reset" />
      </View>
    </View>
  );
}
```

--------------------------------

### Publish New Project Versions to npm

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Automates the release process using `release-it`, handling tasks such as version bumping based on semver, creating Git tags, and publishing to npm.

```sh
yarn release
```

--------------------------------

### Package.json Script Reference

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

A comprehensive list of `yarn` scripts defined in the `package.json` file, detailing their purpose for various development and maintenance tasks within the project.

```APIDOC
yarn bootstrap: setup project by installing all dependencies and pods.
yarn typescript: type-check files with TypeScript.
yarn lint: lint files with ESLint.
yarn test: run unit tests with Jest.
yarn example start: start the Metro server for the example app.
yarn example android: run the example app on Android.
yarn example ios: run the example app on iOS.
```

--------------------------------

### Run Project Unit Tests with Jest

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Executes the project's unit tests using Jest to validate functionality and prevent regressions, ensuring code stability.

```sh
yarn test
```

--------------------------------

### React Native Zoomable View Pan Responder Hooks API

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

Documentation for the pan responder hooks available in `react-native-zoomable-view`, allowing customization of touch and gesture handling. These hooks align with React Native's PanResponder system.

```APIDOC
PanResponderHooks:
  onStartShouldSetPanResponder(event, gestureState, zoomableViewEventObject, baseComponentResult): boolean
    description: whether panresponder should be set or not
    params:
      event: Event object
      gestureState: Gesture state object
      zoomableViewEventObject: Current state of the zoomable view
      baseComponentResult: Result from the base component
    returns: boolean

  onPanResponderGrant(event, gestureState, zoomableViewEventObject): void
    description: description
    params:
      event: Event object
      gestureState: Gesture state object
      zoomableViewEventObject: Current state of the zoomable view
    returns: void

  onPanResponderEnd(event, gestureState, zoomableViewEventObject): void
    description: Will be called when gesture ends (more accurately, on pan responder "release")
    params:
      event: Event object
      gestureState: Gesture state object
      zoomableViewEventObject: Current state of the zoomable view
    returns: void

  onPanResponderTerminate(event, gestureState, zoomableViewEventObject): void
    description: Will be called when the gesture is force-interrupted by another handler
    params:
      event: Event object
      gestureState: Gesture state object
      zoomableViewEventObject: Current state of the zoomable view
    returns: void

  onPanResponderTerminationRequest(event, gestureState, zoomableViewEventObject): void
    description: Callback asking whether the gesture should be interrupted by another handler (iOS only due to https://github.com/facebook/react-native/issues/27778, https://github.com/facebook/react-native/issues/5696, ...)
    params:
      event: Event object
      gestureState: Gesture state object
      zoomableViewEventObject: Current state of the zoomable view
    returns: void

  onPanResponderMove(event, gestureState, zoomableViewEventObject): void
    description: Will be called when user moves while touching
    params:
      event: Event object
      gestureState: Gesture state object
      zoomableViewEventObject: Current state of the zoomable view
    returns: void

  onShouldBlockNativeResponder(event, gestureState, zoomableViewEventObject): boolean
    description: Returns whether this component should block native components from becoming the JS responder
    params:
      event: Event object
      gestureState: Gesture state object
      zoomableViewEventObject: Current state of the zoomable view
    returns: boolean
```

--------------------------------

### React Native Zoomable View Component Options API

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

Defines the configurable properties for the React Native Zoomable View component, enabling control over zoom, pan, and double-tap interactions. Each option specifies its type, purpose, and default value.

```APIDOC
ReactNativeZoomableOptions:
  zoomEnabled: boolean
    description: Can be used to enable or disable the zooming dynamically
    default: true
  panEnabled: boolean
    description: Can be used to enable or disable the panning dynamically
    default: true
  initialZoom: number
    description: Initial zoom level on startup
    default: 1.0
  maxZoom: number | null
    description: Maximum possible zoom level (zoom in). Can be set to `null` to allow unlimited zooming
    default: 1.5
  minZoom: number
    description: Minimum possible zoom level (zoom out)
    default: 0.5
  disablePanOnInitialZoom: boolean
    description: If true, panning is disabled when zoom level is equal to the initial zoom level
    default: false
  doubleTapDelay: number
    description: How much delay will still be recognized as double press (ms)
    default: 300
  doubleTapZoomToCenter: boolean
    description: If true, double tapping will always zoom to center of View instead of the direction it was double tapped in
    default: null
  bindToBorders: boolean
    description: If true, it makes sure the object stays within box borders
    default: true
  zoomStep: number
    description: How much zoom should be applied on double tap
    default: 0.5
```

--------------------------------

### Configure React Native Zoomable View Static Pin Position

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

Describes optional properties for implementing a static pin feature within the zoomable view, useful for map-like applications. Includes properties for pin position, icon, and callbacks for position changes.

```APIDOC
staticPinPosition: Vec2D - Where in the viewport to put the pin
staticPinIcon: Element - The pin icon itself
onStaticPinPositionChange: (position: Vec2D) => void - Callback every time the pin is at rest
onStaticPinPositionMove: (position: Vec2D) => void - Callback live while the pin is moving
animatePin: boolean - Whether to make the pin bounce up and down while dragging
```

--------------------------------

### Configure React Native Zoomable View General Properties

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

Defines various numerical and boolean properties to control the behavior of the zoomable view, such as pinch sensitivity, movement resistance, initial offsets, content dimensions, pan boundary padding, long press duration, and visual feedback.

```APIDOC
pinchToZoomInSensitivity: number - The level of resistance (sensitivity) to zoom in (0 - 10) - higher is less sensitive (default: 3)
pinchToZoomOutSensitivity: number - The level of resistance (sensitivity) to zoom out (0 - 10) - higher is less sensitive (default: 1)
movementSensibility: number - How resistant should shifting the view around be? (0.5 - 5) - higher is less sensitive (default: 1.9)
initialOffsetX: number - The horizontal offset the image should start at (default: 0)
initialOffsetY: number - The vertical offset the image should start at (default: 0)
contentHeight: number - Specify if you want to treat the height of the **centered** content inside the zoom subject as the zoom subject's height (default: undefined)
contentWidth: number - Specify if you want to treat the width of the **centered** content inside the zoom subject as the zoom subject's width (default: undefined)
panBoundaryPadding: number - At certain scales, the edge of the content is bounded too close to the edge of the container, making it difficult to pan to and interact with the edge of the content. To fix this, we'd wanna allow the content to pan just a little further away from the container's edge. Hence, the "pan boundary padding", measured in pixels. (default: 0)
longPressDuration: number - Duration in ms until a press is considered a long press (default: 700)
visualTouchFeedbackEnabled: boolean - Whether to show a touch feedback circle on touch (default: true)
```

--------------------------------

### Verify TypeScript and ESLint Compliance

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Executes TypeScript type checking and ESLint code linting to ensure code quality, consistency, and adherence to project standards before committing changes.

```sh
yarn typescript
yarn lint
```

--------------------------------

### React Native Zoomable View Callback API Reference

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

This section details the callback functions available for the React Native Zoomable View component. Each callback is triggered by a specific event, providing relevant event data, gesture state, and zoomable view event objects.

```APIDOC
ReactNativeZoomableViewCallbacks:
  onTransform(zoomableViewEventObject: object): void
    description: Will be called when the transformation configuration (zoom level and offset) changes

  onDoubleTapBefore(event: object, gestureState: object, zoomableViewEventObject: object): void
    description: Will be called, at the start of a double tap

  onDoubleTapAfter(event: object, gestureState: object, zoomableViewEventObject: object): void
    description: Will be called at the end of a double tap

  onShiftingBefore(event: object, gestureState: object, zoomableViewEventObject: object): boolean
    description: Will be called, when user taps and moves the view, but before our view movement work kicks in (so this is the place to interrupt movement, if you need to)
    returns: if this returns true, ZoomableView will not process the shift, otherwise it will

  onShiftingAfter(event: object, gestureState: object, zoomableViewEventObject: object): void
    description: Will be called, when user taps and moves the view, but after the values have changed already

  onShiftingEnd(event: object, gestureState: object, zoomableViewEventObject: object): void
    description: Will be called, when user stops a tap and move gesture

  onZoomBefore(event: object, gestureState: object, zoomableViewEventObject: object): boolean
    description: Will be called, while the user pinches the screen, but before our zoom work kicks in (so this is the place to interrupt zooming, if you need to)
    returns: if this returns true, ZoomableView will not process the pinch, otherwise it will

  onZoomAfter(event: object, gestureState: object, zoomableViewEventObject: object): boolean
    description: Will be called, while the user pinches the screen, but after the values have changed already
    returns: if this returns true, ZoomableView will not process the pinch, otherwise it will

  onZoomEnd(event: object, gestureState: object, zoomableViewEventObject: object): boolean
    description: Will be called after pinchzooming has ended
    returns: if this returns true, ZoomableView will not process the pinch, otherwise it will

  onLongPress(event: object, gestureState: object): void
    description: Will be called after the user pressed on the image for a while

  onLayout(event: object): void
    description: This callback behaves like React Native's View.onLayout, but it syncs with the component's internal state and provides a fake synthetic event object.
```

--------------------------------

### Automatically Fix ESLint Formatting Errors

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/CONTRIBUTING.md

Runs ESLint with the `--fix` option to automatically correct common code formatting and style issues, ensuring code consistency.

```sh
yarn lint --fix
```

--------------------------------

### Import ReactNativeZoomableView Component

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

This snippet demonstrates how to import the ReactNativeZoomableView component into your React Native application. It is the first step to using the zoomable view functionality.

```JSX
import { ReactNativeZoomableView } from '@openspacelabs/react-native-zoomable-view';
```

--------------------------------

### React Native Zoomable View Event Object Structure

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

Defines the structure of the `zoomableViewEventObject`, which is attached to every event and represents the current state of the zoomable view, including zoom level, offsets, and original dimensions.

```APIDOC
zoomableViewEventObject:
  zoomLevel: number
    description: current level of zooming denoting the scale applied to the zoom subject (usually a value between minZoom and maxZoom)
  offsetX: number
    description: current offset left
  offsetY: number
    description: current offset top
  originalHeight: number
    description: original height of the zoom subject
  originalWidth: number
    description: original width of the zoom subject
  originalPageX: number
    description: original absolute X of the zoom subject
  originalPageY: number
    description: original absolite Y of the zoom subject
```

--------------------------------

### ReactNativeZoomableView Control Methods and Properties API

Source: https://github.com/openspacelabs/react-native-zoomable-view/blob/master/README.md

Documents the public methods and properties available for programmatic control of the ReactNativeZoomableView component, including functionalities for adjusting zoom levels and shifting the view position. It also lists a property indicating active gestures.

```APIDOC
Methods:
  zoomTo(newZoomLevel: number, bindToBorders: boolean = true): Promise<boolean>
    description: Changes the zoom level to a specific number

  zoomBy(zoomLevelChange: number, bindToBorders: boolean = true): Promise<boolean>
    description: Changes the zoom level relative to the current level (use positive numbers to zoom in, negative numbers to zoom out)

  moveTo(newOffsetX: number, newOffsetY: number, bindToBorders: boolean = true): Promise<void>
    description: Shifts the zoomed part to a specific point (in px relative to x: 0, y: 0)

  moveBy(newOffsetX: number, newOffsetY: number, bindToBorders: boolean = true): Promise<void>
    description: Shifts the zoomed part by a specific pixel number

Properties:
  gestureStarted: boolean
    description: Indicates if a gesture is currently in progress
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.