1.2.5 • Published 4 years ago
react-native-skew-image v1.2.5
react-native-skew-image
The display of static images.
NOTE: Some methods don't support.
Getting started
$ npm install react-native-skew-image --save
$ yarn add react-native-skew-image
Mostly automatic installation
$ react-native link react-native-skew-image
Usage
import SkewImage from 'react-native-skew-image';
<SkewImage
skewX={(Math.PI / 180) * 45}
skewY={(Math.PI / 180) * 45}
source={require('./assets/dog.png')}
style={styles.skewImage}
/>
Tip: Set resizeMode to "stretch" and set aspectRatio manually for correct display.
<SkewImage
style={{
...
aspectRatio: 1 // manually - width/height
}}
resizeMode={"stretch"} // "stretch"
/>
Internal
public class SkewImage extends ReactImageView {
private float skewX = 0.0f;
private float skewY = 0.0f;
private Matrix matrix = new Matrix();
public SkewImage(ThemedReactContext context, ReactApplicationContext mCallerContext) {
super(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
}
public void setSkewX(float rad) {
skewX = rad;
}
public void setSkewY(float rad) {
skewY = rad;
}
@Override
public void onDraw(Canvas canvas) {
matrix.setSkew(skewX, skewY);
canvas.setMatrix(matrix);
super.onDraw(canvas);
}
}
With react-native-view-shot
import React from 'react';
import {Text, StyleSheet} from 'react-native';
import SkewImage from 'react-native-skew-image';
import ViewShot from 'react-native-view-shot';
export default class App extends React.Component {
state = {
image: ''
};
render() {
const options = {
result: 'base64',
format: 'png',
quality: 1,
};
return (
<>
<ViewShot
onCapture={this._onCapture}
captureMode={'mount'}
options={options}>
<Text style={styles.text}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Text>
</ViewShot>
<SkewImage
resizeMode={'contain'}
key={`skewX-${this.state.image}`}
style={styles.skewImage}
skewX={(Math.PI / 180) * 30}
source={{uri: this.state.image}}
/>
<SkewImage
resizeMode={'contain'}
key={`skewY-${this.state.image}`}
style={styles.skewImage}
skewY={(Math.PI / 180) * 30}
source={{uri: this.state.image}}
/>
<SkewImage
resizeMode={'contain'}
key={`skewX-skewY-${this.state.image}`}
style={styles.skewImage}
skewX={(Math.PI / 180) * 30}
skewY={(Math.PI / 180) * 30}
source={{uri: this.state.image}}
/>
</>
);
}
_onCapture = uri => {
this.setState({image: `data:image/png;base64,${uri}`}, () => {
console.log('do something with ', this.state.image);
});
};
}
const styles = StyleSheet.create({
text: {
fontSize: 16,
lineHeight: 24,
margin: 0,
padding: 0,
width: '100%',
backgroundColor: '#A00000'
},
skewImage: {
marginVertical: 30,
width: '85%',
height: 24 * 3
},
});
Icon made by Freepik from www.flaticon.com