rn-value-picker v1.0.4

rn-value-picker

React native value picker is a simple measurement's unit value picker with defined range .

Installation

Install rn-value-picker with npm

  npm install rn-value-picker

Usage

How to use ? :thinking:

import { View, Text, TouchableOpacity } from "react-native";
import React, { useState } from "react";
import ValuePicker from "rn-value-picker";

const App = () => {
  //states
  const [showPicker, setShowPicker] = useState(false);
  const [myHeight, setMyHeight] = useState("");
  //UI
  return (
    <View
      style={{
        flex: 1,
      }}
    >
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <TouchableOpacity
          onPress={() => setShowPicker(true)}
          style={{
            height: 50,
            backgroundColor: "red",
            justifyContent: "center",
            alignItems: "center",
            width: "50%",
            borderRadius: 10,
          }}
        >
          <Text
            style={{
              color: "white",
              fontSize: 18,
              fontWeight: "bold",
            }}
          >
            App {myHeight}
          </Text>
        </TouchableOpacity>
      </View>
      {/* use here before last view end  */}
      <ValuePicker
        visible={showPicker}
        setVisibility={setShowPicker}
        Title="Your Weight"
        unit="kg"
        minValue={20}
        maxValue={150}
        setValue={setMyHeight}
      />
    </View>
  );
};

export default App;

Screenshots

List of props that you can use :-

Authors

• @lalitpatel11