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

• Host: GitHub
• URL: https://github.com/mfrachet/rn-displayable
• Owner: mfrachet
• Created: 2017-12-04T13:14:35.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-17T11:11:39.000Z (about 6 years ago)
• Last Synced: 2024-04-22T04:49:59.627Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 190 KB
• Stars: 17
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - rn-displayable ★15 - Display your components based on props or a set of rules (Components / UI)
• awesome-reactnative-ui - rn-displayable - ci.org/mfrachet/rn-displayable.svg?branch=master)| (Others)
• awesome-react-native - rn-displayable ★15 - Display your components based on props or a set of rules (Components / UI)
• awesome-reactnative-ui - rn-displayable - ci.org/mfrachet/rn-displayable.svg?branch=master)| (Others)
• awesome-react-native - rn-displayable ★15 - Display your components based on props or a set of rules (Components / UI)
• awesome-react-native - rn-displayable ★15 - Display your components based on props or a set of rules (Components / UI)

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

  ;

)

```