Noosphere Possibilities Maximized
Miss any of our Open RFC calls?Watch the recordings here! »

@mtourj/react-native-clip-rect

1.2.1 • Public • Published

React Native Clip Rect (remobile)

A clip react for react-native, the shape is center highlight and around darkness.

Installation

npm install @remobile/react-native-clip-rect --save

Usage

Example

'use strict';
 
var React = require('react');
var ReactNative = require('react-native');
var {
    StyleSheet,
    Image,
    View,
} = ReactNative;
 
var ClipRect = require('@remobile/react-native-clip-rect');
 
module.exports = React.createClass({
    render() {
        const overlayColor = 'rgba(0, 0, 0, 0.5)';
        return (
            <View style={styles.container}>
                <Image style={styles.image} source={app.img.splash_logo} />
                <View style={{flex: 1, backgroundColor: overlayColor}} />
                <View style={{flexDirection: 'row'}} >
                    <View style={{flex: 1, backgroundColor: overlayColor}} />
                    <ClipRect style={{width: 200, height: 200, borderRadius: 100, color: overlayColor}} />
                    <View style={{flex: 1, backgroundColor: overlayColor}} />
                </View>
                <View style={{flex: 1, backgroundColor: overlayColor}} />
            </View>
        )
    }
})
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        width: sr.w,
        height: sr.w,
        top: (sr.h-sr.w)/2,
        position: 'absolute',
    },
});

Screencasts

cricle quadrangle

Props

  • width: PropTypes.number.required
  • height: PropTypes.number.required
  • color: PropTypes.string.required
  • borderRadius: PropTypes.number.optional
  • borderTopLeftRadius: PropTypes.number.optional
  • borderTopRightRadius: PropTypes.number.optional
  • borderBottomRightRadius: PropTypes.number.optional
  • borderBottomLeftRadius: PropTypes.number.optional

Install

npm i @mtourj/react-native-clip-rect

DownloadsWeekly Downloads

1

Version

1.2.1

License

MIT

Unpacked Size

22.4 kB

Total Files

7

Last publish

Collaborators

  • avatar