Comments (3)
I added alpha and zIndex of 1000 to fix the issue,
Thanks for not responding
from react-native-blur-overlay.
How did you change your code? I am having the same issue.
from react-native-blur-overlay.
I wrote my blur view combining this module for android with react-native-blur-view for ios. react-native-blur-view is broken for android so I used this module implementation instead. I will upload my implementation in GitHub and attach its link to you.
import React = require('react')
import { Animated, requireNativeComponent, TouchableWithoutFeedback } from 'react-native'
import { EnvironmentVariables } from '../../Constants'
import { StyleType } from '../../utils/Types'
import { Styles } from './FaBlurOverlayStyle'
/**
* By M.Fakhreddin
*/
const NativeComponent = EnvironmentVariables.isIos
? requireNativeComponent<IFaBlurOverlayProps>('FakhreddinBlurView')
: requireNativeComponent<IFaBlurOverlayProps>('FakhreddinBlurOverlay')
interface IFaBlurOverlayProps {
brightness: number, // Android
radius: number, // Android
downSampling: number, // Android
blurType: 'xlight' | 'light' | 'dark', // Ios
blurAmount: number, // Ios
style?: StyleType, // Both
onPress?: () => void// Both
}
interface IFaBlurOverlayState {
isVisible: boolean,
opacity: Animated.Value
}
export class FaBlurOverlay extends React.PureComponent<IFaBlurOverlayProps, IFaBlurOverlayState> {
public static defaultProps: IFaBlurOverlayProps = {
radius: 4,
downSampling: 8,
brightness: 10,
blurType: 'light',
blurAmount: 10,
style: null,
onPress: () => {}
}
public state: IFaBlurOverlayState = {
isVisible: false,
opacity: new Animated.Value(0)
}
public show = () => {
return new Promise((resolve) => {
requestAnimationFrame(() => {
this.setState({
isVisible: true,
opacity: new Animated.Value(0)
}, async () => {
await this.playShowHideAnimation(1)
resolve()
})
})
})
}
public hide = () => {
return new Promise(async (resolve) => {
await this.playShowHideAnimation(0)
requestAnimationFrame(() => {
this.setState({isVisible: false}, resolve)
})
})
}
public render(): JSX.Element {
if (this.state.isVisible === false) {
return null
}
return (
<Animated.View
style={[Styles.blurView, {
opacity: this.state.opacity
}]}
>
<TouchableWithoutFeedback
style={Styles.blurView}
onPress={this.props.onPress}
>
<NativeComponent
downSampling={this.props.downSampling}
brightness={this.props.brightness}
radius={this.props.radius}
style={[Styles.blurView, this.props.style]}
blurType={this.props.blurType}
blurAmount={this.props.blurAmount}
/>
</TouchableWithoutFeedback>
</Animated.View>
)
}
private playShowHideAnimation(targetOpacity: number) {
return new Promise((resolve) => {
Animated.timing(
this.state.opacity,
{
toValue: targetOpacity,
duration: 300,
useNativeDriver: true
}
).start(resolve)
})
}
}
from react-native-blur-overlay.
Related Issues (11)
- Android overlay displays trace of previous screen HOT 2
- prevent navigation bar as a blur background HOT 3
- Android Overlay blurred from entire screen. HOT 1
- How to prevent bluroverlay pop to close.
- How can I always show the blur overlay? HOT 1
- change compile to implementation
- onPress not passing through HOT 1
- How to use it in typescript? HOT 3
- open overlay doesn't work HOT 5
- react-native-blur-overlay:verifyReleaseResources FAILED HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-blur-overlay.