How to add blur to a View in React Native, just like we apply it to an Image or BackgroundImage? If the view has translucent background using RGBA, I want to add blur to it also.
Sample Code
<ImageBackground style={styles.bg}>
<View style={styles.content} />
</ImageBackground>
const styles = StyleSheet.create({
bg: {
width: "100%",
height: "100%"
},
content:{
width: "70%",
height: "70%",
backgroundColor: "rgba(255,255,355,0.4)",
alignSelf: "center"
}
})
The easiest way is to do something like:
import React, { Component } from 'react';
import { View, Text, ImageBackground, StyleSheet } from 'react-native';
const BlurImage = () => {
return (
<ImageBackground source={require('your picture')} style={styles.ImageBackground}>
<View style={styles.container}>
<Text style={styles.text}> CSS Tricks </Text>
<Text style={styles.text}>You can style your Text and View as you deem fit</Text>
</View>
</ImageBackground>
);
}
export default BlurImage;
const styles = StyleSheet.create({
ImageBackground: {
flex: 1,
width: null,
height: null,
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgba( 0, 0, 0, 0.6 )',
},
text: {
color: 'white',
fontSize: 24
}
});
You can use opacity
const styles = StyleSheet.create({
bg: {
width: “100%”,
height: “100%”,
Opacity:0.5
},
content:{
width: “70%”,
height: “70%”,
backgroundColor: “rgba(255,255,355,0.4)”,
alignSelf: “center”
}
})
Related
Why can't I separate the last two components?
First, I tried to set justifyContent, but it did not work.
Then, I tried to set margin. It works for title and image, but not for components after Image
I think is because I'm setting image height, but without it image will not appear
import React, {useState, useEffect} from 'react';
import {View, Text, Image, StyleSheet} from 'react-native';
const Card = ({ evento }) => {
return (
<View style={styles.card_container}>
<Text style={styles.titulo}>
{evento.titulo} - R$ {evento.valor}
</Text>
<Image
style={styles.img}
source={{uri: 'https://via.placeholder.com/150'}}
/>
<Text styles={styles.descricao}>{evento.descricao}</Text>
<Text styles={styles.guia}>Organizador: {evento.guia}</Text>
</View>
);
};
const styles = StyleSheet.create({
card_container: {
// flex: 1,
// display: 'flex',
// flexDirection: 'column',
// justifyContent: 'space-between',
fontFamily: 'Rubik-Light',
margin: 3,
marginBottom: 15,
padding: 10,
borderRadius: 10,
backgroundColor: '#ffffff',
elevation: 1,
},
titulo: {
fontFamily: 'Rubik-Medium',
margin: 10,
},
img: {
//alignSelf: 'center',
width: 350, //TODO tamanho dinâmico
height: 200,
marginBottom: 10, // word
},
descricao: {
marginBottom: 10,
},
guia: {
marginTop: 10
}
});
export default Card;
It's a typo on the Text component. It should be style for the prop in Text component not styles. Here are the correct codes for the last two components.
<Text style={styles.descricao}>{evento.descricao}</Text>
<Text style={styles.guia}>Organizador: {evento.guia}</Text>
I want to achieve an animation each time a user taps on a button this shrinks in a smaller button.
GIF HERE
For this use TouchableHighlight component from react-native. It has onPressIn and onPressOut on which you can change buttons width and height.
e.g.
export const TouchableHighlightExample = () => {
const [BtnSize, setBtnSize ] = useState({ height: 40, width: "100%" });
const zoomIn=()=>{
setBtnSize({ height: 35, width: "90%",marginHorizontal:"5%" })
}
const zoomOut=()=>{
setBtnSize({ height: 40, width: "100%" })
}
return (
<View style={styles.container}>
<TouchableHighlight underlayColor="#ffffff00" onPressIn={zoomIn} onPressOut={zoomOut}>
<View style={[styles.button,BtnSize]}>
<Text style={{color: "white"}}>Touch Here</Text>
</View>
</TouchableHighlight>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10,
},
button: {
alignItems: 'center',
backgroundColor: 'red',
padding: 10,
borderRadius:40
},
});
Am trying to set my icon in left and text in center (like Image which I have give) in header by using flex but they both are going in center how to solve it.
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text style={styles.cross}>X</Text>
<Text style={styles.headerText}>Invester Profile</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
header: {
backgroundColor:'#212121',
height: 159.9,
flexDirection: 'row',
},
headerText: {
color: 'white',
marginTop: 20,
textAlign: 'center',
},
cross: {
color: 'white',
marginTop: 20,
}
})
Just add flex: 1 to headerText. Like this:
headerText: {
color: 'white',
marginTop: 20,
textAlign: 'center',
flex: 1
}
I wrote an app on react native using native base. when I try to put margin in button it will not show the text inside the button. How can I fix it?
When I delete the margin it work fine. but when i put the margin back it do not work. I search many source but no one show any solution at all.
Here is the code:
import React, { Component } from 'react';
import { Platform, StyleSheet, View, Image } from 'react-native';
import FloatLabelInput from './src/components/FloatLabelInput';
import {Button, Text} from 'native-base'
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Image
style={styles.background_Image}
source={require('./media/free-blurry-background-1636594.jpg')}
/>
<Image source={require('./media/Save-the-Children-Logo.png')}
style={{height: '10%', width: '100%'}}/>
<FloatLabelInput name='Username' security='false'/>
<FloatLabelInput name='Password' security='true'/>
<Button block rounded danger
onPress={() => console.log('my first app')}
style = {styles.button_style}
// accessibilityLabel="Learn more about this purple button"
>
<Text >LOGIN</Text>
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#C0C0C0',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
background_Image: {
backgroundColor: '#ccc',
flex: 1,
position: 'absolute',
width: '100%',
height: '100%',
justifyContent: 'center',
},
button_style: {
margin: '5%'
}
});
I believe this is a bug related to percentage by referring to this issue https://github.com/facebook/react-native/issues/19164.. For alternative solution try using px
button_style: {
margin: 5
}
In my application, I want to align a component (searchBar) to the right corner of my screen.
The mainWrapper has flexDirection RIGHT, so I tried to use justifyContent: "flex-end". But it did not work. What am I doing wrong here?
import React from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";
import { DefaultButton , ClickableIcon} from "../../mixing/UI";
import { Search } from "../../config/images";
const width = Dimensions.get("window").width;
const chooseWorkoutHeader = props => (
<View style={styles.mainWrapper}>
<View style={styles.buttonWrapper}>
<DefaultButton
buttonText={styles.buttonText}
width={width * 0.3}
backgroundColor="white"
onPress={() => props.onClickPlaylists}>
Playlists
</DefaultButton>
<DefaultButton
buttonText={styles.buttonText}
width={width * 0.3}
backgroundColor="white"
onPress={() => props.onClickSortBy}>
Sort By
</DefaultButton>
</View>
{/* <View style={styles.searchBar}> */}
<ClickableIcon
source={Search}
height={35}
width={35}
style={styles.searchBar}
// onIconPressed={() => {
// navigation.navigate("mainfeed");
// }}
/>
{/* </View> */}
</View>
);
const styles = StyleSheet.create({
mainWrapper: {
borderWidth: 3,
flexDirection: "row",
padding: 10,
width: width,
backgroundColor: "white"
},
buttonWrapper: {
flexDirection: "row",
justifyContent: "space-between",
width: width * 0.62
},
buttonText: {
fontSize: 18,
textAlign: "center",
color: "gray"
},
searchBar: {
borderWidth: 1,
padding: 1,
justifyContent: 'flex-end'
}
});
export default chooseWorkoutHeader;
I tried alignSelf as well. But none of them worked. How to move the ClickableIcon which has styles as "searchBar" to the right of the screen?
You can achive this by putting flex: 1 for buttonWrapper
buttonWrapper: {
flexDirection: "row",
justifyContent: "space-between",
width: width * 0.62,
flex: 1, // Add this line
}
You have two component inside mainWrapper (buttonWrapper and ClickableIcon). flex: 1 will expand maximum with of buttonWrapper and leave space for ClickableIcon in right side.
Do you tried adding this to your "mainWrapper":
display: "flex"
As far as i know "flex" only workings when you also set the display attribute