@pietile-native-kit/fade-view

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

name	description	type	default
children	Content	Node	-
data	Marker property for telling the FadeView to do FadeOut-FadeIn	any	-
duration	Hide and show animations duration	number	150
style	Style of component	style	-

License

Pietile FadeView is MIT License.