Skip to content

Stylesheet that helps you debug layout problems in react-native, because we're all still not that good at flexbox

Notifications You must be signed in to change notification settings

brentvatne/react-native-debug-stylesheet

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-debug-stylesheet

When you want to debug layout problems, use this instead of the normal StyleSheet to get coloured borders (or backgrounds) around views that are affected by the stylesheet.

Demo

Add it to your project

  1. Run npm install react-native-debug-stylesheet --save
  2. When you want to debug a layout problem, do something like this:
var { PixelRatio, StyleSheet } = require('react-native');
// Drop this in to override the above StyleSheet var and use the
// DebugStyleSheet class instead.
var StyleSheet = require('react-native-debug-stylesheet');

// Business as usual
StyleSheet.create({
  // ....
});

If you prefer to use coloured backgrounds, then do this:

var StyleSheet = require('react-native-debug-stylesheet').Backgrounds;

Customize

If you'd rather make your own debug stylesheet than use the default border/background color options, you can do this easily too.

var { createDebugStylesheet, randomHexColor } = require('react-native-debug-stylesheet');

var doubleHeaderFontSize = function(styleClass, cssProperty, cssValue) {
  if (cssValue && styleClass.match(/header/)) {
    return cssValue * 2;
  }
  return cssValue;
}

var StyleSheet = createDebugStylesheet({
  backgroundColor: randomHexColor, fontSize: doubleHeaderFontSize,
  borderColor: randomHexColor, borderWidth: 0.5,
});

MIT Licensed

About

Stylesheet that helps you debug layout problems in react-native, because we're all still not that good at flexbox

Resources

Stars

Watchers

Forks

Packages

No packages published