Hello Community,
I am a newbie here currently struggling with an issue with ImageBackground.
I used Imagebackground as background for my header component, and in its source I used an animated gif image. However, I am having some strange issues:
- BlurRadius not working on Android (tested on expo go), however Gif is animating.
- BlurRadius works on iOS, however gif is not animating.
Here’s the code for Header component:
import React from 'react';
import {Text, View, StyleSheet, ImageBackground, TouchableOpacity, Platform} from 'react-native';
import {BlurView} from 'expo-blur';
import Icon from '../Icon';
export type headerProps = {
firstname?: string,
moodcheck: boolean,
}
const HeaderView = (props: headerProps) => {
const uri = 'https://cdn.dribbble.com/users/975591/screenshots/15915350/media/ad1ea4a275857f9fb7ea984979fb7bd7.gif';
const renderBlur = () => {
if(Platform.OS=='ios'){
return 40;
}else if(Platform.OS=='android'){
return 25;
}
}
return(
<BlurView style={styles.container} intensity={0} >
<ImageBackground style={styles.imageView1} blurRadius={renderBlur()} source={{uri: uri}}>
{/* menu button */}
<TouchableOpacity style={styles.menu}>
<Icon name='fi-rs-minus' size={25} color='white' />
<View style={{ marginTop: -16, marginLeft: 4}}>
<Icon name='fi-rs-minus-small' size={25} color='white' />
</View>
</TouchableOpacity>
{/* text for greeting */}
<View style={styles.greetingContainer}>
<Text style={styles.greetingText}>Hi {props.firstname}</Text>
</View>
{/* mood check view */}
<TouchableOpacity style={styles.moodcheckContainer}>
<View>
<Text style={styles.buttonTitle}>How are you feeling?</Text>
<Text style={styles.buttonContent}>Tap to Share</Text>
</View>
</TouchableOpacity>
</ImageBackground>
</BlurView>
);
}
const styles = StyleSheet.create({
menu: {
marginTop: 60,
marginRight: 30,
alignSelf: 'flex-end',
},
container:{
display: 'flex',
flexDirection: 'column',
height: 300,
width: '100%',
overflow: 'hidden',
borderRadius: 40,
},
greetingContainer: {
maxHeight: 200,
},
greetingText: {
margin: 20,
marginTop: 0,
fontFamily: 'BronovaBold',
fontSize: 36,
color: 'white',
maxHeight: 200,
marginBottom: 40,
},
moodcheckContainer: {
width: '90%',
marginLeft: 20,
height: 90,
backgroundColor: 'rgba(255, 255, 255, .5)',
alignSelf: 'flex-start',
borderRadius: 22,
maxHeight:90,
},
imageView1: {
width: '100%',
height: 300,
borderRadius: 32,
maxHeight: 300,
},
buttonTitle: {
fontFamily: 'BronovaBold',
fontSize: 16,
color: '#1F1F2D',
marginTop: 20,
marginLeft: 15,
},
buttonContent: {
fontFamily: 'Bronova',
fontSize: 12,
color: '#1F1F2D',
marginTop: 10,
marginLeft: 15,
}
})
export default HeaderView;
here’s the reference images:
ios: https://i.gyazo.com/fbae33298a8c5ece8d0421b4ba0a7220.png
