@jjrmich/rounded-rectangle

This package works with react-native-svg to allow for simple rendering of rectangles with two rounded corners at the bottom


Keywords
react-native-svg, rectangle, svg, react-native, supplemental, shapes, rounded rectangle
License
MIT
Install
npm install @jjrmich/rounded-rectangle@0.1.0

Documentation

@jjrmich/rounded-rectangle

This repository holds the rounded-rectangle component, which allows for react-native-svg to render rectangles with a rounded bottom.
npm (scoped) npm bundle size (scoped version)

Install

Run either

yarn add @jjrmich/rounded-rectangle

or

npm install @jjrmich/rounded-rectangle

to add this component to your project, depending on your preferred package manager.

Peer Dependencies

Since this is a React Native component, React Native needs to be installed in order for this to work. In addition, this component is created for react-native-svg, which also needs to be added to the project.

Usage

To use this component, use the

import Svg from 'react-native-svg';
import {RoundedRect} from '@jjrmich/rounded-rectangle';

import statements. Then, utilize the RoundedRect component the same way you would use any of react-native-svg's various shapes. For example,

<View>
  <Svg width="100%" height="100%">
    <RoundedRect
      x=120
      y=120
      height=200
      width=200
      curve=30
      fill='orange'
    />
  </Svg>
</View>

would be a valid input.

Props

The component takes the following props

Name Default Description
x 0
y 0
height 10
width 10
height 10
curve 10
stroke transparent
fill transparent
strokeWidth 0