@pietile-native-kit/fade-view v2.1.0

FadeView

Changes content with FadeOut-FadeIn animation. FadeView uses data prop to know when start the transition. Useful in situations when you want to change content smoothly, implementing tabs content for example.

Installation

Using yarn

yarn add @pietile-native-kit/fade-view

or using npm

npm install -S @pietile-native-kit/fade-view

Usage

Wrap the content in FadeView and set data to value that controls content. Every time data changes FadeView will remember children, play FadeOut animation and then FadeIn with current children already. So it's important to notice that FadeView passthrough children all the time except when playing FadeOut.

Code example

import React, { Component } from 'react';

import { StyleSheet, Text, TouchableOpacity } from 'react-native';
import { FadeView } from '@pietile-native-kit/fade-view';

class FadeViewExample extends Component {
  state = { isCat: true };

  onPress = () => this.setState(({ isCat }) => ({ isCat: !isCat }));

  render() {
    const { isCat } = this.state;

    return (
      <FadeView style={styles.container} data={isCat}>
        <TouchableOpacity
          style={[styles.touchable, { backgroundColor: isCat ? '#c4c' : '#bfb' }]}
          onPress={this.onPress}
        >
          <Text style={styles.text}>{isCat ? '🐱' : '🐶'}</Text>
        </TouchableOpacity>
      </FadeView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
  },
  touchable: {
    borderRadius: 16,
    padding: 16,
  },
  text: {
    fontSize: 86,
  },
});

export default FadeViewExample;

API

Properties

License

Pietile FadeView is MIT License.