# rntpc_react-native-transitiongroup

**Repository Path**: openharmony-sig/rntpc_react-native-transitiongroup

## Basic Information

- **Project Name**: rntpc_react-native-transitiongroup
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/openharmony-sig/rntpc_react-native-transitiongroup
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-14
- **Last Updated**: 2025-05-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🚨 **重要提示 | IMPORTANT**
>
> **⚠️ 此代码仓已归档。新地址请访问 [rntpc_react-native-transitiongroup](https://gitcode.com/openharmony-sig/rntpc_react-native-transitiongroup)。| ⚠️ This repository has been archived. For the new address, please visit [rntpc_react-native-transitiongroup](https://gitcode.com/openharmony-sig/rntpc_react-native-transitiongroup).**
>
---
>
# react-native-transitiongroup

Works similar to [ReactTransitionGroup](https://github.com/facebook/react/blob/master/src/addons/transitions/ReactTransitionGroup.js) found in `react`, but reimplemented in seperate library to work better with `react-native` 

https://github.com/reactjs/react-transition-group/issues/6

## General usage

**important** to always give your `Transition` components a unique `key`.


```js
import TransitionGroup, { FadeInOutTransition } from 'react-native-transitiongroup';
```

```jsx
<TransitionGroup>
  <FadeInOutTransition key="loader">
     {this.state.isLoading ? <Loader /> : null}
  </FadeInOutTransition>
</TransitionGroup>
```


## Custom Transitions

You can easily create your own transitions, by creating your own Transition component.
`TransitionGroup` will look for the following methods to be called on its child components to animate `enter` and `leave` 

```js
componentWillEnter(callback)
componentWillLeave(callback)
```

### example of scale in/out
```js
class ScaleInOutTransition extends Component {
  constructor() {
    super();

    this.state = {
      progress: new Animated.Value(0),
    };
  }

  componentWillEnter(callback) {
    Animated.timing(this.state.progress, {
      toValue: 1,
      delay: this.props.inDelay,
      easing: this.props.easing,
      duration: this.props.inDuration,
    }).start(callback);
  }

  componentWillLeave(callback) {
    Animated.timing(this.state.progress, {
      toValue: 0,
      delay: this.props.outDelay,
      easing: this.props.easing,
      duration: this.props.outDuration,
    }).start(callback);
  }

  render() {
    const animation = {
      transform: [
        { scale: this.state.progress },
      ]
    };

    return (
      <Animated.View
        style={[this.props.style, animation]}>
        {this.props.children}
      </Animated.View>
    );
  }
}

```