react-native-beautiful-horizontal-list

0.1.2 • Public • Published
React Native Beautiful Horizontal List

Fully customizable and easy to use beautifully designed horizontal list for React Native.

npm version npm Platform - Android and iOS License: MIT styled with prettier

React Native Beautiful Horizontal List

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.

Package Sidebar

Install

npm i react-native-beautiful-horizontal-list

Weekly Downloads

2

Version

0.1.2

License

MIT

Unpacked Size

10.4 kB

Total Files

8

Last publish

Collaborators

  • freakycoder