react-native-ruler - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
     "name": "react-native-ruler",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "A devtool for measuring pixel dimensions on your React Native screens",
@@ -5,0 +5,0 @@ "license": "MIT",

src/index.js

 import React, { PureComponent } from 'react';
-import { Dimensions, View } from 'react-native';
+import { View } from 'react-native';
 import { MeasureY } from './MeasureY';
 // import { MeasureX } from "./MeasureX";
+// TODO: finish MeasureX
 
-const { width, height } = Dimensions.get('screen');
-
 export class RNRuler extends PureComponent {
     render() {
         return (
-            <View style={{ height, width, position: 'absolute' }}>
+            <View style={{ height: '100%', width: '100%', position: 'absolute' }}>
+                {/* <MeasureX /> */}
                 <MeasureY />
@@ -13,0 +13,0 @@ </View>

src/MeasureX.js

 import React, { PureComponent } from 'react';
-import { Animated, Dimensions, PanResponder, Text, View } from 'react-native';
+import { Animated, Dimensions, PanResponder, StyleSheet, Text, View } from 'react-native';
 
@@ -74,7 +74,9 @@ const { width, height } = Dimensions.get('screen');
         return (
-            <View style={{ height, width, position: 'absolute' }}>
+            <View style={{ height: '100%', width: '100%', position: 'absolute' }}>
                 <Text
                     style={{
                         position: 'absolute',
-                        right: xLine - 15,
+                        left: xLine - 15,
+                        top: 15,
+                        transform: [{ rotate: '90deg' }],
                     }}
@@ -96,3 +98,5 @@ >
                         position: 'absolute',
-                        right: xLine,
+                        left: xLine - 30,
+                        top: 15,
+                        transform: [{ rotate: '90deg' }],
                     }}
@@ -110,4 +114,3 @@ >
                             right: 0,
-                            height,
-                            flexDirection: 'row',
+                            height: '100%',
                             zIndex: 10,
@@ -119,10 +122,9 @@ },
                         style={{
-                            backgroundColor: 'black',
-                            width: 1,
-                        }}
-                    />
-                    <View
-                        style={{
                             backgroundColor: 'yellow',
-                            width: 28,
+                            width: 30,
+                            height,
+                            borderLeftColor: 'black',
+                            borderRightColor: 'black',
+                            borderLeftWidth: 1,
+                            borderRightWidth: 1,
                         }}
@@ -132,8 +134,2 @@ >
                     </View>
-                    <View
-                        style={{
-                            backgroundColor: 'black',
-                            width: 1,
-                        }}
-                    />
                 </Animated.View>
@@ -144,1 +140,10 @@ </View>
 }
+
+const defaultStyles = StyleSheet.create({
+    lineText: {
+        position: 'absolute',
+        textAlign: 'center',
+        width: '100%',
+        fontWeight: 'bold',
+    },
+});

src/MeasureY.js

 import React, { PureComponent } from 'react';
-import { Animated, Dimensions, PanResponder, Text, View } from 'react-native';
+import { Animated, Dimensions, PanResponder, StyleSheet, Text, View } from 'react-native';
 
@@ -40,20 +40,18 @@ const { width, height } = Dimensions.get('screen');
 
-    modifyHorizonalAlignment({ tick }) {
-        if (tick < 10) {
+    modifyAlignment({ mark }) {
+        if (mark === 0) {
             return { alignItems: 'flex-start' };
-        } else if (tick > width - 10) {
+        } else if (mark === width) {
             return { alignItems: 'flex-end' };
         }
+        return { alignItems: 'center' };
     }
 
-    renderHorizontalRulerTicks() {
-        const ticks = [0, width * 0.25, width * 0.5, width * 0.75, width];
-        return ticks.map((tick) => {
+    renderHatchMarks() {
+        const marks = [0, width * 0.25, width * 0.5, width * 0.75, width];
+        return marks.map((mark) => {
             return (
-                <View
-                    key={tick}
-                    style={[{ alignItems: 'center' }, this.modifyHorizonalAlignment({ tick })]}
-                >
+                <View key={mark} style={[{ width: 50 }, this.modifyAlignment({ mark })]}>
                     <View style={{ width: 1, height: 10, backgroundColor: 'black' }} />
-                    <Text>{tick}</Text>
+                    <Text>{mark}</Text>
                 </View>
@@ -72,8 +70,10 @@ );
         return (
-            <View style={{ height, width, position: 'absolute' }}>
+            <View style={{ height: '100%', width: '100%', position: 'absolute' }}>
                 <Text
-                    style={{
-                        position: 'absolute',
-                        top: yLine - 15,
-                    }}
+                    style={[
+                        defaultStyles.lineText,
+                        {
+                            top: yLine - 15,
+                        },
+                    ]}
                 >
@@ -85,3 +85,3 @@ {yLine.toFixed(2)}
                         position: 'absolute',
-                        width,
+                        width: '100%',
                         height: 1,
@@ -93,6 +93,8 @@ backgroundColor: 'black',
                 <Text
-                    style={{
-                        position: 'absolute',
-                        top: yLine,
-                    }}
+                    style={[
+                        defaultStyles.lineText,
+                        {
+                            top: yLine,
+                        },
+                    ]}
                 >
@@ -109,3 +111,3 @@ {yLine.toFixed(2)}
                             right: 0,
-                            width,
+                            width: '100%',
                             zIndex: 10,
@@ -117,22 +119,14 @@ },
                         style={{
-                            backgroundColor: 'black',
-                            height: 1,
-                        }}
-                    />
-                    <View
-                        style={{
                             backgroundColor: 'yellow',
                             justifyContent: 'space-between',
                             flexDirection: 'row',
-                            height: 28,
+                            height: 30,
+                            borderTopColor: 'black',
+                            borderBottomColor: 'black',
+                            borderTopWidth: 1,
+                            borderBottomWidth: 1,
                         }}
                     >
-                        {this.renderHorizontalRulerTicks()}
+                        {this.renderHatchMarks()}
                     </View>
-                    <View
-                        style={{
-                            backgroundColor: 'black',
-                            height: 1,
-                        }}
-                    />
                 </Animated.View>
@@ -143,1 +137,10 @@ </View>
 }
+
+const defaultStyles = StyleSheet.create({
+    lineText: {
+        position: 'absolute',
+        textAlign: 'center',
+        width: '100%',
+        fontWeight: 'bold',
+    },
+});

New alerts

License Policy Violation

License

This 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

License

This 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 risk

Package 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

Improved metrics

Total package byte prevSize

719855

increased by0.04%

Lines of code

296

increased by2.42%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes