Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mfrachet/rn-displayable

:computer: :dash: Make your component visible with animations and a set of rules or simple props
https://github.com/mfrachet/rn-displayable

Last synced: about 2 months ago
JSON representation

:computer: :dash: Make your component visible with animations and a set of rules or simple props

Awesome Lists containing this project

README 

        
[![Build Status](https://travis-ci.org/mfrachet/rn-displayable.svg?branch=master)](https://travis-ci.org/mfrachet/rn-displayable)

[![Coverage Status](https://coveralls.io/repos/github/mfrachet/rn-displayable/badge.svg?branch=master)](https://coveralls.io/github/mfrachet/rn-displayable?branch=master)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)



Make your component visible with animations and a set of rules or simple props



# Content



- Installation

- Display content with simple props

- Display content using business rules

- Make the transition beautiful with animation



# Usage



Installation



```shell

$ yarn add rn-displayable

```



### In your code



Usage with primitive props



```javascript

/* react stuff... */

import { makeDisplayable, makeVisible } from "rn-displayable";



const DisplayableText = makeDisplayable(Text);

const VisibleText = makeVisible(Text);



export default function() {

  return (

    

      This is displayed

      This is NOT displayed



      This is visible

      This is NOT visible

    

  );

}

```



**Why two different ways to handle the same thing?**



The `makeDisplayable` HoC allows to **create** and **remove** the view on the native part. The view doesn't exist anymore. This operation has a cost in React Native: multiple messages go across the bridge and can lead to slowness.



The `makeVisible` on the other side only deals with `style` under the hood. It's better in term of performances because the element always exist and is not recreated each time it's displayed: it only changes its style.



Using rules



```javascript

/* react stuff... */

import { makeDisplayable, makeVisible } from "rn-displayable";



const isBiggerThan5 = props => props.number > 5;

const isBiggerThan10 = props => props.number > 10;



const rules = [isBiggerThan5, isBiggerThan10];



const DisplayableText = makeDisplayable(Text);

const VisibleText = makeVisible(Text);



export default function() {

  return (

    

      

        This is not displayed ! (first rule not resolved)

      



      

        This is displayed !

      



      

        This is not visible ! (second rule not resolved)

      



      

        This is visible !

      

    

  );

}

```



Usage with Animation



The library provides a `Animation` prop with the HoC. This animation is playing while _entering_ (in the future, a leaving animation will be added).



Here's a little example:



```javascript

const CustomFade = ({ children }) => {

  const animation = new Animated.Value(0);



  Animated.timing(animation, {

    toValue: 1,

    duration: 1000,

    useNativeDriver: true

  }).start();



  const style = { opacity: animation };

  return {children};

};



/* ... */

const SomeComponent = ({ isVisible }) => (

  

    Appearing with a wonderful (\o/) opacity animation

  ;

)

```