@rn-flix/component

React Native Flix Component

Getting Started

• Installation

• Documentation : Detail props, preview and example with Try It at View Code

• Components

  Component	Detail
  Accordion	• Usage • Preview
  Images	• Usage • Preview
  Picker	• Usage • Preview
  ScrollPicker	• Usage • Preview
  Swiper	• Usage • Preview
  Text	• Usage • Preview
  WaterDrop	• Usage • Preview

Installation

npm install react-native-flixcomponent --save

// or using yarn

yarn add react-native-flixcomponent

Components

Accordion

Pure JS Accordion component with animated transition

Accordion Usage

import React from "react";
import { Text, TouchableOpacity } from "react-native";
import { Accordion } from "FlixComponent";

export default () => {
  const [IsExpand, setIsExpand] = React.useState(false);
  return (
    <Accordion
      expanded={IsExpand}
      renderTitle={
        <TouchableOpacity onPress={() => setIsExpand(!IsExpand)}>
          <Text style={{ fontSize: 20, fontWeight: "bold" }}>
            {IsExpand ? "Click Me to hide" : "Click Me to expand"}
          </Text>
        </TouchableOpacity>
      }
    >
      <Text>detail</Text>
    </Accordion>;
  );
};

Images

Pure JS Images with auto height (or width) based on ratio of an image

Images Usage

import React from 'react';
import { Images } from 'FlixComponent';

export default () => {
  return (
    <Images
      source={'https://picsum.photos/400/200'}
      width={400}
      loadingWaterDrop
    />
  );
};

Picker

Pure JS Picker with scrolling animation and customizable content

Picker Usage

import React from 'react';
import { Picker } from 'FlixComponent';

export default () => {
  return (
    <Picker
      data={Array.from({ length: 10 }, (_, i) => i + 1)}
      style={{ maxHeight: 300 }}
      highlightStyle={{ backgroundColor: 'blue', borderRadius: 15 }}
      onChange={(val) => console.log('read', val)}
    />
  );
};

ScrollPicker

Enhance Picker Component with scrolling animation and customizable content

ScrollPicker Usage

import React from 'react';
import { ScrollPicker } from 'FlixComponent';

export default () => {
  return <ScrollPicker showDate style={{ maxHeight: 300 }} />;
};

ScrollPicker Preview [on development]

Swiper

Pure JS list images with horizontal scrolling

Swiper Usage

import React from 'react';
import { Swiper } from 'FlixComponent';

export default () => {
  return (
    <Swiper
      data={[
        'https://picsum.photos/500/200',
        'https://picsum.photos/500/200',
        'https://picsum.photos/500/200',
      ]}
    />
  );
};

Text

Text Wrapper

Text Usage

import React from 'react';
import { Text } from 'FlixComponent';

export default () => {
  return <Text fontSize={'XXL'}>Awesome Text</Text>;
};

WaterDrop

Pure JS animated loading like water drop

WaterDrop Usage

import React from 'react';
import { WaterDrop } from 'FlixComponent';

export default () => {
  return <WaterDrop size={15} />;
};