react-native-layout-debug

Install

$ npm i --save react-native-layout-debug babel-plugin-transform-decorators-legacy

Usage

Install and import the module inside your code. Update your .babelrc config and add babel-plugin-transform-decorators-legacy as a plugin.

import reactNativeLayoutDebug from 'react-native-layout-debug';

To debug a layout component, you should call the debug(color) method inside the prop style={}.

The debug(color) accepts a color to use as a border or background. If not provided will pick a random color from the list, normally you should specify a color by the name from the list, Eg: debug('red'). See the defaultColors.

If you don't like the default colors, you can provide an object of colors to the Debugger, see the customization section.

class HelloWorld extends Component {
    // Using a custom config {style: 'background', colors: colorListObject}
    // @reactNativeDebug({style: 'background', colors: colorListObject})
    // Using the default config {style: 'border', borderWidth: 3, colors: defaultColors}.
    @reactNativeLayoutDebug
    render(debug) {
        return (
            <View style={[debug('red')]}>
                <Text>Hey!</Text>
            </View>
        );
    }
}

Customization

The debugger could be customized via an object with these three properties: style, colors and borderWidth.

style

Specifies the style to use when debugging the layout, accepts two values:

• border: Default option, uses borders to debug the layout elements.
• background: Uses background to debug the layout elements.

colors

An object of colors that will be used by the debug. Look at defaultColors.js to see the default colors and the object used.

borderWidth

The borderWidth unit to use as border, by default is set to 3.

Demo