Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-native-ruler
Advanced tools
react-native-ruler - npm Package Compare versions
Comparing version 0.0.2 to 0.0.3
| { | ||
| "name": "react-native-ruler", | ||
| "version": "0.0.2", | ||
| "version": "0.0.3", | ||
| "description": "", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
@@ -1,1 +0,12 @@ | ||
| react-native-ruler | ||
| # react-native-ruler | ||
| A devtool for measuring dimensions on your React Native apps | ||
| ````js | ||
| // first, import the component | ||
| import { RNRuler } from "react-native-ruler"; | ||
| // then drop it on any screen in your app (or in the root) | ||
| <RNRuler /> | ||
| ```` |
207
src/index.js
| import React, { PureComponent } from "react"; | ||
| import { Dimensions, Text, View, PanResponder, Animated } from "react-native"; | ||
| // import _ from "lodash"; | ||
@@ -12,10 +13,11 @@ const { width, height } = Dimensions.get("screen"); | ||
| pan: new Animated.ValueXY(), | ||
| pan2: new Animated.ValueXY() | ||
| // pan2: new Animated.ValueXY(), | ||
| yLine: 0 | ||
| }; | ||
| this._val = { x: 0, y: 0 }; | ||
| this._val2 = { x: 0, y: 0 }; | ||
| // this._val2 = { x: 0, y: 0 }; | ||
| this.state.pan.addListener(value => (this._val = value)); | ||
| this.state.pan2.addListener(value => (this._val = value)); | ||
| // this.state.pan2.addListener(value => (this._val = value)); | ||
@@ -32,3 +34,5 @@ this.panResponder = PanResponder.create({ | ||
| onPanResponderRelease: (e, gesture) => { | ||
| console.log("moveY", gesture.moveY); | ||
| const yLine = height + gesture.dy - 30; | ||
| console.log("y location", yLine); | ||
| this.setState({ yLine }); | ||
| Animated.spring(this.state.pan, { toValue: { x: 0, y: 0 } }).start(); | ||
@@ -38,16 +42,16 @@ } | ||
| this.panResponder2 = PanResponder.create({ | ||
| onStartShouldSetPanResponder: (e, gesture) => true, | ||
| onPanResponderMove: Animated.event([ | ||
| null, | ||
| { | ||
| dx: this.state.pan2.x | ||
| // dy: this.state.pan2.y | ||
| } | ||
| ]), | ||
| onPanResponderRelease: (e, gesture) => { | ||
| console.log("moveX", gesture.moveX); | ||
| Animated.spring(this.state.pan2, { toValue: { x: 0, y: 0 } }).start(); | ||
| } | ||
| }); | ||
| // this.panResponder2 = PanResponder.create({ | ||
| // onStartShouldSetPanResponder: (e, gesture) => true, | ||
| // onPanResponderMove: Animated.event([ | ||
| // null, | ||
| // { | ||
| // dx: this.state.pan2.x | ||
| // // dy: this.state.pan2.y | ||
| // } | ||
| // ]), | ||
| // onPanResponderRelease: (e, gesture) => { | ||
| // console.log("moveX", gesture.moveX); | ||
| // Animated.spring(this.state.pan2, { toValue: { x: 0, y: 0 } }).start(); | ||
| // } | ||
| // }); | ||
| } | ||
@@ -63,9 +67,9 @@ | ||
| modifyVerticalAlignment({ tick }) { | ||
| if (tick < 10) { | ||
| return { alignItems: "flex-end" }; | ||
| } else if (tick > height - 10) { | ||
| return { alignItems: "flex-start" }; | ||
| } | ||
| } | ||
| // modifyVerticalAlignment({ tick }) { | ||
| // if (tick < 10) { | ||
| // return { alignItems: "flex-end" }; | ||
| // } else if (tick > height - 10) { | ||
| // return { alignItems: "flex-start" }; | ||
| // } | ||
| // } | ||
@@ -90,19 +94,19 @@ renderHorizontalRulerTicks() { | ||
| renderVerticalRulerTicks() { | ||
| const ticks = [0, height * 0.25, height * 0.5, height * 0.75, height]; | ||
| return ticks.map(tick => { | ||
| return ( | ||
| <View | ||
| key={tick} | ||
| style={[ | ||
| { alignItems: "center", transform: [{ rotate: "-90deg" }] }, | ||
| this.modifyVerticalAlignment({ tick }) | ||
| ]} | ||
| > | ||
| <View style={{ width: 1, height: 10, backgroundColor: "black" }} /> | ||
| <Text>{tick}</Text> | ||
| </View> | ||
| ); | ||
| }); | ||
| } | ||
| // renderVerticalRulerTicks() { | ||
| // const ticks = [0, height * 0.25, height * 0.5, height * 0.75, height]; | ||
| // return ticks.map(tick => { | ||
| // return ( | ||
| // <View | ||
| // key={tick} | ||
| // style={[ | ||
| // { alignItems: "center", transform: [{ rotate: "-90deg" }] }, | ||
| // this.modifyVerticalAlignment({ tick }) | ||
| // ]} | ||
| // > | ||
| // <View style={{ width: 1, height: 10, backgroundColor: "black" }} /> | ||
| // <Text>{tick}</Text> | ||
| // </View> | ||
| // ); | ||
| // }); | ||
| // } | ||
@@ -114,46 +118,89 @@ render() { | ||
| const panStyle2 = { | ||
| transform: this.state.pan2.getTranslateTransform() | ||
| }; | ||
| // const panStyle2 = { | ||
| // transform: this.state.pan2.getTranslateTransform() | ||
| // }; | ||
| return ( | ||
| // <View> | ||
| <Animated.View | ||
| {...this.panResponder.panHandlers} | ||
| style={[ | ||
| panStyle, | ||
| { | ||
| <View style={{ height, width, position: "absolute" }}> | ||
| <Text | ||
| style={{ | ||
| position: "absolute", | ||
| bottom: 0, | ||
| right: 0, | ||
| top: this.state.yLine - 15 | ||
| }} | ||
| > | ||
| {this.state.yLine.toFixed(2)} | ||
| </Text> | ||
| <View | ||
| style={{ | ||
| position: "absolute", | ||
| width, | ||
| height: 30, | ||
| backgroundColor: "yellow", | ||
| justifyContent: "space-between", | ||
| flexDirection: "row" | ||
| } | ||
| ]} | ||
| > | ||
| {this.renderHorizontalRulerTicks()} | ||
| </Animated.View> | ||
| // <Animated.View | ||
| // {...this.panResponder2.panHandlers} | ||
| // style={[ | ||
| // panStyle2, | ||
| // { | ||
| // position: "absolute", | ||
| // bottom: 0, | ||
| // right: 0, | ||
| // width: 30, | ||
| // height, | ||
| // backgroundColor: "yellow", | ||
| // justifyContent: "space-between" | ||
| // } | ||
| // ]} | ||
| // > | ||
| // {this.renderVerticalRulerTicks()} | ||
| // </Animated.View> | ||
| // </View> | ||
| height: 1, | ||
| backgroundColor: "black", | ||
| top: this.state.yLine | ||
| }} | ||
| /> | ||
| <Text | ||
| style={{ | ||
| position: "absolute", | ||
| top: this.state.yLine | ||
| }} | ||
| > | ||
| {this.state.yLine.toFixed(2)} | ||
| </Text> | ||
| <Animated.View | ||
| {...this.panResponder.panHandlers} | ||
| style={[ | ||
| panStyle, | ||
| { | ||
| position: "absolute", | ||
| bottom: 0, | ||
| right: 0, | ||
| width, | ||
| zIndex: 10 | ||
| } | ||
| ]} | ||
| > | ||
| <View | ||
| style={{ | ||
| backgroundColor: "black", | ||
| height: 1 | ||
| }} | ||
| /> | ||
| <View | ||
| style={{ | ||
| backgroundColor: "yellow", | ||
| justifyContent: "space-between", | ||
| flexDirection: "row", | ||
| height: 28 | ||
| }} | ||
| > | ||
| {this.renderHorizontalRulerTicks()} | ||
| </View> | ||
| <View | ||
| style={{ | ||
| backgroundColor: "black", | ||
| height: 1 | ||
| }} | ||
| /> | ||
| </Animated.View> | ||
| {/* <Animated.View | ||
| {...this.panResponder2.panHandlers} | ||
| style={[ | ||
| panStyle2, | ||
| { | ||
| position: "absolute", | ||
| bottom: 0, | ||
| right: 0, | ||
| width: 30, | ||
| height, | ||
| backgroundColor: "yellow", | ||
| justifyContent: "space-between" | ||
| } | ||
| ]} | ||
| > | ||
| {this.renderVerticalRulerTicks()} | ||
| </Animated.View> */} | ||
| </View> | ||
| ); | ||
| } | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by32.36%
5996
- Lines of code
- increased by33.81%
186
- Number of lines in readme file
- increased by1100%
12
No dependency changes