api.md

API

Surface

Container for all other ART components

Prop	Type	Default
height	number	0
width	number	0
style	any	---
children	React.Node	---

import {Surface} from '@react-native-community/art';

function Heart() {
  return (
    <Surface width={500} height={500}>
      {renderARTShapes()}
    </Surface>
  );
}

Group

Container to combine shapes or other groups into hierarchies that can be transformed as a set.

Prop	Type	Default
...opacityProps	OpacityProps	---
...transformProps	TransformProps	---
...shadowProps	ShadowProps	---
children	React.Node	---

import {Surface, Group} from '@react-native-community/art';

function GrouppedHearts() {
  return (
    <Surface width={500} height={500}>
      <Group>{renderARTGroupContents()}</Group>
    </Surface>
  );
}

Shape

Used to draw arbitrary vector shapes from Path. Shape implements Transform as a mixin which means it has all transform methods available for moving, scaling and rotating a shape.

Prop	Type	Default
...opacityProps	OpacityProps	---
...transformProps	TransformProps	---
...shadowProps	ShadowProps	---
fill	string | Brush	---
stroke	string	---
strokeCap	'butt' | 'square' | 'round'	'round'
strokeDash	Array<number>	---
strokeJoin	'miter' | 'bevel' | 'round'	'round'
strokeWidth	number	1
d	string | Path	---
width	number	0
height	number	0
children	React.Node	---

import {Surface, Shape, Path} from '@react-native-community/art';

function SomeShape() {
  return (
    <Surface width={500} height={500}>
      <Shape d={new Path().moveTo(0, 0).lineTo(200, 200)} fill="#d39494" />
    </Surface>
  );
}

Text

Text component creates a shape based on text content using native text rendering.

Prop	Type	Default
...opacityProps	OpacityProps	---
...transformProps	TransformProps	---
...shadowProps	ShadowProps	---
fill	string | Brush	---
stroke	string	---
strokeCap	'butt' | 'square' | 'round'	'round'
strokeDash	Array<number>	---
strokeJoin	'miter' | 'bevel' | 'round'	'round'
strokeWidth	number	1
width	number	0
height	number	0
alignment	'center' | 'left' | 'right'	'left'
font	string | Font	---
path	string | Path	---
children	string | Array<string>	---

Path

Generate an SVG path that you can pass to the Shape element.

constructor

new Path(path: string | Path)

move

Move current context from current position by x and y.

function move(x: number, y: number): Path;

moveTo

Move current context from current position to absolute coordinate x and y.

function moveTo(x: number, y: number): Path;

line

Draw a line from current position to relative x and y.

function line(x: number, y: number): Path;

lineTo

Draw a line from current poistion to absolute coordinate x and y.

function lineTo(x: number, y: number): Path;

curve

Draw a cubic bezier curve to relative position.

function curve(
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  deltaX: number,
  deltaY: number,
): Path;

curveTo

Draw a bezier curve to absolute position.

function curveTo(
  x1: number,
  y1: number,
  x2: number,
  y2: number,
  deltaX: number,
  deltaY: number,
): Path

arc

Draw an arc with specific arguments.

function arc(
  x: number,
  y: number,
  xRadius: number,
  yRadius: number,
  outer?: boolean,
  counterClockWise?: boolean,
  rotation?: number,
): Path;

arcTo

Draw an arc to absolute coordinates.

function arcTo(
  x: number,
  y: number,
  xRadius: number,
  yRadius: number,
  outer?: boolean,
  counterClockWise?: boolean,
  rotation?: number,
): Path;

counterArc

Same as arc, opposite clockwise.

counterArcTo

Same as arcTo, opposite clockwise.

close

Draws a line to the first point in the current sub-path and begins a new sub-path.

function close(): Path;

reset

Reset the current path.

function reset(): Path;

toJSON

Return the current path points, which can be used on Shape d attribute.

function toJSON() => Array<number | string>;

LinearGradient

Creates a linear gradient fill.

function LinearGradient({
  stops: GradientStops,
  x1?: number,
  y1?: number,
  x2?: number,
  y2?: number,
}): Brush;

RadialGradient

Creates a radial gradient fill.

function RadialGradient({
  stops: GradientStops,
  x1?: number,
  y1?: number,
  x2?: number,
  y2?: number,
}): Brush;

Pattern

Creates a pattern fill.

This component is not exactly working as expected. More context here.

function Pattern(
  url: number | string,
  width: number,
  height: number,
  left?: number,
  top?: number,
): Brush;

Transform

Generate a transform that can applied to ART elements.

Transform docs

ClippingRectangle

Control display area of graphic.

Prop	Type	Default
...opacityProps	OpacityProps	---
x	number	0
y	number	0
width	number	0
height	number	0
children	React.Node	---

import React from 'react';
import {
  Surface,
  ClippingRectangle,
  Shape,
  Path,
} from '@react-native-community/art';

function Component() {
  return (
    <Surface width={200} height={200}>
      <ClippingRectangle width={20} height={20} x={100} y={100}>
        <Shape
          d={new Path().moveTo(0, 0).lineTo(200, 200)}
          stroke="black"
          strokeWidth={10}
        />
      </ClippingRectangle>
    </Surface>
  );
}

Common types

OpacityProps

Prop	Type	Default
visible	boolean	true
opacity	number	---

TransformObject

Prop	Type	Default
y	number	0
x	number	0
yy	number	1
xx	number	1
yx	number	0
xy	number	0

TransformProps

Prop	Type	Default
scaleX	number	1
scaleY	number	1
scale	number	---
x	number	0
y	number	0
rotation	number	0
originX	number	---
originY	number	---
transform	TransformObject	---

ShadowProps

Prop	Type	Default
shadowOpacity	number	1
shadowColor	string	black
shadowRadius	number	0
shadowOffset	ShadowOffsetObject	---

ShadowOffsetObject

Prop	Type	Default
y	number	0
x	number	0

Font

Prop	Type	Default
fontFamily	string	---
fontSize	number	12
fontWeight	string	'400'
fontStyle	string	---