عکس MohamadKh75
📐 Customizable animated ruler for react-native 📏 ✨TypeScript
موضوع‌ها
۱
فورک‌ها
۶
ستاره‌ها
۲۶
تاریخ ایجاد
۳۰ مهر ۱۳۹۸
آخرین بروزرسانی
حدود ۱ ماه قبل
لایسنس
MIT License

react-native-animated-ruler

PRs Welcome   code style: prettier   npm version   DUB


Preview

react-native-animated-ruler

Install

Package Manager Command
yarn yarn add react-native-animated-ruler
npm npm i --save react-native-animated-ruler

Usage

import Ruler from 'react-native-animated-ruler';

<Ruler
  style={{ borderRadius: 10, elevation: 3 }}
  width={350}
  height={170}
  vertical={false}
  onChangeValue={value => alert(value)}
  minimum={10}
  maximum={80}
  segmentWidth={2}
  segmentSpacing={20}
  indicatorColor='#FF0000'
  indicatorWidth={100}
  indicatorHeight={80}
  indicatorBottom={20}
  step={10}
  stepColor='#333333'
  stepHeight={40}
  normalColor='#999999'
  normalHeight={20}
  backgroundColor='#FFFFFF'
  numberFontFamily='System'
  numberSize={40}
  numberColor='#000000'
  unit='cm'
  unitBottom={20}
  unitFontFamily='System'
  unitColor='#888888'
  unitSize={16}
/>;

Properties

Prop Default Type
style {} ViewStyle
vertical false boolean
width screen's width number
height screen's height * 0.23 number
onChangeValue () => {} function
minimum 0 number
maximum 100 number
segmentWidth 2 number
segmentSpacing 20 number
indicatorColor '#FF0000' string
indicatorWidth 100 number
indicatorHeight 80 number
indicatorBottom 20 number
step 10 number
stepColor '#333333' string
stepHeight 40 number
normalColor '#999999' string
normalHeight 20 number
backgroundColor '#FFFFFF' string
numberFontFamily 'System' string
numberSize 40 number
numberColor '#000000' string
unit 'cm' string
unitBottom screen's height * 0.027 number
unitFontFamily 'System' string
unitColor '#888888' string
unitSize 16 number

Example

Take a look at example:

git clone https://github.com/MohamadKh75/react-native-animated-ruler.git

cd example

yarn

react-native run-android

# OR

react-native run-ios

Credit

This library is based on awesome Youtube video by Catalin Miron

License

MIT