@redox-org/react-native-redox NPM

@redox-org/react-native-redox

This's library with mobile components

Installation

npm install @redox-org/react-native-redox

Usage

FOR Gradient Effect

import { Curtain } from "@redox-org/react-native-redox";

// ...

<Curtain
    colors={['#FFF', '#000', '#222']}
    gradientEnabled={true}
    >
    <>{children[0]}<> // Header
    <>{children[1]}<> // BackComponent
    <>{children[2]}<> // Curtain Component
    </Curtain>

// ...

FOR Default View

import { Curtain } from "@redox-org/react-native-redox";

// ...

<Curtain>
    <>{children[0]}<> // Header
    <>{children[1]}<> // BackComponent
    <>{children[2]}<> // Curtain Component
    </Curtain>

// ...

Props

    /**
    * If the value is three, then the background will be rendered with a gradient effect.
    * But then you definitely need to set the value of the array of colors in colors
    */

   gradientEnabled?: boolean;

    /**
    * Accepts an array of colors if gradientEnabled key = true
    */

   colors?: (string | number)[];

    /**
    * It accepts only 3 children at the entrance. This is important as each child is treated
    * differently. The first child gets to the very top. The second will be behind all the others.
    * The third will be the curtain.
    */

    children: ReactNode[];
  
    /**
    * Accepts standard styles for the View component
    */
  
    style?: ReactNative.StyleProp<ReactNative.ViewStyle>;
  
    /**
    * Special clearance from top to curtain
    */
  
    gapValue?: number;

    /**
    * This parameter sets styles for the "Curtain" component.
    */
  
    styleCurtainComponent?: ReactNative.StyleProp<ReactNative.ViewStyle>;

    /**
    * This parameter sets styles for the "Back" component.
    */
  
    styleBackComponent?: ReactNative.StyleProp<ReactNative.ViewStyle>;

    /**
    * This parameter sets height for the "Header" component. (or children[0] -- 'First')
    */
  
    heightHeaderComponent?: number;

    /**
    * Determines activity of RefreshControl
    */
  
    refreshing?: boolean,

    /**
    * Event handler for RefreshControl (default: false)
    */
  
    onRefresh?: (() => void),

    /**
    * This parameter sets RefreshControl props
    */
  
    refreshConfig?: RefreshControlProps