react-native-anchor-point - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #ai #llm #android #nodejs #awesome #kubernetes #awesome-list #pytorch #mcp #openai #open-source

react-native-anchor-point

(★ 209)

Provides a function like transform-origin in css, anchor point in iOS, pivot point in Android. It makes3D transform animation better in React-Native.

File Explorer

Download Latest Version (.zip)

- - .gitignore
  - AnchorPointDemo.tsx
  - app.json
  - App.tsx
  - babel.config.js
  - package.json
  - SmallTestCard.tsx
  - TestAnimatedCard.tsx
  - TestCard.tsx
  - tsconfig.json
- anchor_point.png
- external_point.png
- rotate.gif
- rotateXY.gif
- rotateZ.gif
.eslintrc.js
.gitignore
index.ts
LICENSE
package.json
README.md

# Installation Guide

1. Get the code

git clone https://github.com/sueLan/react-native-anchor-point

Downloads the entire project code from GitHub to your computer.

cd react-native-anchor-point

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

yarn add react-native-anchor-point

Type this command into your terminal and run it.

npm install react-native-anchor-point

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-anchor-point

Provide a simple, tricky but powerful function, `withAnchorPoint` , like Anchor Point in iOS, Pivot Point in Android, `transform-origin` in css to achieve better 3D transform animation in React-Native.

> Make the 3D transform easier in React Native

![](https://raw.githubusercontent.com/sueLan/react-native-anchor-point/master/res/rotateZ.gif)
![](https://raw.githubusercontent.com/sueLan/react-native-anchor-point/master/res/rotateXY.gif)
![](https://raw.githubusercontent.com/sueLan/react-native-anchor-point/master/res/rotate.gif)

## Getting Started

install the `react-native-anchor-point`

```
yarn add react-native-anchor-point
```
or 
```
npm install react-native-anchor-point
```

## Example

```javascript
import { withAnchorPoint } from 'react-native-anchor-point';

getTransform = () => {
    let transform = {
        transform: [{ perspective: 400 }, { rotateX: rotateValue }],
    };
    return withAnchorPoint(transform, { x: 0.5, y: 1.5 }, { width: CARD_WIDTH, height: CARD_HEIGHT });
};
    
<Animated.View style={[styles.blockBlue, this.getTransform()]} />
```