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

• [x] ~~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, [email protected]

License

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