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

Provides a function like transform-origin in css, anchor point in iOS, pivot point in Android. It makes3D transform animation better in React-Native.
https://github.com/sueLan/react-native-anchor-point

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sueLan/react-native-anchor-point
• Owner: sueLan
• License: mit
• Created: 2020-05-14T13:24:15.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-30T16:12:06.000Z (over 1 year ago)
• Last Synced: 2024-04-26T02:35:57.568Z (7 months ago)
• Language: TypeScript
• Homepage: https://suelan.github.io/2020/05/15/20200515-react-native-anchor-point/
• Size: 2.89 MB
• Stars: 203
• Watchers: 3
• Forks: 13
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-anchor-point ★14 - Make the fancy 3D transform easier in react native (Components / UI)
• awesome-react-native - react-native-anchor-point ★14 - Make the fancy 3D transform easier in react native (Components / UI)

README

        
# 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

![](./res/rotateZ.gif)

![](./res/rotateXY.gif)

![](./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 });

};

    

```