react-native-flixcomponent v1.1.2-next

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>;
  );
};

Accordion Preview

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
    />
  );
};

Images Preview

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)}
    />
  );
};

Picker Preview

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",
      ]}
    />
  );
};

Swiper Preview

Text

Text Wrapper

Text Usage

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

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

Text Preview

WaterDrop

Pure JS animated loading like water drop

WaterDrop Usage

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

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

WaterDrop Preview