No more wrong margins, text sizes and many other silly visual mistakes. React Native UI Blueprint allow to you implements a pixel-perfect design.

Installation

You can install React Native UI Blueprint via Yarn or NPM.

# Yarn
yarn add react-native-ui-blueprint

# NPM
npm i react-native-ui-blueprint --save

After that, simply encapsulate your application with Blueprint and finally tap the bottom left of the device to show Blueprint.

import Blueprint from 'react-native-ui-blueprint';


export default class App extends React.PureComponent {
    render() {
        return (
            <Blueprint>
                <StatusBar backgroundColor={'transparent'} translucent={true} barStyle="dark-content"/>
                <View style={[StyleSheet.absoluteFill, {justifyContent: 'center', alignItems: 'center'}]}>
                    <Text>
                        {'My App'}
                    </Text>
                </View>
            </Blueprint>
        );
    }
}

Reload

For those who are too lazy to shake the phone, when running Packager (on port 8081), lets you reload the application.

Grid

Displays grids on your application, allowing the development of interfaces with regular and homogeneous spacing.

When working in teams, designers often use grid, use this tool to verify design implementation.

<Blueprint            
    grid={[
        {
            spacing: 30
        },
        {
            spacing: 60
        }
    ]}
 >
    ...
</Blueprint>

By default, Blueprint already defines two grids with 8 and 24 dp spacing.

You can completely remove the grid by passing false as parameter.

<Blueprint            
    grid={false}
 >
    ...
</Blueprint>

Alignment

There are 4 horizontal alignment options:

Side

The grid is created from the side, respecting the defined spacing. Useful for validating component spacings and side positions.

Center

The grid is created from the center of the screen, respecting the defined spacing. Used to check centralized alignment of components.

Left and Right

The grid is created from the defined side.

Grid Properties

| name | type | default | Description | |---|---|---|---| | spacing | number | -- | The spacing between grid lines. In dp | | color | string | GRAY:#828282, MAGENTA:#ff4aff or BLUE:#18A0FB| Allows you to set the line color. If not informed, the system will switch between GRAY, BLUE and MAGENTA | | opacity | number | 0.2 + $index * 0.1 | Allows you to set opacity. If not entered, the system automatically calculates a value starting with 0.2 and increasing by 0.1 | | width | number | StyleSheet.hairlineWidth (1 pixel) | Lets you set the line width |

Guides

Displays vertical or horizontal guide lines with specific placement. Unlike the grid, the guides does not repeat and allows you to work with three units of measurement: pixel, dp and percent.

<Blueprint            
    guides={[
        {
            position: 55,
            orientation: 'vertical',
            unit: 'dp'
        },
        {
            position: 616,
            orientation: 'horizontal',
            unit: 'dp',
            color:'#ff4aff'
        },
        {
            position: 580,
            orientation: 'horizontal',
            unit: 'dp',
            color:'#ff4aff'
        }
    ]}
 >
    ...
</Blueprint>

By default Blueprint displays one vertical and one horizontal line, both on 50% of the screen.

You can completely remove the guides by passing false as parameter.

<Blueprint            
    guides={false}
 >
    ...
</Blueprint>

Guides Properties

| name | type | default | Description | |---|---|---|---| | position | number | -- | The positioning of the guide. When the unit is pixel, expect an integer. | | orientation | horizontal or vertical | --| Sets the orientation of the guide | | unit | %, dp orpx | dp | The unit of measurement used to set the guide position | | color | string | BLUE:#18A0FB| Allows you to set the line color. | | opacity | number | 0.2 + $index * 0.1 | Allows you to set opacity. If not entered, the system automatically calculates a value starting with 0.2 and increasing by 0.1 | | width | number | StyleSheet.hairlineWidth (1 pixel) | Lets you set the line width |

Ruler

Adds a scalable ruler to the screen. The ruler is useful for checking component size and distance from the edges of the screen.

Allows you to change the unit of measurement to pixel, dp, or percent.

The ruler also allows you to change the sensitivity to work more accurately. The values are toggled by 1, 0.5 and 0.1.

Ghost

Allows developers and designers put a semi-transparent image overlay over the top of the developed App and perform pixel perfect comparison between them.

You can add local files or configure remote calls asynchronously. With remote calling, you can implement integrations with any Wireframe system that provides an API.

Local files

<Blueprint            
    images={[
        require('./assets/wireframe-1.png'),
        require('./assets/wireframe-2.png')
    ]}
 >
    ...
</Blueprint>

Remote files

If you know the full path of the screen images, just tell uri. Blueprint looks for information about the height and width of the images.

<Blueprint            
    images={[
       {
           uri: 'https://upload.wikimedia.org/wikipedia/commons/4/47/Profilewireframe.png'
       },
        require('./assets/wireframe-1.png'),
        require('./assets/wireframe-2.png')
    ]}
 >
    ...
</Blueprint>

Custom Server

You can also use some private image server. An example implementation, with node.js, is available in the "server" folder.

External integration allows the use of any image service that provides an API for listing and viewing images.

You can look for documentation from services like Zeplin or Figma to do your integrations.

For integration, simply implement an asynchronous function in the imagesAsync property.

Type

type ImageInfoAsync = {
    thumb?: {
        uri: string;
        width?: number;
        height?: number;
    };
    uri: string;
    width?: number;
    height?: number;
    title?: string;
};

const imagesAsynck: () => Promise<Array<ImageInfoAsync>>; 

Sample

<Blueprint            
    imagesAsync={() => {
        const server = 'http://localhost:3000';
        return fetch(`${server}/images.json`)
            .then(resp => resp.json())
            .then(images => {
                images.forEach((image: any) => {
                    image.uri = `${server}/${image.uri}`;
                    image.thumb.uri = `${server}/${image.thumb.uri}`;
                });
                return images;
            });
    }}
 >
    ...
</Blueprint>

Image Properties

Type: Array<number | ImageRequireSource>

| name | type | Description | |---|---|---| | uri | string | uri is a string representing the resource identifier for the image, which could be an http address. | | width | number | width and height can be specified if known at build time. | | height | number | width and height can be specified if known at build time. |

Zoom

One of the most powerful tools in the Blueprint suite, zooming is applied to your application and all other functionality.

This allows you to work pixel by pixel on your screen, impressing everyone with the quality of your application.

Feedback, Requests and Roadmap

Please use GitHub issues for feedback, questions or comments.

If you have specific feature requests or would like to vote on what others are recommending, please go to the GitHub issues section as well. I would love to see what you are thinking.

Contributing

You can contribute in many ways to this project.

Translating and documenting

I'm not a native speaker of the English language, so you may have noticed a lot of grammar errors in this documentation.

You can FORK this project and suggest improvements to this document (https://github.com/nidorx/react-native-ui-blueprint/edit/master/README.md).

If you find it more convenient, report a issue with the details on GitHub issues.

Reporting Issues

If you have encountered a problem with this component please file a defect on GitHub issues.

Describe as much detail as possible to get the problem reproduced and eventually corrected.

Fixing defects and adding improvements

1. Fork it (https://github.com/nidorx/react-native-ui-blueprint/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes (git commit -am 'Add some fooBar')
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request

License

This code is distributed under the terms and conditions of the MIT license.