8

Replicate easily the Instagram story cube animation for React Native

 1 year ago
source link: https://reactnativeexample.com/replicate-easily-the-instagram-story-cube-animation-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Animation

Replicate easily the Instagram story cube animation for React Native

May 11, 2023 1 min read

react-native-cube-transition

About the project

Replicate easily the Instagram story cube animation for React Native

preview.gif

Example

Installation

"react-native-cube-transition":"react-native-cube-transition#0.0.1"

Usage

import { CubeTransitionView } from "react-native-cube-transition";

// ...

// type TouchEventProp = NativeSyntheticEvent<{
//    touchType: 'start' | 'change' | 'end';
// }>;
const onTouch = (event: TouchEventProp) => {
  console.log('[App.onTouch]', event.nativeEvent);
};

// type PageChangeProp = NativeSyntheticEvent<{
//    page: number;
// }>;
const onPageChange = (event: PageChangeProp) => {
  console.log('[App.PageChangeProp]', event.nativeEvent);
};

// pages will load lazily while scroll
<CubeTransitionView
  style={styles.box}
  onTouch={onTouch}
  onPageChange={onPageChange}
>
  <View style={{ ...styles.size, backgroundColor: 'black' }} />
  <View style={{ ...styles.size, backgroundColor: 'orange' }} />
</CubeTransitionView>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK