I have made a simple view with a background image and some icons on top of it. Clicking on icons navigate to different pages. It is working fine. Problem is when I navigate to other pages come back to home page and do this for 7-8 times the background image just disappears from all the screens. Below is the code of home screen and Screenshots
<Image source={require('../images/background.jpg')} style={{ justifyContent:'center', resizeMode: "stretch", height: height, width: width, alignItems: "center" }} > <StatusBar backgroundColor="#4e0870" barStyle="light-content" /> <Image style={{ height: 125, width: 125 }} source={require('../images/guru_logo.png')} /> <View style={{ marginTop: 30, flexDirection: 'row' }}> <TouchableOpacity activeOpacity={.5} onPress={() => { BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); navigate("LiveTV") } } > <Image source={require('../images/live.png')} style={{ resizeMode: "stretch", height: 75, width: 75 }} /></TouchableOpacity> <TouchableOpacity activeOpacity={.5} onPress={() => { BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); navigate("VideoPage") }}> <Image source={require('../images/youtube.png')} style={{ marginTop: 5, resizeMode: "stretch", marginLeft: 100, height: 75, width: 75 }} /> </TouchableOpacity> </View> <View style={{ flexDirection: 'row', marginTop: 20 }}> <Text style={{ marginLeft: -5, fontSize: 20, color: "#FFF" }}>Live Tv</Text> <Text style={{ fontSize: 20, color: "#FFF", marginLeft: 125 }}>Video</Text> </View> <View style={{ flexDirection: 'row', marginTop: 20 }}> <TouchableOpacity activeOpacity={.5} onPress={() => { BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); navigate("FacebookPage") }}> <Image source={require('../images/facebook-logo.png')} style={{ resizeMode: "stretch", height: 75, width: 75 }} /></TouchableOpacity> <TouchableOpacity activeOpacity={.5} onPress={() => { BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); navigate("AudioPage") }}> <Image source={require('../images/icon.png')} style={{ resizeMode: "stretch", marginLeft: 100, height: 75, width: 75 }} /></TouchableOpacity> </View> <View style={{ flexDirection: 'row', marginTop: 20 }}> <Text style={{ marginLeft: -20, fontSize: 20, color: "#FFF" }}>Facebook</Text> <Text style={{ fontSize: 20, color: "#FFF", marginLeft: 110 }}>Audio</Text> </View> <TouchableOpacity activeOpacity={.5} onPress={() => { BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); navigate("ContactPage") }}> <Image source={require('../images/contact.png')} style={{ marginTop: 20, resizeMode: "stretch", height: 75, width: 75 }} /></TouchableOpacity> <Text style={{ fontSize: 20, color: "#FFF" }}>Contact Us</Text> </Image> 
2 Answers
Answers 1
Every time you navigate to that screen, it calls a re-render. I work around i've found in the past is to define your image sources as a variable, and simply reference it in the source = {HERE} section. I've provided some sample code below. This has fixed this issue in the past, let me know how it goes.
var images = { live: {img: require('../images/live.png')}, guru: {img: require('../images/guru_logo.png')}, background: {img: require('../images/background.jpg')}, //and so on } class SelectionScreen extends Component { //all your other code and then in your Image components
<Image source = {images[background].img}.../> Answers 2
I think it could be related to this react-native issue: https://github.com/facebook/react-native/issues/13600
I would try to:
- Run the app on different phones / emulators to see if it depends on device specifications (like RAM and others). If the app is for both Android and iOS I would also try to see if it's same behaviour on both platforms;
- Replace temporary the images with some other smaller/larger images to see if it changes somehow the issue;
- Upgrade React Native if necessary and use BackgroundImage component for background images instead of Image.
0 comments:
Post a Comment