# react-native-key-value-pair-view
> Key Value Pair View for React Native
Latest version **0.0.6** (published 2019-10-29) · BSD license · 0 weekly downloads
## Install
```sh
npm install react-native-key-value-pair-view
pnpm add react-native-key-value-pair-view
yarn add react-native-key-value-pair-view
bun add react-native-key-value-pair-view
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.6 |
| Published | 2019-10-29 |
| First published | 2019-10-24 |
| Weekly downloads | 0 |
| License | BSD |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vijay.Apple.Dev@gmail.com |
| Maintainers | vijayappledev |
| Keywords | React Native, key, value, display, left, right, pair, price, cost, form, id, value, key value, key value pair, key value display, left right display, left right view, value key pair, pair key value, key value view, key view, value view, pair view, key value left right, key value right left, side by side, two column, 2 column, 1 row, label, value, Vijay.Apple.Dev@gmail.com, +91 9585185595, vijay-apple-dev.blogspot.com, fullstackdeveloper-vijay.blogspot.com, http://vijay-apple-dev.blogspot.com, http://fullstackdeveloper-vijay.blogspot.com |
## Links
- npm: https://www.npmjs.com/package/react-native-key-value-pair-view
- npm.io page: https://npm.io/package/react-native-key-value-pair-view
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 0.0.6 (latest) — 2019-10-29
- 0.0.5 — 2019-10-29
- 0.0.4 — 2019-10-29
- 0.0.3 — 2019-10-29
- 0.0.2 — 2019-10-24
- 0.0.1 — 2019-10-24
## README
# Are you looking for "React" component?
[react-key-value-pair-view](https://www.npmjs.com/package/react-key-value-pair-view)
# React Native - Output
# Usage
## Global Config can be applied to the App.
*You could use the KeyValuePairView with the same UI appearance & style in the entire App. In that case you could just use this below global config, that will apply to all KeyValuePairView component. You could use the "isDebugging" for seeing the key,value boxes with background colors.*
import KeyValuePairView from 'react-native-key-value-pair-view'
// will apply the background color to see the key box, value box, container box. So that debugging is easy.
KeyValuePairView.isDebugging = true
// Available Display Modes
LeftRight,
LeftLeft,
RightLeft,
RightRight
// will set the default display mode
KeyValuePairView.defaultDisplayMode = KeyValuePairView.DisplayMode.LeftRight//LeftLeft//RightLeft//RightRight
// will set the default key value gap
KeyValuePairView.defaultKeyValueGap = 5
// will set the default vertical gap between 2 adjuscent KeyValuePairView
KeyValuePairView.defaultSiblingGapVertical = 2
// will set the default left right gap to KeyValuePairView
KeyValuePairView.defaultSiblingGapHorizontal = 4
// will set the default key box background color
KeyValuePairView.defaultKeyBoxBackgroundColor = "#d2d2d2"
// will set the default value box background color
KeyValuePairView.defaultValueBoxBackgroundColor = "#d2d2d2"
// will set the default root container/gap box background color
KeyValuePairView.defaultKeyValueBoxContainerBackgroundColor = "#d2d2d2"
// will set default styles for Key Text, should be an array
KeyValuePairView.defaultKeyStyles = [{ color: 'red', fontSize: 12 }]
// will set default styles for Value Text, should be an array
KeyValuePairView.defaultValueStyles = [{ color: 'blue', fontSize: 12 }]
----
----
## Key value displaying
## Handling Touch Event
// handling touch action in your component
keyValueBoxPressed = (data) => {
const { id, payload, keyData, valueData } = data;
// id = KeyValuePairView1
// payload = extra payload string or object
// keyData = iOS Developer
// valueData = http://vijay-apple-dev.blogspot.com
};
----
## Note on Style props
*All style props should be passed in Array format, refer the below "keyStyles", to an example.*
## Note on KeyValuePairView Parent
*"KeyValuePairView" Parent's & Ancestors style should have flex:1 to make KeyValuePairView as flexible*
## Pass My custom Key/Value component
iPhone} valueData="$343"/>
$343}/>
*if you pass your custom component to either key or value, then you are having full control on it, like adding action, etc., Don't forget to style the "textAlign" based on your needs inside your custom component.*
## Available props
id, // specific id to this KeyValuePairView
payload, // extra data to receive while touch action, can be anything, string or object
keyBoxStyles = [],
valueBoxStyles = [],
keyStyles = [],
valueStyles = [],
keyValueBoxStyles = [],
keyData,// Key text
valueData, // Value text
leftChild, // Custom key component
rightChild, // Custom value component
keyValueGap = KeyValuePairView.defaultKeyValueGap,// Gap between Key & Value Boxes
siblingGapVertical = KeyValuePairView.defaultSiblingGapVertical//Top Bottom gap,
siblingGapHorizontal = KeyValuePairView.defaultSiblingGapHorizontal,// Left Right gap
keyBoxPercent = 50,// Key box space in percentage
valueBoxPercent = 50,// Value box space in percentage
displayMode = KeyValuePairView.defaultDisplayMode// Display mode "RightLeft","LeftRight",etc.,
onKeyValueBoxAction, // callback function to receive touch event
## Issues / Improvements
You could contact me at Vijay.Apple.Dev@gmail.com
---
_Source: https://npm.io/package/react-native-key-value-pair-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._