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.4 to 0.0.5
| { | ||
| "name": "react-native-ruler", | ||
| "version": "0.0.4", | ||
| "description": "", | ||
| "license": "MIT", | ||
| "author": "Michael Lefkowitz <lefkowitz.michael@gmail.com>", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/lfkwtz/react-native-ruler.git" | ||
| }, | ||
| "main": "src/index.js", | ||
| "keywords": [ | ||
| "devtools", | ||
| "measure", | ||
| "ruler", | ||
| "react", | ||
| "react-native", | ||
| "react native" | ||
| ], | ||
| "files": [ | ||
| "README.md", | ||
| "src/index.js" | ||
| ] | ||
| } | ||
| "name": "react-native-ruler", | ||
| "version": "0.0.5", | ||
| "description": "A devtool for measuring pixel dimensions on your React Native screens", | ||
| "license": "MIT", | ||
| "author": "Michael Lefkowitz <lefkowitz.michael@gmail.com>", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/lfkwtz/react-native-ruler.git" | ||
| }, | ||
| "main": "src/index.js", | ||
| "keywords": [ | ||
| "devtools", | ||
| "measure", | ||
| "ruler", | ||
| "react", | ||
| "react-native", | ||
| "react native" | ||
| ], | ||
| "files": [ | ||
| "README.md", | ||
| "src/index.js" | ||
| ], | ||
| "devDependencies": { | ||
| "eslint-config-ls-react": "https://github.com/lawnstarter/eslint-config-ls-react#2.0.3", | ||
| "husky": "^0.14.3", | ||
| "prettier": "^1.15.3", | ||
| "pretty-quick": "^1.8.0", | ||
| "prop-types": "^15.6.2", | ||
| "react": "16.6.1", | ||
| "react-native": "0.57.7" | ||
| }, | ||
| "scripts": { | ||
| "precommit": "pretty-quick --staged", | ||
| "prettier:debug-check": "prettier --config ./.prettierrc.js --debug-check \"{src,test}/**/*.js\"", | ||
| "preprettier:all": "yarn run prettier:debug-check", | ||
| "prettier:all": "prettier --config ./.prettierrc.js --write \"{src,test}/**/*.js\"" | ||
| } | ||
| } |
@@ -5,12 +5,12 @@ # react-native-ruler | ||
| A devtool for measuring dimensions on your React Native apps | ||
| A devtool for measuring pixel dimensions on your React Native screens | ||
|  | ||
| ````js | ||
| ```js | ||
| // first, import the component | ||
| import { RNRuler } from "react-native-ruler"; | ||
| import { RNRuler } from 'react-native-ruler'; | ||
| // then drop it on any screen in your app (or in the root) | ||
| <RNRuler /> | ||
| ```` | ||
| <RNRuler />; | ||
| ``` |
206
src/index.js
@@ -1,200 +0,16 @@ | ||
| import React, { PureComponent } from "react"; | ||
| import { Dimensions, Text, View, PanResponder, Animated } from "react-native"; | ||
| // import _ from "lodash"; | ||
| import React, { PureComponent } from 'react'; | ||
| import { Dimensions, View } from 'react-native'; | ||
| import { MeasureY } from './MeasureY'; | ||
| // import { MeasureX } from "./MeasureX"; | ||
| const { width, height } = Dimensions.get("screen"); | ||
| const { width, height } = Dimensions.get('screen'); | ||
| export class RNRuler extends PureComponent { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| pan: new Animated.ValueXY(), | ||
| // pan2: new Animated.ValueXY(), | ||
| yLine: 0 | ||
| }; | ||
| this._val = { 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.panResponder = PanResponder.create({ | ||
| onStartShouldSetPanResponder: (e, gesture) => true, | ||
| onPanResponderMove: Animated.event([ | ||
| null, | ||
| { | ||
| // dx: this.state.pan.x, | ||
| dy: this.state.pan.y | ||
| } | ||
| ]), | ||
| onPanResponderRelease: (e, gesture) => { | ||
| 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(); | ||
| } | ||
| }); | ||
| // 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(); | ||
| // } | ||
| // }); | ||
| } | ||
| modifyHorizonalAlignment({ tick }) { | ||
| if (tick < 10) { | ||
| return { alignItems: "flex-start" }; | ||
| } else if (tick > width - 10) { | ||
| return { alignItems: "flex-end" }; | ||
| render() { | ||
| return ( | ||
| <View style={{ height, width, position: 'absolute' }}> | ||
| <MeasureY /> | ||
| </View> | ||
| ); | ||
| } | ||
| } | ||
| // modifyVerticalAlignment({ tick }) { | ||
| // if (tick < 10) { | ||
| // return { alignItems: "flex-end" }; | ||
| // } else if (tick > height - 10) { | ||
| // return { alignItems: "flex-start" }; | ||
| // } | ||
| // } | ||
| renderHorizontalRulerTicks() { | ||
| const ticks = [0, width * 0.25, width * 0.5, width * 0.75, width]; | ||
| return ticks.map(tick => { | ||
| return ( | ||
| <View | ||
| key={tick} | ||
| style={[ | ||
| { alignItems: "center" }, | ||
| this.modifyHorizonalAlignment({ 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> | ||
| // ); | ||
| // }); | ||
| // } | ||
| render() { | ||
| const panStyle = { | ||
| transform: this.state.pan.getTranslateTransform() | ||
| }; | ||
| // const panStyle2 = { | ||
| // transform: this.state.pan2.getTranslateTransform() | ||
| // }; | ||
| return ( | ||
| <View style={{ height, width, position: "absolute" }}> | ||
| <Text | ||
| style={{ | ||
| position: "absolute", | ||
| top: this.state.yLine - 15 | ||
| }} | ||
| > | ||
| {this.state.yLine.toFixed(2)} | ||
| </Text> | ||
| <View | ||
| style={{ | ||
| position: "absolute", | ||
| width, | ||
| 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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
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
- Number of lines in readme file
- increased by6.67%
16
Worsened metrics
- Total package byte prevSize
- decreased by-66.19%
2074
- Dev dependency count
- increased byInfinity%
7
- Lines of code
- decreased by-92.47%
14
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes