Skip to content

Latest commit

 

History

History
119 lines (85 loc) · 3.04 KB

README.md

File metadata and controls

119 lines (85 loc) · 3.04 KB

React Native ClipPath

android: api 21+
ios : 10.0+
web: svg

Example --> Demo

Getting started

$ npm install react-native-clippathview --save
$ react-native link react-native-clippathview

Yarn

yarn add react-native-clippathview

IOS

Add Swift

(If you are using expo sdk >=42 you don't need to do this)

/ios/name_project

add a .swift file

Usage

ClipPathViewH (Android Layer type Hardware)

import {ClipPathView , ClipPathViewH } from 'react-native-clippathview'

// TODO: What to do with the module?
    <ClipPathView style={{backgroundColor:'green'}} 

       
        d={myPath}
        viewBox={myViewBox}
        
        
    
    >
  
        <View >
            <Text style={{color:'white'}}>hello world</Text>
        </View>
        
    </ClipPathView>

Harmony

import { View, Text, ScrollView } from 'react-native'
import React from 'react'
import { ClipPathView } from 'react-native-clippathview'

export default function index() {
  const viewBox = [0, 0, 400, 400]
  const path = 'M 200 0 L 280 100 L 400 160 L 330 270 L 320 400 L 200 350 L 80 400 L 80 270 L 0 160 L 120 100 Z'

  return (
    <ScrollView style={{  width: '100%', height: '100%' }}>
      <ClipPath d={path}  style={{ backgroundColor: '#ff0' }}>
        <Text style={{ lineHeight: 5, fontSize: 6 }}>children</Text>
        <Text style={{ lineHeight: 5, fontSize: 6 }}>children</Text>
        <Text style={{ lineHeight: 5, fontSize: 6 }}>children</Text>
      </ClipPath>
    </ScrollView>
  )
}

Props

Name description type default
svgKey Each view must have a different key String ""
d The shape, defined by a series of commands String ""
viewBox defines the position and dimension, in user space Array[Number] (4) undefined
align the aligment String xMidYMid
aspect aspect ratio String meet
fillRule determines what side of a path is inside a shape String nonzero
strokeWidth defines the thickness of a line (mobile) Number 1
strokeCap line cap (mobile) string 'butt'
strokeJoin line join (mobile) string 'miter'
strokeMiter control the behavior of miter (mobile) Number 4
strokeStart the start (mobile) Number 0
strokeEnd the end (mobile) Number 1

Transform


The percentageValue property refers to the fact that the Origin will be multiplied by the size of the view.

Name type default
translateZ Number (zIndex) 0
transX Number 0
transY Number 0
transPercentageValue Bool false
rot Number 0
rotOx Number 0
rotOy Number 0
rotPercentageValue Bool false
sc Number 1
scX Number 1
scY Number 1
scO Number 0
scOx Number 0
scOy Number 0
scPercentageValue Bool false