I want to change the color of the background behind the label. I've tried changing it in the view component where we use tailwind. I have also tried to simply check if Victory-native have anything that could help me with that.
I managed to create this in my app
But I really want it to look like this
Hope anyone could help me with this or point me in the right direction:))
<View style={tw`bg-orange-100 rounded-2xl mb-3 mr-5 w-${size} h-45 p-[0px]`}>
<View style={tw`self-center`}>
<VictoryChart height={190} width={350}>
<VictoryAxis
style={{
axis: { stroke: 'transparent' },
ticks: { stroke: 'transparent' },
tickLabels: { fill: 'white' },
}}
/>
<VictoryGroup offset={20}>
<VictoryStack>
<VictoryBar
data={usage}
cornerRadius={{ top: 9}}
style={{ data: { fill: '#FF9B68' } }}
/>
<VictoryBar
data={estimate}
cornerRadius={{ top: 9}}
style={{ data: { fill: '#FFC9AD' } }}
/>
</VictoryStack>
</VictoryGroup>
</VictoryChart>
</View>
</View>
</>
Related
I have an issue with the text of the TabBar that is not written on same line like shown in the photo. On small screen (Iphone 12) it works perfectly but when i changed to big screen of (Ipad 12.9 inch) How can i prevent that?
I have my code:
<Tab.Screen
name="Shop"
component={ShopNavigator}
options={(navigation, route) => ({
title: 'Shop',
tabBarVisible: false,
tabBarIcon: ({ props, focused }) => (
<View {...props} >
<View style={{flex: 2, alignItems: 'center'}}>
<Image source={SHOP} resizeMode="contain" style={[styles.imgSize, focused && { opacity:1 }]} />
<Text style={[styles.label, focused && { opacity:1, textDecorationLine: 'underline' }]}>Vente en ligne</Text>
</View>
</View>
)
})}
/>
imgSize: {
height: 30,
width: 30,
padding: 15,
opacity: 0.8,
},
label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
}
Just give it more space:
label: {
color: '#FFF',
fontSize: 10,
textAlign: 'center',
fontFamily: 'Barlow-Bold',
opacity: 0.8,
width: "100%" //should take. 100% of the available space
}
I would also add the numberOfLines = 1 prop to the Text component to prevent incredibly small screens
Nothing works except returning empty function for renderLabel then having renderIcon display icon and text (placed side by side)
here is the code for more understanding
const renderTabBar = props => {
return <TabBar
{...props}
indicatorStyle={{ backgroundColor: 'grey' }}
style={{ backgroundColor: '#fff' }}
renderIcon={({ route, focused, color }) => {
return <Text style={{ color: '#000', margin: 8 }}><AntIcon
size={13}
name={route?.icon}
color={'#000'}
/>
{" "} {route.title}
</Text>}
}
renderLabel={({ route, focused, color }) => {}}
/>
}
I encounter a strange situation with React Native and flexbox.
In this situation, I don't understand why the x buttons exceed their container (cyan background) despite a flexWrap.
I would like the x buttons to return to the row within the cyan container, like the title (But the buttons a b c d must stay on the right, this works fine).
https://codesandbox.io/s/lucid-dream-0q5yo?file=/src/App.js
class App extends Component {
render() {
return (
<View style={styles.container}>
<ListItem>
<ListItem.Content style={styles.content}>
<ListItem.Title>
My title My title My title My title My title My title My title My
title
</ListItem.Title>
<View style={styles.chart_container}>
<View style={styles.chart}></View>
<View style={styles.item_container}>
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
<Button title="x" />
</View>
</View>
</ListItem.Content>
<View style={styles.cell_last}>
<View style={styles.options_container}>
<Button title="a" />
<Button title="b" />
<Button title="c" />
<Button title="d" />
</View>
</View>
</ListItem>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: "400px"
},
content: {
backgroundColor: "cyan"
},
chart_container: {
flexDirection: "row"
},
chart: {
backgroundColor: "red",
width: 100,
height: 100
},
item_container: {
backgroundColor: "green",
flexDirection: "row",
flexWrap: "wrap"
},
cell_last: {
alignItems: "flex-end",
alignSelf: "flex-start"
},
options_container: {
flexDirection: "row",
justifyContent: "flex-end"
}
});
In order to wrap item_container must know the width.
chart_container got 2 child chart and item_container. First child chart got fixed width 100, second child must fill rest of the space in order to do the wrap children.
item_container: {
flex: 1,
backgroundColor: "green",
flexDirection: "row",
flexWrap: "wrap"
},
It appears to behave when you unset the flex shrink property: https://codesandbox.io/s/billowing-cdn-dbbxm
chart_container: {
flexDirection: "row",
flexShrink: 1
},
Since you already have the container set to a fixed width of 400px and the chart to 100px you will need to set a width for item_container as well. I added a calc function to subtract the width of the chart from the overall width of the container and set that as the width of item_container although you can set a fixed 300px width to it too. You can check everything here: https://codesandbox.io/s/funny-kare-3x0q4
item_container: {
alignItems: "center",
backgroundColor: "green",
flexDirection: "row",
flexWrap: "wrap",
justifyContent: "space-evenly",
width: "calc(100% - 100px)"
},
I am using Card component from Material UI. It looks like this:
You can see both: Star and Plus icon have inherited opacity from the background image.
I want the Plus icon to have opacity 1. Is this possible? Here is code:
<Card
style={{
position: "relative",
}}
>
<IconButton
color="primary"
className={classes.star}
style={{
pointerEvents: itemEnabled ? "auto" : "none"
}}
>
{item.favorite ? <Star /> : <StarBorder />}
</IconButton>
<IconButton
color="primary"
className={classes.permission}
onClick={e => {
e.preventDefault();
e.stopPropagation();
console.log("test")
}}
>
<Add />
</IconButton>
<CardActionArea style={{
width: "100%",
pointerEvents: itemEnabled ? "auto" : "none"
}}>
<CardMedia
className={classes.media}
image={requiredImage}
style={{
opacity: itemEnabled ? 1 : 0.4,
}}
title={item.favorite ? item.link.name : item.name}
/>
</CardActionArea>
</Card>
here are some styles used in className if interested:
const styles = theme => ({
media: {
height: 140,
width: "100%"
},
star: {
position: "absolute",
right: 0,
color: "white",
zIndex: 555
},
permission: {
position: "absolute",
right: 0,
top: 30,
color: "white",
zIndex: 555
},
linksTitle: {
padding: 20
}
});
I have a profile image in my header component and the source of it comes from database as a string array. What my problem is when i fetch user picture from database, it is slightly cutted from the top. So the head of user use looks like cutted. The image is in a view with borderRadius in order to make it circular.
What i tried:
resizeMode: 'cover',
resizeMode: 'contain',
position:'absolute',
bottom: 0,
and none of them are worked so far.
If you help me i will be appreciated,
thanks.
PS: i have looked several(more than 10) topics in stackoverflow and i could not make it.
Update
Here is my Header Component:
<View style={styles.container}>
<View style={styles.backButtonContainer} >
{isBackButtonIconVisible ? this._renderBackButtonIcon() : null}
</View>
<View style={styles.textContainer} >
<Text style={styles.text}>{text}</Text>
</View>
<View style={styles.profileButtonContainer}>
{isProfileIconVisible ? this._renderProfileIcon() : null}
{isProfilePictureVisible ? this._renderProfilePicture() : null}
</View>
</View>
Rendering Profile Picture:
_renderProfilePicture() {
let profileIcon = (
<View style={styles.profileButtonContainer} >
<CircularProfilePicture
onPress={this.props.onProfilePress}
ProfilePictureSourceUri={this.props.ProfilePictureSourceUri}
></CircularProfilePicture>
</View>
);
return profileIcon;
}
Here is my CircularProfilePicture component
class CircularProfilePicture extends Component {
render() {
const {onPress} = this.props;
return (
<View style={styles.container}>
<TouchableOpacity
onPress={() => onPress()}
>
<Image source={{ uri: 'data:image/png;base64,' + this.props.ProfilePictureSourceUri }}
style={styles.image} />
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10,
},
image:{
width: 55,
height: 60,
alignSelf: 'center',
resizeMode: 'cover',
}
});
try this:
padding:3px; // putting your image in the middle of div, setting in px the
value you need
position:absolute;
width: 200px; // the value that you have designed your div
height: 200px; //the value that you have designed your div
border-radius:30%; // set the value you need;
-moz-border-radius: 30%; //ancient mozzila versions
-webkit-border-radius:30%; //ancient chrome or Safari versions
If I understand you correctly I think the style props alignItems and justifyContent might help you center the Image inside the View. Either that or position the View absolute and use flex: 1 on the Image to make it take upp all available space in the View.
I'm using the MUI Card and CardMedia components in my app but can't figure out how to overlay text on top of the image. This is a simplified example of what I'm trying:
<Card>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
overlay: {
position: 'relative',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
I've tried placing the text div in above the CardMedia, below it, inside it, outside the Card entirely, and using different position values but can't figure this out at all. The beta versions of MUI included an overlay property on the CardMedia, but the v1 library doesn't seem to have anything like that.
Any know how to properly do this? Thanks in advance for any help!
Your CSS is off, you'll want to absolutely position the styles.overlay, and make sure the Card is position relative
Try something like this:
<Card style={styles.card}>
<CardMedia image={this.props.preview} style={styles.media}/>
<div style={styles.overlay}>
this text should overlay the image
</div>
</Card>
const styles = {
media: {
height: 0,
paddingTop: '56.25%' // 16:9
},
card: {
position: 'relative',
},
overlay: {
position: 'absolute',
top: '20px',
left: '20px',
color: 'black',
backgroundColor: 'white'
}
}
Use the code below if you want to have an overlay like the Card in version 0. Remember to set the position of the container to relative so the absolute position of the overlay can take effect:
<Card sx={{ maxWidth: 345 }}>
<Box sx={{ position: 'relative' }}>
<CardMedia
component="img"
height="200"
image="https://mui.com/static/images/cards/contemplative-reptile.jpg"
/>
<Box
sx={{
position: 'absolute',
bottom: 0,
left: 0,
width: '100%',
bgcolor: 'rgba(0, 0, 0, 0.54)',
color: 'white',
padding: '10px',
}}
>
<Typography variant="h5">Lizard</Typography>
<Typography variant="body2">Subtitle</Typography>
</Box>
</Box>
{...}
</Card>