Skip to content

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

Notifications You must be signed in to change notification settings

mfrachet/rn-displayable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status Coverage Status License: MIT

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

Content

Usage

Installation

$ yarn add rn-displayable

In your code

Usage with primitive props

/* react stuff... */
import { makeDisplayable, makeVisible } from "rn-displayable";

const DisplayableText = makeDisplayable(Text);
const VisibleText = makeVisible(Text);

export default function() {
  return (
    <View>
      <DisplayableText isDisplayed>This is displayed</DisplayableText>
      <DisplayableText>This is NOT displayed</DisplayableText>

      <VisibleText isVisible>This is visible</VisibleText>
      <VisibleText isVisible>This is NOT visible</VisibleText>
    </View>
  );
}

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

/* 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 (
    <View>
      <DisplayableText number={3} rules={rules}>
        This is not displayed ! (first rule not resolved)
      </DisplayableText>

      <DisplayableText number={12} rules={rules}>
        This is displayed !
      </DisplayableText>

      <VisibleText number={8} rules={rules}>
        This is not visible ! (second rule not resolved)
      </VisibleText>

      <VisibleText number={15} rules={rules}>
        This is visible !
      </VisibleText>
    </View>
  );
}

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:

const CustomFade = ({ children }) => {
  const animation = new Animated.Value(0);

  Animated.timing(animation, {
    toValue: 1,
    duration: 1000,
    useNativeDriver: true
  }).start();

  const style = { opacity: animation };
  return <Animated.View style={style}>{children}</Animated.View>;
};

/* ... */
const SomeComponent = ({ isVisible }) => (
  <VisibleView isVisible={isVisible} Animation={CustomFade}>
    <Text>Appearing with a wonderful (\o/) opacity animation</Text>
  </VisibleView>;
)

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published