Images are not rendering in Android device while it is displayed on iOS simulator

Expo SDK
1

Hello,

I am using KeyboardAvoidingView in which I am using ImageBackground component and Image component for logo, it is getting displayed on iOS simulator but if I am testing on real device of Android then images are not getting rendered. So, kindly can you please help me with this out.

Thanks in advance.

2

Could you please share a small demo that reproduces the error?

3

Hello bacon,

Thanks for reply !!

Following is my render method…

render(){
return(
<ImageBackground
source={require(‘…/assets/loginBackground.png’)}
resizeMode=“contain”
style={[styles.container,{width:‘100%’,height: ‘100%’}]}>

        <Image 
             source={require("../assets/loginLogo.png")}
             style={[styles.logo, {width: 184,
             height: 84}]} />   
             
        <KeyboardAvoidingView behavior="padding" style={[styles.container,{marginBottom: 30,width: '100%'}]}>  
                    {
                        this.state.focus === false ? 
                        <View style={styles.inputContainer}>
                            <BeforeUserInputs
                              onFocus={this.onFocused}
                              secureTextEntry={false}
                              value={this.state.username} 
                              onChangeText={this.handleUsernameUpdate}
                              source={usernameImgB}
                              placeholder="Username"
                              autoCapitalize={'none'}
                              returnKeyType={'done'}
                              autoCorrect={false}
                            />
                            <BeforeUserInputs
                               onFocus={this.onFocused}
                               value={this.state.password} 
                               onChangeText={this.handlePasswordUpdate}
                               source={passwordImgB}
                               secureTextEntry
                               placeholder="Password"
                               returnKeyType={'done'}
                               autoCapitalize={'none'}
                               autoCorrect={false}
                             /> 
                        </View> :
                        <View style={styles.inputContainer}>
                        <BeforeUserInputs
                          onFocus={this.onFocused}
                          secureTextEntry={false}
                          value={this.state.username} 
                          onChangeText={this.handleUsernameUpdate}
                          source={usernameImgA}
                          placeholder="Username"
                          autoCapitalize={'none'}
                          returnKeyType={'done'}
                          autoCorrect={false}
                        />
                        <BeforeUserInputs
                           onFocus={this.onFocused}
                           value={this.state.password} 
                           onChangeText={this.handlePasswordUpdate}
                           source={passwordImgA}
                           secureTextEntry
                           placeholder="Password"
                           returnKeyType={'done'}
                           autoCapitalize={'none'}
                           autoCorrect={false}
                         /> 
                        </View> 
                    }      

                   <TouchableOpacity style={styles.buttonContainer} onPress={this.onLogin}>
                       <Text style={styles.buttonText}>LOGIN</Text>
                   </TouchableOpacity>
                   <Text style={{textDecorationLine:'underline', fontSize: 18,color: '#FFF'}}>
                      Forget Password?
                   </Text>  
            </KeyboardAvoidingView>
        </ImageBackground> );
    }

//This is my StyleSheet…
const styles = StyleSheet.create({
inputContainer: {
width: ‘100%’,
},

txtInputLayout: {
    marginTop: 2,
    marginHorizontal: 32
},

error: {
textAlign: 'center',
color: 'red',
},

container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

logoContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
},
title: {
    fontFamily: 'Baskerville',
    fontSize: 56,
    color: '#FFF',
    textAlign: 'center',
    marginTop: 5,
    opacity: 0.9
}, 
input: {
    minWidth: 100,
    fontSize: 24,
    height: 32,
    color: '#FFF',
    paddingLeft: 8
},  
buttonContainer: {
    borderRadius:8,
    borderColor: '#FFF',
    borderWidth: 1,
    backgroundColor: 'rgba(52, 52, 52, 0.24)',
    paddingVertical: 12,
    paddingHorizontal: 64,
    marginTop: 22,
    marginBottom: 64
},
buttonText: {
    textAlign: 'center',
    color: '#FFF',
    fontWeight: 'bold',
    fontSize: 24,
},
logo: {
    resizeMode: 'contain',
    marginTop: 96,
    alignItems:'center',
    marginBottom: 20
  }

})

4

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.