https://github.com/lfkwtz/react-native-ruler

📏 A devtool for measuring pixel dimensions on your React Native screens
https://github.com/lfkwtz/react-native-ruler

devtools expo measure react react-native ruler

Last synced: 3 months ago
JSON representation

📏 A devtool for measuring pixel dimensions on your React Native screens

• Host: GitHub
• URL: https://github.com/lfkwtz/react-native-ruler
• Owner: lfkwtz
• License: mit
• Created: 2018-12-30T13:25:40.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T22:35:15.000Z (about 2 years ago)
• Last Synced: 2024-04-26T05:34:48.192Z (9 months ago)
• Topics: devtools, expo, measure, react, react-native, ruler
• Language: JavaScript
• Homepage:
• Size: 2.44 MB
• Stars: 34
• Watchers: 2
• Forks: 3
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-ruler ★3 - A devtool for measuring pixel dimensions on your React Native screens (Utilities / Other Platforms)
• awesome-react-native - react-native-ruler ★3 - A devtool for measuring pixel dimensions on your React Native screens (Utilities / Other Platforms)
• awesome-react-native - react-native-ruler ★3 - A devtool for measuring pixel dimensions on your React Native screens (Utilities / Other Platforms)
• awesome-react-native - react-native-ruler ★3 - A devtool for measuring pixel dimensions on your React Native screens (Utilities / Other Platforms)

README

        
# react-native-ruler

[![npm version](https://badge.fury.io/js/react-native-ruler.svg)](https://badge.fury.io/js/react-native-ruler)

📏 A devtool for measuring pixel dimensions on your React Native screens

![iOS Example](./demo.gif)

This is a proof of concept I threw together on a flight. Eventual plans are to integrate within the devtools menu, support rotating the device, allow the bars to be on any of the 4 sides of the device, etc..

Happy to take PRs or suggestions.

## Getting Started

### Installing

`npm install react-native-ruler`

### Usage

```js

// first, import the component

import { RNRuler } from 'react-native-ruler';

// then drop it on any screen in your app (or in the root)

;

```

-   Tap the bottom right corner of the ruler (or two-finger tap the bar) to swap between axis

## License

react-native-ruler is [MIT licensed](https://github.com/lfkwtz/react-native-ruler/tree/master/LICENSE)