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

Overview

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>;
)
Owner
Marvin Frachet
React aficionado. Typescript adopter. Pizza advocate. Frencheese 🧀 Actually building :rocket: @strapi, prev @gatsbyjs, @Zenika
Marvin Frachet
Make your app reactive with MobX and react-native-router-flux

Package is obsolete with latest react-native-router-flux v4 - RNRF allows now wrapping all scenes and navbar by passing wrapBy param (equal to MobX ob

Pavel Aksonov 221 Oct 8, 2021
react-native-egg make your react native app infinitely more fun !!

react-native-egg react-native-egg make your react native app infinitely more fun !! Implementation simple gestures detection achieve trigger easter eg

FuYaoDe 258 Nov 15, 2021
This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app performance and appearance with the enter/exit animations.

react-native-display This module brings "Display: none" (css style) to turn on/off components from render. Using this module will improve your app per

null 203 Nov 16, 2021
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Rishabh Sharma 19 Nov 15, 2021
React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱

React Native <AwesomeButton /> react-native-really-awesome-button is a performant, extendable, production ready React Native component that renders an

Rafael Caferati 1k Nov 24, 2021
Text inputs with custom label and icon animations for iOS and android. Built with react native and inspired by Codrops.

React Native Textinput Effects I've come across with those beautiful text inputs created and blogged by Codrops and wanted to port them to react-nativ

Halil Bilir 2.8k Nov 24, 2021
Parse text and make them into multiple React Native Text elements

React Native Parsed Text This library allows you to parse a text and extract parts using a RegExp or predefined patterns. Currently there are 3 predef

TaskRabbit 1k Nov 27, 2021
A button React Native component supporting showing different states with animations

React Native Awesome Button An <AwesomeButton /> component that creates a button depicting different states in terms of e.g. color and label text. Whe

Lars Vinter 235 Nov 15, 2021
:lollipop: A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.

React Native Animated Loader Read more about this package here. A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animat

Vikrant Negi 133 Nov 24, 2021
:two_men_holding_hands: :two_women_holding_hands: Poor intrusive way to make A/B Testing by using an HoC instead of components

Poor intrusive way to make A/B Testing by using an HoC instead of components. Usage Installation $ npm install --save rn-ab-hoc Component /* list.js

Marvin Frachet 23 Oct 31, 2021
This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement

This is a high performance list view for React Native with support for complex layouts using a similar FlatList usage to make easy the replacement. This list implementation for big list rendering on React Native works with a recycler focused on performance and memory usage and so it permits processing thousands items on the list.

Marco Cesarato 241 Nov 28, 2021
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

Akveo 8.1k Nov 25, 2021
Listen to device orientation changes in react-native and set preferred orientation on screen to screen basis.

React Native Orientation Listen to device orientation changes in React Native applications and programmatically set preferred orientation on a per scr

Yamill Vallecillo 1.6k Nov 30, 2021
Create declarative animations for React Native

AnimationWrapperView is a collection of a well defined set of component level animations, that a developer can utilize just by providing some configur

Flipkart Incubator 49 Nov 24, 2021
React-native-customizable-toast: yet another toast library based on reanimated 2 layout animations

react-native-customizable-toast yet another toast library based on reanimated 2 layout animations Features Imperative API Fully Customizable Custom to

kubilay 47 Nov 25, 2021
Simple and lightweight What's New style component that shows your React Native app new features

React Native New Feature ☀️ Simple and lightweight What's New style component that shows your React Native app new features ☀️ If you like this projec

Duc Trung Mai 12 Sep 20, 2021
Easy, cross-platform credit-card input for your React Native Project! Start accepting payment 💰 in your app today!

React Native Credit Card Input Easy (and good looking) credit-card input for your React Native Project ?? ?? Code: <CreditCardInput onChange={this._on

Sam Aryasa 1.3k Nov 17, 2021
A FAB button component for Android and iOS, customizable, simple and as per material design specs.

react-native-fab A FAB button component for Android and iOS, customizable, simple and as per material design specs. See Google Material Design for mor

Swapnil Devesh 71 Sep 21, 2021
:performing_arts: A simple and lightweight RN component that fades in its children

react-native-fade-in-view A simple and lightweight RN component that fades in its children Install yarn add react-native-fade-in-view or npm install r

Rob Calcroft 43 Nov 27, 2021