I have a view that I would like to set the background opacity to 0.5 however I need the text component inside of the view to show completely (as if its opacity was 1)
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: 'white',
opacity: 0.5,
borderRadius: 5,
}}>
<Paragraph>folder</Paragraph>
</View>
I've found that the most straighforward way of reaching this desired outcome is to specify that you want the backgroundColor to have this specific opacity, and not the entire View element. Check the 'Opacity' section of this page for more info: https://www.w3schools.com/css/css3_colors.asp#:~:text=RGBA%20color%20values%20are%20an,and%201.0%20(fully%20opaque)
For example, if you want to have a green background, with an opacity of 0.5, you would want to set
backgroundColor: rgba(0, 255, 0, 0.5)
If you want the text folder to be less opaque, then you will have to apply styling directly to it, while keeping its parent's opacity as desired -
<View
style={{
position: 'absolute',
bottom: 0,
left: 0,
backgroundColor: 'white',
opacity: 0.5,
borderRadius: 5,
}}>
<Paragraph>
<span style={{ opacity: 1 }}>
folder
</span>
</Paragraph>
</View>
You can also try setting the backgroundColor with an opacity attached directly to it -
backgroundColor: rgb(0, 0, 0, 0.5)
Related
In this code the mirrored property is not working. What is the problem in this code?
<Webcam
mirrored={true}
ref={webcamRef}
style={{
position: "absolute",
marginLeft: "auto",
marginRight: "auto",
left: 0,
right: 0,
textAlign: "center",
zindex: 9,
width: 640,
height: 480,
}}
/>
I want my video to cover the entire screen but it seems to cover only half of the screen as follows
I have styled the video component as follows:
<Video
source={{uri: this.state.video}}
style={{
position: 'absolute',
top: 0,
left: 0,
alignItems: 'stretch',
bottom: 0,
right: 0,
height: Dimensions.get('window').width,
}}
resizeMode="cover"
repeat={true}
/>
Could anyone tell me how to achieve this behavior and where am I going wrong?
Any help would be useful.
Somehow giving a height has solved the mentioned issue like follows:
<Video
source={{uri: this.state.video}}
style={{
position: 'absolute',
top: 0,
left: 0,
alignItems: 'stretch',
bottom: 0,
right: 0,
height: "90%",
}}
resizeMode="cover"
repeat={true}
/>
I've now been working in circles trying to understand what is happening. I'm making a design library using storybook with Tailwind. I can't seem to get the :before pseudo class to work. No matter where I place it in the styling, then it's never rendered.
An example is that I am trying to make a component which uses react-slick, and want to style the navigation:
'& .slick-dots': {
bottom: -30,
display: 'block',
left: 4,
listStyle: 'none',
margin: 0,
padding: 0,
position: 'absolute',
textAlign: 'center',
width: '100%',
'& li': {
cursor: 'pointer',
display: 'inline-block',
height: 20,
margin: '0 5px',
padding: 0,
position: 'relative',
width: 20,
'& button': {
border: 0,
background: 'transparent',
display: 'block',
height: 20,
width: 20,
outline: 'none',
lineHeight: 0,
fontSize: 0,
color: 'transparent',
padding: 5,
cursor: 'pointer',
'&:before': {
position: 'absolute',
top: 0,
left: 0,
content: '',
width: 20,
height: 20,
fontFamily: 'sans-serif',
fontSize: 20,
lineHeight: 20,
textAlign: 'center',
color: '#000000',
opacity: 0.75,
display: 'inline-block',
},
},
},
},
Found the problem. The :before pseudo class won't render unless there is content, but in the case of css in js, then content needs to look like this content: '"text"', and not content: 'text',
Another way is to define your content in the tailwind.config.js
theme: {
extend: {
content: {
'arrowNeonGreen': 'url("../src/images/icons/arrow-neon-green.svg")',
},
fontSize: {
...
You can render it using the following className. Make sure to include an inline-block and width.
<Link className="after:content-arrowNeonGreen after:inline-block after:w-8">Learn More</Link>
You can also apply a hover state like this hover:after:content-arrowNeonGreen
<Link className="hover:after:content-arrowNeonGreen after:content-arrowBlack after:inline-block after:w-8">Learn More</Link>
to get the :before class to work, you have to use tailwindcss-pseudo-elements package to customize your pseudo elements. check the docs below
https://www.npmjs.com/package/tailwindcss-pseudo-elements
position absolute with all its properties in 0 makes the child element expand in the parent element, and if I put a padding in the parent element without a height the child with the position absolute cover until the of the parent padding, my theory is right or I am forgotting something here?there could be another different case?
import React from 'react';
import {View, StyleSheet} from 'react-native';
import Video from 'react-native-video';
export default function Reproductor(props) {
return (
<View style={styles.container}>
<View style={styles.videoContainer}>
<Video
source={{
uri:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
}}
resizeMode="cover"
style={styles.video}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
height: 250,
justifyContent: 'center',
alignItems: 'center',
},
videoContainer: {
width: '90%',
paddingTop: '56.25%',
borderRadius: 20,
overflow: 'hidden',
borderWidth: 3,
backgroundColor: 'black',
},
video: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
});
the child (video) covers the padding
An absolutely positioned element is an element whose computed
position value is absolute or fixed. The top, right,
bottom, and left properties specify offsets from the edges of the element's containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/position
position absolute related to the edges of the parent element (= ignores parent padding/border).
<div style="padding: 50px; background: red; color: white; position:relative;">
<div style="border: 1px solid white; height: 50px;"></div>
<div style="position: absolute; background: blue; top:0; left:0; color: white;">child</div>
</div>
top: 0; right: 0; bottom: 0; left: 0; is the way to set overlay:
Example: https://www.w3schools.com/howto/howto_css_overlay.asp
<div style="padding: 50px; background: red; color: white; position:relative;">
<div style="border: 1px solid white;">div</div>
<div style="position: absolute; background: rgba(0, 0, 0, 0.5); top:0px; left:0px; right: 0; bottom: 0; color: white;">overlay</div>
</div>
Add space by top: 10px; for example (or em % and so on)
<div style="padding: 50px; background: red; color: white; position:relative;">
<div style="border: 1px solid white;">Parent</div>
<div style="position: absolute; background: blue; top:10px; left:10px; color: white;">child</div>
</div>
Or add a margin for the absolute element:
<div style="padding: 50px; background: red; color: white; position:relative;">
<div style="border: 1px solid white;">Parent</div>
<div style="position: absolute; background: blue; top:0px; left:0px; color: white;margin: 10px;">margin: 10px around</div>
</div>
You find more tricks/ideas but these are the basics ideas.
Thank you I understand, but you said that it cover padding and border (position absolute related to the edges of the parent element (= ignores parent padding/border).), and I try to cover the border too but it just ignore the padding not the border, what is my mistake here?
export default function MainScreen(props) {
return (
<View style={style.container}>
<View style={style.element} />
</View>
);
}
const style = StyleSheet.create({
container: {
borderWidth: 3,
padding: 40,
alignSelf: 'center',
width: 200,
height: 200,
backgroundColor: 'grey',
},
element: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
width: 100,
height: 100,
backgroundColor: 'purple',
},
});
I am trying to use react-autocomplete in my component. Everything is working fine results are shown. But I am not able to style the default input box.
this is autocomplete
<Autocomplete
getItemValue={this.getItemValue}
items={this.state.autocompleteData}
renderItem={this.renderItem}
value={this.state.value}
onChange={this.onChange}
onSelect={this.onSelect}
menuStyle={menuStyle}
/>
style for dropdown menu is working fine.
const menuStyle = {
borderRadius: '3px',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
background: 'rgba(255, 255, 255, 0.9)',
padding: '2px 0',
fontSize: '90%',
position: 'fixed',
overflow: 'auto',
maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
"zIndex": 100,
};
i tried to add style as per answer in this question but it's not working.
how to increase input text box size in react-autocomplete?
How to add style to input box?
The object given to prop inputProps is used as props for the input, so you can give an object with a style property containing your menuStyles to that.
<Autocomplete
getItemValue={this.getItemValue}
items={this.state.autocompleteData}
renderItem={this.renderItem}
value={this.state.value}
onChange={this.onChange}
onSelect={this.onSelect}
inputProps={{ style: menuStyle }}
/>
inputProps={{ style: menuStyle }}
or you can do
styling={
borderRadius: '3px',
boxShadow: '0 2px 12px rgba(0, 0, 0, 0.1)',
background: 'rgba(255, 255, 255, 0.9)',
padding: '2px 0',
fontSize: '90%',
position: 'fixed',
overflow: 'auto',
maxHeight: '50%', // TODO: don't cheat, let it flow to the bottom
"zIndex": 100,
}