0.1.2 • Published 4 years ago
react-native-beautiful-horizontal-list v0.1.2
Installation
Add the dependency:
npm i react-native-beautiful-horizontal-listPeer 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.