Image disappear when using Androw
ydv0121 opened this issue · comments
hello,
getting issue that image is not showing in Androw first time..and it's disappear...static and dynamic both
here is my example:
<Androw style={{ shadowColor: 'red', shadowRadius: 40, shadowOpacity: 0.2, shadowOffset: { width: 0, height: 0, }}> View style={{height:100,width:100,borderRadius:50,backgroundColor:theme.white,justifyContent:'center',alignItems:'center'}}> <Image source={{uri:'http://pngimg.com/uploads/google/google_PNG19645.png'}} style={{zIndex:1,height:50,width: 50,}}/> </View> </Androw>
when i reload or reopen my app it will display sometime
This is a known issue in React Native which causes dynamic content to not re render.
facebook/react-native#17968
I will try to build a work around.
yeah sure..please give me solution if you found
EDIT:
in your previous version 0.0.20, it was work...image was render within ANDROW.
problem occur when i update the package to 0.0.25
hey is there any solution @folofse ??
see i have two problem
1 - on 0.0.20 version my TouhableOpacity is not working properly..as describe in this issue ( #4 )
2 - on 0.0.24 version image not showing as react-native issue ..( Touchable Working perfectly )
i am stuck what to do now..i have implement Androw in my whole project
For Images Im not able to find any fix yet, since the image is not fully loaded when the view is rendering the shadows. Maybe I can add a onLoad listener to all Image childs in the view and then run the re render again.
The Image also seems to overflow the view so it ends up above you TouchableOpacity, this can be fixed by adding pointerEvents="none" to the image tag.
The Image also seems to overflow the view so it ends up above you TouchableOpacity, this can be fixed by adding
pointerEvents="none"to the image tag.
i should not ask you but if possible can you please tell me when new version arrive with this Image Fix
Hi, I just uploaded a new version 0.0.25 which should solve the problems with image and touchableOpacity rendering!
thank you so much ..the issue is resolve now..image is render properly..
thank you very much for your prompt update..
#HappyShadow
hey @folofse i want to inform you that sometime and on somepages still have the image issue..it will not display...it will display when i clicked on it.
and one more thing app might be slow when image load or use androw.
dropping short clip i select image from camera and gallery :-
It shows when you click on it because it forces the image to re-render. Are you using reacts natives own CameraRoll to get the images from the gallery? Do you have any special parameters on your Image element?
i am using https://github.com/ivpusic/react-native-image-crop-picker to pick images
and this is happen with when i pick image from gallery or when i capture picture from camera..
i have one another page with same functionality ,at where it's render properly..
and can you confirm please app take load when use ANDROW..after your last update?
When I test Images from the web I get the same problem with Image without shadow.
I'm not 100% sure the error is because of Androw
It might be a bit slow because it renders a 300ms fade when the image is fully loaded the app then redraws the shadow for 30fps for 300ms.
import React, { Component } from 'react';
import {
Image,
StyleSheet,
View,
} from 'react-native';
import Androw from 'react-native-androw';
export default class App extends Component {
getURI() {
return "https://picsum.photos/2000/2000?random=" + Math.random();
}
render() {
return (
<View style={styles.container}>
<View style={{ width: '100%', flexDirection: 'row' }}>
<Androw style={{
width: '50%',
shadowOpacity: .5,
shadowRadius: 10,
shadowColor: '#ff00ff',
shadowOffset: {
width: 10,
height: 10,
}
}}>
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
</Androw>
<View style={{ width: '50%' }}>
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
androw: {
justifyContent: 'center',
alignItems: 'flex-start',
},
});
When I test Images from the web I get the same problem with Image without shadow.
I'm not 100% sure the error is because of AndrowIt might be a bit slow because it renders a 300ms fade when the image is fully loaded the app then redraws the shadow for 30fps for 300ms.
import React, { Component } from 'react'; import { Image, StyleSheet, View, } from 'react-native'; import Androw from 'react-native-androw'; export default class App extends Component { getURI() { return "https://picsum.photos/2000/2000?random=" + Math.random(); } render() { return ( <View style={styles.container}> <View style={{ width: '100%', flexDirection: 'row' }}> <Androw style={{ width: '50%', shadowOpacity: .5, shadowRadius: 10, shadowColor: '#ff00ff', shadowOffset: { width: 10, height: 10, } }}> <Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} /> <Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} /> <Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} /> <Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} /> </Androw> <View style={{ width: '50%' }}> <Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} /> <Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} /> <Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} /> <Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} /> </View> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, androw: { justifyContent: 'center', alignItems: 'flex-start', }, });
ohk thank you..
what about this -
can you confirm please app take load when use ANDROW..after your last update?
I'm not sure exactly what you mean with "app take load", but the memory consumption of the test app is almost equal whether not I use Androw, but the cpu-rendering expectedly is around 10% higher
Because you already know the shape and size of the image you might create a shadow and add it below the image, and solve the problem for now.
<View style={{ width: '100%' }}>
<Androw style={{
width: '50%',
shadowOpacity: .5,
shadowRadius: 10,
shadowColor: '#ff00ff',
shadowOffset: {
width: 0,
height: 0,
}
}}>
<View style={{width:100, height:100, borderRadius:999, backgroundColor:'black', overflow:'hidden'}}></View>
</Androw>
<View style={{ width: 100, height:100, position:'absolute', zIndex:10, borderRadius:999, overflow:'hidden' }}>
<Image style={{ width: 100, height: 100 }} source={{ uri: this.getURI() }} />
</View>
</View>