I am trying to add Instagram type filter to add some effect to my image using React-native? - react-native

Question

I am creating an Image Editing Application & I have to put put image effect filters to change brightness, hue, saturation, etc with the help of Range Slider?Is there any possibilities to do it with Css properties?
I need something like Instagram Filters.
import React from 'react';
import { StyleSheet,
Text,
View,
Image,
SafeAreaView,
ScrollView } from 'react-native';
import {Asset } from 'expo-asset';
export default class App extends React.Component {
state={
ready: false,
image: null,
value: 0,
angle: 0,
deg: 'deg',
Vflipangle: 0,
Hflipangle:0,
positivevalue: 0,
};
//--- this function brings the contains the image locaiton to show inside <Image/>----------
//---------------This function runs automatically on mounting----------------------------
componentDidMount(){
const image = Asset.fromModule(require('./assets/girl.jpg'));
this.setState({
ready: true,
image,
});
}
//------------------------------------------------------------------------------
//Function to Render Image to show on Application Screen---------------------------
_renderImage =()=> {
return(
// <View style = {{margin: 20, alignItems: 'center',backgroundColor: 'black', overflow: 'hidden'}}>
// </View>
<Image source= {{uri: this.state.image.localUri || this.state.image.uri}}
style={{width:300+this.state.positivevalue,height:400+this.state.positivevalue, resizeMode:'cover',
transform: [{ rotate: this.state.value+this.state.deg}]
}}
/>
)
}
filteredImage =()=> {
return(
<Image source={{uri: this.state.image.localUri || this.state.image.uri}}
style={{flex: 1,
width: null,
height: null,
resizeMode: 'cover',}}/>
)
}
render(){
return (
<SafeAreaView style={styles.container}>
<View style={{alignItems: 'center',
justifyContent: 'center',
flex: 2}}>
<View style={{transform: [{ rotate: this.state.angle+this.state.deg},
{rotateY: this.state.Vflipangle + this.state.deg},
{rotateX: this.state.Hflipangle + this.state.deg}],
overflow: 'hidden',
width: 300,
height: 400,
alignItems: 'flex-end',
justifyContent: 'center',
//
}}>
{this.state.ready && this._renderImage()}
</View>
</View>
<ScrollView scrollEventThrottle= {16} style={{flex: 1}}>
<View style={{height: 150, marginTop: 20}}>
<ScrollView horizontal={true}>
<View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5,
borderColor: '#dddddd'}}>
<View style={{flex:4,}}>
{this.state.ready && this.filteredImage()}
</View>
<View style={{flex:0.5,alignItems: 'center'}}>
<Text style={{color: '#ffffff'}}>Reset</Text>
</View>
</View>
<View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5,
borderColor: '#dddddd'}}>
<View style={{flex:4,}}>
{this.state.ready && this.filteredImage()}
</View>
<View style={{flex: 0.5,alignItems: 'center'}}>
<Text style={{color: '#ffffff'}}>Brightness</Text>
</View>
</View>
<View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5,
borderColor: '#dddddd'}}>
<View style={{flex:4,}}>
{this.state.ready && this.filteredImage()}
</View>
<View style={{flex: 0.5,alignItems: 'center'}}>
<Text style={{color: '#ffffff'}}>Contrast</Text>
</View>
</View>
<View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5,
borderColor: '#dddddd'}}>
<View style={{flex:4,}}>
{this.state.ready && this.filteredImage()}
</View>
<View style={{flex: 0.5,alignItems: 'center'}}>
<Text style={{color: '#ffffff'}}>Exposure</Text>
</View>
</View>
<View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5,
borderColor: '#dddddd'}}>
<View style={{flex:4,}}>
{this.state.ready && this.filteredImage()}
</View>
<View style={{flex: 0.5,alignItems: 'center'}}>
<Text style={{color: '#ffffff'}}>Saturation</Text>
</View>
</View>
<View style={{height: 150, width: 100, marginLeft: 20, borderWidth: 0.5,
borderColor: '#dddddd'}}>
<View style={{flex:4,}}>
{this.state.ready && this.filteredImage()}
</View>
<View style={{flex: 0.5, alignItems: 'center',height:10}}>
<Text style={{color: '#ffffff'}}>Temperature</Text>
</View>
</View>
</ScrollView>
</View>
</ScrollView>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#000000',
// alignItems: 'center',
//justifyContent: 'center',
},
})
;
Here my code looks like , i will add slider later in it

Answer 1

You can achieve these effects using this library: gl-react-native-v2
It's a little more complicated than CSS effects, but you just can't use CSS in React Native. So this is most likely the best option.