Installation

Add the dependency:

npm i react-native-beautiful-horizontal-list

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",

Usage

Import

import BeautifulHorizontalList from "react-native-beautiful-horizontal-list";

Basic Usage

<BeautifulHorizontalList data={yourDataArray} />

Data Format

Data format MUST like this. It will handle the colors and all the other props from data itself.

const staticData = [
  {
    title: "Running",
    value: "8,984",
    unit: "Steps",
    primaryColor: "#10CFE4",
    imageSource: require("./assets/run.png"),
  },
  {
    title: "Cycling",
    value: "2.6",
    unit: "Mil",
    primaryColor: "#c84cf0",
    imageSource: require("./assets/cyclist-silhouette.png"),
  },
  {
    title: "Swimming",
    value: "9501",
    unit: "Stoke",
    primaryColor: "#10E471",
    imageSource: require("./assets/swimmer.png"),
  },
];

Configuration - Props

Property	Type	Default	Description
TextComponent	component	Text	set your own Text component if you do not want to use default Text
ImageComponent	component	Image	set your own Image component if you do not want to use default Image
itemContainerStyle	style	default	set or override the original item container style
titleTextStyle	style	default	set or override the original title text style
valueTextStyle	style	default	set or override the original value text style
unitTextStyle	style	default	set or override the original unit text style

Future Plans

• LICENSE
• Typescript Challenge!
• Write an article about the lib on Medium

Credits

Photo by Ayo Ogunseinde on Unsplash

Icons are from Flaticon.com 😋

Heavily inspired by Faria Anzum 😍

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Beautiful Horizontal List is available under the MIT license. See the LICENSE file for more info.