Kureev
android --warning:failed prop type:the prop 'viewRef' is marked as required in 'BlurView' but its value is 'null'
on first render viewRef props is null, that change when image (if you has used example)
<Image ref={(img) => { this.backgroundImage = img; }} source={require('../../image/shouy.jpg')} style={[{width:width,height:200,opacity:0}]} onLoadEnd={this.imageLoaded.bind(this)} resizeMode='cover' /> <BlurView style={[{width:width,height:200},styles.absolute]} viewRef={this.state.viewRef} blurType="light" blurAmount={8} />
<BlurView style={[{width:width,height:200},styles.absolute]} viewRef={this.state.viewRef} blurType="light" blurAmount={8} />
@hgndggx - Make sure you don't render the blur view until your viewRef is set. For example, do something like this:
render() {
return (
this.state.viewRef == null ? null : <BlurView viewRef={this.state.viewRef} // ...
@ndbroadbent
I have the same problem, and i do something like you said,but the value of this.state.viewRef is always null
@ndbroadbent 's solution works perfectly for me, thanks a lot!
<View style={styles.container}>
<Image
resizeMode='cover'
source={require('./bgimage.jpeg')}
ref={(img) => { this.backgroundImage = img; }}
onLoadEnd={this.imageLoaded.bind(this)}
/>
//Here
{(this.state.viewRef == null ? null :
<BlurView
viewRef={this.state.viewRef}
style={styles.absolute}
blurType="light"
blurAmount={1}
/>)}
<Text>Hi, I am some unblurred text</Text>
</View>
Hi Guys I'm facing the same issue,
Can you please help me out here.
This is my code:
import React, {Component} from 'react'
import {findNodeHandle, Switch, Dimensions, Platform, StyleSheet, Text, View, Button, TextInput, TouchableOpacity, Image, Animated, Easing, ScrollView} from 'react-native'
import Slider from '@react-native-community/slider'
import { createStackNavigator, createAppContainer } from "react-navigation"
import Dialog, { DialogContent, SlideAnimation } from 'react-native-popup-dialog'
import PropTypes from 'prop-types';
import SwitchToggle from 'react-native-switch-toggle'
import { BlurView } from "@react-native-community/blur";
screenWidth = Dimensions.get('screen').width
screenHeight = Dimensions.get('screen').height
var applianceName = 'Fan'
class ApplianceConfig extends Component<Props> {
constructor(props) {
super(props);
this.state = {
viewRef: null,
visible: this.props.visible,
switchAppliance: false,
switchRepeat: false,
};
}
dialogPopup () {
this.setState({
visible: this.props.visible
})
return (
this.state.visible
)
}
onPressAppliance = () => {
this.setState({ switchAppliance: !this.state.switchAppliance });
}
onPressRepeat = () => {
this.setState({ switchRepeat: !this.state.switchRepeat });
}
// viewLoaded = () => {
// this.setState({ viewRef: findNodeHandle(this.refs['main']) });
// }
//
// componentWillMount () {
// this.setState({ viewRef: findNodeHandle(this.refs['main']) });
// }
onTextViewLoaded() {
this.setState({ viewRef: findNodeHandle(this.viewRef) });
}
render() {
return (
<Dialog
visible={this.state.visible}
onTouchOutside={() => {
this.setState({ visible: false });
}}
dialogStyle={{ borderRadius: 10, position: 'absolute', bottom: 0, backgroundColor: 'transparent' }}
dialogAnimation={new SlideAnimation({
slideFrom: 'bottom',
})}
containerStyle={{ justifyContent: 'flex-end' }}
>
<DialogContent>
{(this.state.viewRef == null ? null : <BlurView
style={dialog.absolute}
viewRef={this.state.viewRef}
blurType="light"
blurAmount={10}
blurRadius={5}/>
)}
<View style={dialog.container}
ref={(viewRef) => { this.viewRef = viewRef; }}
onLayout={() => { this.onTextViewLoaded(); }}>
<View style={dialog.containerSubViews}>
<Text style={dialog.sectionTitleFont}>{applianceName}</Text>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Appliance</Text>
<SwitchToggle
onPress={() => this.onPressAppliance()}
switchOn={this.state.switchAppliance}
containerStyle={{
width: 40,
height: 20,
borderRadius: 15,
marginRight: 25,
borderWidth: 1,
borderColor: '#CC6666',
padding: 4
}}
circleStyle={{
width: 12,
height: 12,
borderRadius: 6,
backgroundColor: '#CC6666', // rgb(102,134,205)
}}
circleColorOff='#CC6666'
circleColorOn='#CC6666'
/>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Speed</Text>
<Slider
style={{width: 200, height: 40, marginRight: 20}}
minimumValue={0}
maximumValue={100}
minimumTrackTintColor="#CC6666"
maximumTrackTintColor="transparent"
thumbTintColor='#CC6666'
/>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.sectionTitleFont}>Automate</Text>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Turn On Timer</Text>
<TextInput style={{width: 100, height: 40, borderRadius: 5, marginRight: 20, backgroundColor: '#FAFAFA', borderColor: '#AAAAAA', borderWidth: 1, paddingHorizontal: 20}}/>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Turn Off Timer</Text>
<TextInput style={{width: 100, height: 40, borderRadius: 5, marginRight: 20, backgroundColor: '#FAFAFA', borderColor: '#AAAAAA', borderWidth: 1, paddingHorizontal: 20}}/>
</View>
<View style={dialog.containerSubViews}>
<Text style={dialog.titleFont}>Repeat Everyday</Text>
<SwitchToggle
onPress={() => this.onPressRepeat()}
switchOn={this.state.switchRepeat}
containerStyle={{
width: 40,
height: 20,
borderRadius: 15,
marginRight: 25,
borderWidth: 1,
borderColor: '#CC6666',
padding: 4
}}
circleStyle={{
width: 12,
height: 12,
borderRadius: 6,
backgroundColor: '#CC6666', // rgb(102,134,205)
}}
circleColorOff='#CC6666'
circleColorOn='#CC6666'
/>
</View>
<View style={dialog.doneButtonView}>
<TouchableOpacity style={dialog.doneButton}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: 'white'}}>Done</Text>
</TouchableOpacity>
<TouchableOpacity style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: 15, fontWeight: 'bold', color: '#CC6666'}}>Cancel</Text>
</TouchableOpacity>
</View>
</View>
</DialogContent>
</Dialog>
)
}
}
ApplianceConfig.propTypes = {
visible: PropTypes.bool
}
const dialog = StyleSheet.create({
container: {
backgroundColor: 'rgba(255, 255, 255, 1.0)',
flex: 0,
justifyContent: 'flex-start',
alignItems: 'center',
height: 0.75 * screenHeight,
width: screenWidth,
borderRadius: 10
},
containerSubViews: {
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 60,
width: screenWidth
},
titleFont: {
marginLeft: 20,
fontSize: 16,
fontWeight: '500'
},
doneButton: {
height: 50,
borderRadius: 25,
width: '50%',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#CC6666',
marginLeft: 30
},
doneButtonView: {
flex: 0,
width: screenWidth,
height:50,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor: 'transparent',
marginTop: 20
},
sectionTitleFont: {
marginLeft: 20,
fontSize: 20,
fontWeight: '500',
color: 'black',
},
applianceTitle: {
flex: 0,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height: 60,
width: screenWidth
},
absolute: {
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}
})
module.exports = ApplianceConfig;
Thanks in advance
This is quite disturbing... on Android, if i validate against this.state.viewRef from not being null... it will stop showing the yellow Warning but the blur won't be rendered. It doesn't show up. If i allow viewRef being null and not null, it will show Warning and it will render the blur. What is going on?
