Hey so I'm very inexperienced with coding and react-native in general, but I'm trying to create a modal which pops up with a little info box for the user and blurs out the background page. I was able to get a modal working and tweaked it for my specifications until it works great! I imported the library 'expo-blur' and found an example online of it being used, but I can't figure out how I would implement the blur into my Modal. Please any help with this would be extremely appreciated! I've attached images of my Modal code and the expo-blur example I found, below.
Modal
BlurView example
I had the same problem and I have just found this example. Now it works.
https://github.com/Kureev/react-native-blur/issues/105#issuecomment-257872152
In the example he is using class components, I'm using function components. The problem was I wasn't using transparent={true} for the modal
This is my code to make it work:
<Modal visible={filterScreen} animationType="slide" transparent={true}>
<View style={{ marginTop: 100, flex: 1 }}>
<BlurView
intensity={100}
style={[styles.nonBlurredContent, { height: "100%" }]}
>
<Text>Hello! I am bluring contents underneath</Text>
<Text>Hello from the modal</Text>
<TouchableOpacity
style={{ backgroundColor: "red", width: 30, height: 30 }}
onPress={() => setFilterScreen(!filterScreen)}
>
<Text>X</Text>
</TouchableOpacity>
</BlurView>
</View>
</Modal>
Related
I'm currently creating an app using react-native for a capstone project, but have run into a small issue when I try using the snap carousel. It seems that all text does not appear under the carousel for some reason.
const YourApp = () => {
return (
<ScrollView>
<View style={styles.container}>
<View style={{width: '100%', height: 200, backgroundColor: '#c89686',}}>
<Text style={styles.txt}>SPARTAN</Text>
<Text style={styles.txt1}>FITNESS</Text>
</View>
<Text style={styles.txt2}>New Arrivals</Text>
<CarouselCards></CarouselCards>
***<Text style={{}}>Swipe to View</Text>***
</View>
</ScrollView>
);
}
I tried styling, adding margin-top to see if it was for some reason inside of the carousel, but nothing related to styling worked, it instead just added whitespace on the app. Tried adding another container for the text but it did the same thing as the styling, and didn't display.
Using react native expo.
Once performing action in one of the pages, if the action is success, it will forward to another page that will only contain a view with an image, the image inside the url can change all the time(by another user regardless to the app).
I had an issue that when image is being changed, the previous image is still in the cache so it is loading the previous image.
the solution is to add "?xxx" at the end of the url and it will refresh to the current image all the time.
The problem now, is that it takes around 2-3 seconds for the image to load, and i cant have that.
Is there a way to load the image from the url in a faster way?
Here is the code that shows the image in the final page:
return (
<SafeAreaView style={[{ flex: 1 }]}>
<View style={[{ height: "8%", backgroundColor: "#EE7629" }]}>
<TouchableOpacity style={styles.backStyle} onPress={navToTakeCart}>
<Text style={styles.backText}>Go Back</Text>
</TouchableOpacity>
</View>
<View style={[{ height: "92%", backgroundColor: "#EE7629" }]}>
<Image
source={{
uri:
"https://click2lock.azurewebsites.net/Images/AdvertiseImg/Image" +
compId +
".jpeg?1",
}}
style={{ width: "100%", height: "100%", resizeMode: "stretch" }}
/>
</View>
</SafeAreaView>
);
Thank you
Same issue for me, I'm looking for a solution of this network related issue with expo, while searching I saw some post advicing to use FastImage, Also saw that there is an implementation for Expo, but had no sucess implementing it on my app.
I have issue when set visible modal to false the modal flashes especially on <Animated.view> component. I have tried all solution from this github issue (https://github.com/react-native-modal/react-native-modal/issues/268) but no one are solving my issue. this issue only happen in IOS simulator but in android simulator work as expected.
This is my modal code
<Modal
animated
animationIn="fadeIn"
animationOut="fadeOut"
backdropTransitionOutTiming={0}
visible={visible}
transparent
onRequestClose={handleDismiss}>
<View style={styles.overlay}>
{this.renderOutsideTouchable()}
<Animated.View
style={{
...styles.container,
transform: [{translateY: translateY}],
}}
>
{this.renderTitle()}
{this.renderContent()}
{this.renderButton()}
</Animated.View>
</View>
</Modal>
Has anyone encounter same issue and solved ?
Add these props to your Modal.It should solve flickering issue. That is how I solved it.
backdropTransitionOutTiming={0}
hideModalContentWhileAnimating
This is my setup and there is no flickering on either side.
<Modal
onBackdropPress={toggleModal}
backdropColor="#344356"
backdropOpacity={0.7}
animationIn="fadeIn"
isVisible={isModalVisible}
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
backdropTransitionOutTiming={0}
hideModalContentWhileAnimating
statusBarTranslucent
>
{children}
</Modal>
Setting
backdropTransitionOutTiming={0}
solves the issue. It does not affect animation at all for me.
I'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>
I'm using react-native-blur to blur a view on react-native but it does not work inside a modal as this issue states.
I've tried the idea suggested in the comment by setting a timeout after the imageLoad but it still not blured.
Is there any workaround ? Why does it works outside a modal but not in the modal ? What is the difference between how a modal render in react-native ? That's unfortunately a bug part of my app and I must succeed.
Thanks
EDIT:
I did it differently. As blurRadius is working for images on android in modals, I use a combinations of images to show exactly what I want of the image.
Perhaps useful for other people, I tried the react-native-blur solution but got stuck as well. Eventually this worked just fine for me:
<Modal
animationType={'fade'}
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
this.setState({ modalVisible: false });
}}
>
<View
style={{
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
backgroundColor: 'rgba(100,100,100, 0.5)',
padding: 20,
}}
>
{this.props.modalContent}
</View>
</Modal>
The remaining part of the code can be found in the documentation of the react native modal: https://facebook.github.io/react-native/docs/modal