Image looses quality for some filters.

[manav-kasare]

• For some filters we noticed that the image quality reduces.
• Tested only on iOS. React-native: 0.64. react-native-image-filter-kit: 0.8.0

[iyegoroff]

Please provide reproducing example.

[manav-kasare]

const extractedUri = React.useRef(uri); const onExtractImage = ({nativeEvent}) => { extractedUri.current = nativeEvent.uri; }; const onSelectFilter = (selectedIndex) => { setIndex(selectedIndex); };

This is the render function:
const renderFilterComponent = ({item, index}) => { const FilterComponent = item.filterComponent; const image = ( <Image style={filterStyles.filterSelector} source={{uri}} resizeMode={'contain'} /> ); return ( <TouchableOpacity style={{marginHorizontal: 15}} onPress={() => onSelectFilter(index)}> <FilterComponent image={image} /> <Text style={filterStyles.filterTitle}>{item.title}</Text> </TouchableOpacity> ); };

const SelectedFilterComponent = FILTERS[selectedFilterIndex].filterComponent;

This is what the component returns :
<SelectedFilterComponent onExtractImage={onExtractImage} extractImageEnabled={true} image={ <Image style={filterStyles.image} source={{uri}} resizeMode={'contain'} /> } />

[iyegoroff]

I need a minimal app that shows described behaviour, not just pieces of code.

[manav-kasare]

I need a minimal app that shows described behaviour, not just pieces of code.

Is there a chance of filters lowering the image quality. If yes, how do I avoid it ?

[timothyerwin]

const extractedUri = React.useRef(uri); const onExtractImage = ({nativeEvent}) => { extractedUri.current = nativeEvent.uri; }; const onSelectFilter = (selectedIndex) => { setIndex(selectedIndex); };

This is the render function: const renderFilterComponent = ({item, index}) => { const FilterComponent = item.filterComponent; const image = ( <Image style={filterStyles.filterSelector} source={{uri}} resizeMode={'contain'} /> ); return ( <TouchableOpacity style={{marginHorizontal: 15}} onPress={() => onSelectFilter(index)}> <FilterComponent image={image} /> <Text style={filterStyles.filterTitle}>{item.title}</Text> </TouchableOpacity> ); };

const SelectedFilterComponent = FILTERS[selectedFilterIndex].filterComponent;

This is what the component returns : <SelectedFilterComponent onExtractImage={onExtractImage} extractImageEnabled={true} image={ <Image style={filterStyles.image} source={{uri}} resizeMode={'contain'} /> } />

this code is horribly formatted. please fix it.