-
Documentation : Detail props, preview and example with Try It at
View Code -
npm install react-native-flixcomponent --save
// or using yarn
yarn add react-native-flixcomponent
Pure JS Accordion component with animated transition
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>;
);
};
Pure JS Images with auto height (or width) based on ratio of an image
import React from "react";
import { Images } from "FlixComponent";
export default () => {
return (
<Images
source={"https://picsum.photos/400/200"}
width={400}
loadingWaterDrop
/>
);
};Pure JS Picker with scrolling animation and customizable content
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)}
/>
);
};
Enhance Picker Component with scrolling animation and customizable content
import React from "react";
import { ScrollPicker } from "FlixComponent";
export default () => {
return <ScrollPicker showDate style={{ maxHeight: 300 }} />;
};
Pure JS list images with horizontal scrolling
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 Wrapper
import React from "react";
import { Text } from "FlixComponent";
export default () => {
return <Text fontSize={"XXL"}>Awesome Text</Text>;
};
Pure JS animated loading like water drop
import React from "react";
import { WaterDrop } from "FlixComponent";
export default () => {
return <WaterDrop size={15} />;
};