@tu-nguyen-tech/react-native-effect-instagram

A React Native Component various image filters for iOS & Android.

         
Example List                                     Example Grid

Status

• iOS & Android:
  • Filter components work as combinable wrappers for standard Image and ImageBackground components
  • Resulting images are being cached in memory
• react-native:

  • supported versions:

    react-native	min Android SDK	min iOS version
    >=0.57.1	17	9.0

Installation

To use this library, you will need install react-native-image-filter-kit, please refer to the README / Install.

npm install --save @tu-nguyen-tech/react-native-effect-instagram

or

yarn add @tu-nguyen-tech/react-native-effect-instagram

don't forget to see how to configure react-native-image-filter-kit

Usage

import FilterInstagram from '@tu-nguyen-tech/react-native-effect-instagram'

Example

state = {
  effect: 'Aden'
}

<FilterInstagram
  effect={this.state.effect}
  style={styles.filterInstagram}
  image={{ uri: 'https://tunguyen.tech/media/2019/09/1G2QwxPF2TvWXzRUnA4axoA.jpg' }}
  horizontal
  isShowTextEffect
  textEffect={styles.textEffect}
  effectSelectedStyle={styles.effectSelectedStyle}
  onPressEffectSelected={(effect) => this.setState({ effect })}
/>

Props

Prop	Type	Description	Required	Default
image	Object	Image	Yes
effect	String	Effect filter image	Yes	Normal
onPressEffectSelected	Function	Function when press effect item.	Yes
isShowTextEffect	Boolean	Show text effect center	No
imagePreviewProps	Object	Custom props image preview	No
renderEffect	Function	Render effect custom	No

Style

Prop	Type	Description	Required	Default
style	Object	Custom style FilterInstagram component	No
textEffectStyle	Object	Custom text effect style	No
effectSelectedStyle	Object	Style when effect selected	No
imagePreviewStyle	Object	Custom style image preview	No

License

MIT

Library made by TuNguyen

Website: tunguyen.tech