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
$ yarn add rn-displayable
In your code
Usage with primitive props
/* react stuff... */; const DisplayableText = ;const VisibleText = ; { 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... */; const isBiggerThan5 = propsnumber > 5;const isBiggerThan10 = propsnumber > 10; const rules = isBiggerThan5 isBiggerThan10; const DisplayableText = ;const VisibleText = ; { 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 = { const animation = 0; Animatedstart; const style = opacity: animation ; return <AnimatedView style=style>children</AnimatedView>;}; /* ... */const SomeComponent = <VisibleView isVisible=isVisible Animation=CustomFade> <Text>Appearing with a opacity animation</Text> </VisibleView>;