Skip to content

native-ly/marginally-pudding

Repository files navigation

NPM version NPM downloads NPM license run in expo snack Codecov Travis Bundle size

About

Create margins and paddings in React Native in the way well known from CSS

How to Install

First, install the library in your project by npm:

$ npm install marginally-pudding

Or Yarn:

$ yarn add marginally-pudding

Getting Started

Connect the library with the project using ES6 import:

import { marginally, pudding } from 'marginally-pudding'

Options

You can use the functions with the following combinations:

  • (all)
  • (vertical, horizontal)
  • (top, horizontal, bottom)
  • (top, right, bottom, left)

All params are number or string type

Example

import React from 'react'
import { View } from 'react-native'
import { marginally, pudding } from 'marginally-pudding'

const App = () => {
  return (
    <View
      style={{
        backgroundColor: 'red',
        ...marginally(20, 10),
        // marginVertical: 20,
        // marginHorizontal: 10,

        ...pudding(0, 20, 15),
        // paddingTop: 0,
        // paddingHorizontal: 20,
        // paddingBottom: 15,
      }}
    />
  )
}

export default App

License

This project is licensed under the MIT License © 2021-present Jakub Biesiada