Nine Pomeranian Monsters
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-native-layout-debug

1.1.1 • Public • Published

react-native-layout-debug

Travis npm version npm-downloads Code Climate

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

react-native-layout-debug demo

install

npm i react-native-layout-debug

Downloadsweekly downloads

0

version

1.1.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability