I'm trying to make a component absolute in react native, but I can't get the result I want. When I change the order of the codes, the way it works changes.
1st case
<View style={{ flex: 1, width: '100%' }}>
<View
style={{
position: 'absolute',
top: 0,
right: 0,
width: 70,
height: 70,
backgroundColor: '#FF0000',
zIndex: 20,
elevation: 20,
}}
/>
<View style={{ width: '100%', height: '100%', backgroundColor: '#C6C6C6' }} />
</View>
In this case, it happens as follows. Absolute component is not visible.
2st case
<View style={{ flex: 1, width: '100%' }}>
<View style={{ width: '100%', height: '100%', backgroundColor: '#C6C6C6' }} />
<View
style={{
position: 'absolute',
top: 0,
right: 0,
width: 70,
height: 70,
backgroundColor: '#FF0000',
zIndex: 20,
elevation: 20,
}}
/>
</View>
In this case, the absolute component looks as follows.
<View style={{ width: '100%', height: '100%', backgroundColor: '#C6C6C6' }} />
In case 1, it doesn't work if zIndex and elevation are set. Why does relocating the above code prevent it from being absolute?
Related
I'm quite new to React Native and React in general, and I'm stuck on this particular problem:
I followed some tutorials and other answers on other posts there on StackOverflow, but I can't manage to see the border Shadow I set on these "cards". The shadow isn't displayed on my phone.
I hope so of you old wizards of the internet can help me find a solution to this problem, I'd be really grateful.
export class Boss extends Component<IProps, IState> {
constructor(props: any) {
super(props);
this.state = {
hp: props.hp,
ap: props.ap,
};
}
render(){
return(
<View style={styles.cardContainer}>
<View style={[styles.cardBackground , this.state.hp > 0 ?
{ backgroundColor: 'gold' }
: { backgroundColor: 'red' }]}>
<View style={styles.cardFrame}>
<Text style={styles.cardName}>{this.props.name}</Text>
<View style={styles.bossLifeWrapper}>
<Button title={'+'} onPress={this.incrementeHP}></Button>
<Text style={styles.bossHP}>{this.state.hp}</Text>
<Button title={'-'} onPress={this.decrementeHP}></Button>
</View>
<Text style={styles.bossAP}>{this.state.ap}</Text>
<Text style={styles.bossPowerLabel}>{this.props.passive}</Text>
<View style={styles.cardTextBox}>
<Text style={styles.bossPowerLabel}>Pouvoir: {this.props.powerLabel}</Text>
<Text style={styles.bossEnrageLabel}>Enrage: {this.props.enrageLabel}</Text>
</View>
</View>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
cardContainer: {
width: '80%',
height: 450,
backgroundColor: "#171314",
alignItems:"center",
borderStyle: "solid",
borderColor: "black",
borderWidth: 1,
margin: '10%',
borderRadius: 10,
padding: 10,
shadowColor: "white",
shadowOffset: {
width: 0,
height: 8,
},
shadowOpacity: 0.44,
shadowRadius: 10.32,
elevation: 16,
},
cardBackground: {
backgroundColor: '#171314',
borderRadius: 5,
padding: 10,
zIndex: 0
},
cardFrame: {
zIndex: 1,
position: 'relative',
height: '98%',
maxWidth: '97%',
left: '1%',
top: '0.5%',
display: 'flex',
flexDirection: 'column',
backgroundColor: 'white'
},
cardName: {
flex: 1,
backgroundColor: 'red',
alignItems:"center",
borderStyle: "solid",
borderBottomColor: "grey",
borderBottomWidth: 5,
margin: 5,
marginHorizontal: 5,
fontSize: 20,
height: 10
},
bossHP: {
width: '100%',
color: 'blue'
},
bossAP: {
width: '100%',
color: 'red'
},
bossLifeWrapper: {
flex: 1,
flexDirection: "column"
},
});
have you tried elevate in box styles? ex: elevate:10,
I'm building a React Native app for iOS and Android. But when I make the bottomtabnavigation and making a custom button in it. The icon and or the views underneath the icon are not showing correctly on iOs but does on android.
Here is the code:
<View style={{borderRadius: 50, alignItems: 'center', justifyContent: 'center', padding: 3, top: -25, backgroundColor: '#F6227D'}}>
<View style={{borderRadius: 50, alignItems: 'center', justifyContent: 'center', padding: 3, top: -3, backgroundColor: '#4A2485'}}>
<View style={{borderRadius: 50, alignItems: 'center', justifyContent: 'center', padding: 5, top: -3, backgroundColor: '#0551D8'}}>
<Icon name={'home'} style={{textAlign: 'center'}} size={35} type='material' color={focused ? 'white' : 'black'}/>
</View>
</View>
</View>
iOS:
Android:
You are missing height constant here. add it and try again.
Example:
<View style={{borderRadius: 50, alignItems: 'center', justifyContent: 'center', padding: 3, top: -25, backgroundColor: '#F6227D', height: 100}}>
<View style={{borderRadius: 50, alignItems: 'center', justifyContent: 'center', padding: 3, top: -3, backgroundColor: '#4A2485', height: 90}}>
<View style={{borderRadius: 50, alignItems: 'center', justifyContent: 'center', padding: 5, top: -3, backgroundColor: '#0551D8', height: 80}}>
<Icon name={'home'} style={{textAlign: 'center'}} size={35} type='material' color={focused ? 'white' : 'black'}/>
</View>
</View>
</View>
I need help in designing this button in react-native. Please help me?
I will help you out for this problem. but please know the procedures to ask a question. There should be some initial work and try out before asking a question. As I knew that you are a new contributor and i also did mistakes like this. So I am helping you.
You can achieve this by referring the following code:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.btnContainer}>
<View style={styles.btnLabelStyle}>
<Text>adfadafd</Text>
</View>
<View style={styles.leftIcon} >
<Text style ={{color : '#0a6df0', fontSize:25, fontWeight:'bold'}}>+</Text>
</View>
<View style={styles.rightIcon}>
<Text style={{ color: 'white' }}>{'>'}</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: 'grey',
padding: 8,
alignItems: 'center',
},
btnContainer: {
width: '70%',
height: 40,
justifyContent: 'center',
borderRadius: 8,
paddingRight: 20,
backgroundColor: 'white',
borderColor:'green',
borderWidth:1,
},
leftIcon: {
backgroundColor: 'white',
width: 40,
height: 40,
alignItems:'center',
justifyContent:'center',
position: 'absolute',
left: -10,
borderColor:'#0a6df0',
borderWidth:1,
borderRadius: 20,
},
rightIcon: {
backgroundColor: 'green',
alignItems: 'center',
width: 20,
height: 20,
position: 'absolute',
right: -9,
borderRadius: 20,
},
btnLabelStyle:{
marginLeft:40, //lefticon width
marginRight:20, // right icon width
}
});
You can also use this expo snack here
I have an issue with setting up shadows in Android.
When add element exactly after my element with shadows is, shadows are being covered by them. I have no this issue in iOS.
I will post some code and screenshots to explain the situation.
Here's how it looks on iOS:
Here's how it looks on Android:
This is my render function in Screen component:
render() {
const ticket = this.props.navigation.getParam("ticket", {});
return (
<Fragment>
<SafeAreaView style={{ flex: 0 }} />
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 0.6 }}>
<TopSmallCroppedComponent />
</View>
<ScrollView style={styles.overlayComponent}>
<Text style={baseStyles.screenTitle}>
{strings.YouSetPaymentPickUp}
</Text>
<TicketCardComponent ticket={ticket} />
</ScrollView>
<View
style={[
baseStyles.bottom,
{
flex: 0.4,
marginLeft: 35,
marginRight: 35,
bottom: 10
}
]}
>
<Text style={styles.notAtHomeText}>{strings.NotBeAtHome}</Text>
<ButtonGreenComponent
text={strings.PayOnlineButton}
pressed={() => this._onPressPayOnlineButton(ticket)}
/>
</View>
<LoadingView
size="large"
spinnerColor={theme.WHITE_COLOR}
backgroundColor="#0000005f"
visible={this.state.modalVisible}
/>
</SafeAreaView>
</Fragment>
);
}
Screen component styles:
export default StyleSheet.create({
overlayComponent: {
position: "absolute",
top: 0,
bottom: 0,
width: "100%",
height: "100%",
alignSelf: "center"
},
notAtHomeText: {
alignSelf: "center",
fontFamily: theme.FONT_REGULAR,
color: theme.LABEL_COLOR,
fontSize: theme.FONT_SIZE_LARGE,
marginBottom: 10
}
});
TicketCardComponent:
render() {
const { ticket } = this.props;
return (
<View style={[styles.cardBox, baseStyle.shadow]}>
<View
style={[styles.cardBoxEventOverlayIcon, baseStyle.shadow]}
elevation={5}
>
<Image
source={this.cardImages.eventIcon}
style={{ height: 30, width: 30, alignSelf: "center" }}
/>
</View>
<View style={[styles.cardBoxUserTicket]}>
<Text style={styles.cardBoxTicketUserLabel}>
{strings.YourPaymentCollector}
</Text>
<View style={styles.cardBoxUserInfoWrapper}>
<Image
source={this.cardImages.userIcon}
style={styles.cardUserIcon}
/>
<View style={styles.cardUserInfoTextsWrapper}>
<Text style={styles.userNameText}>
{this._renderTicketAssignee(ticket)}
</Text>
<Text style={styles.ticketCreationTimeText}>
{this._renderRelativeDate(ticket.creationDate)}
</Text>
</View>
</View>
</View>
</View>
);
}
TicketCardComponent styles:
export default StyleSheet.create({
cardBox: {
backgroundColor: theme.WHITE_COLOR,
borderTopLeftRadius: 6,
borderTopRightRadius: 6,
borderBottomRightRadius: 6,
borderBottomLeftRadius: 6,
paddingLeft: 22,
paddingRight: 22,
paddingTop: 35,
marginLeft: 35,
marginRight: 35
},
cardBoxEventOverlayIcon: {
width: 56,
height: 56,
position: "absolute",
backgroundColor: "white",
top: -(56 / 2),
left: 56 / 2,
justifyContent: "center",
borderRadius: 56 / 2
},
cardHeading: {
fontSize: theme.FONT_SIZE_LARGER,
fontFamily: theme.FONT_MEDIUM
},
cardBoxUserTicket: {
paddingTop: 10,
paddingBottom: 20
},
cardBoxTicketUserLabel: {
fontFamily: theme.FONT_MEDIUM,
color: theme.LABEL_COLOR,
fontSize: theme.FONT_SIZE_MEDIUM_LARGE
},
cardBoxUserInfoWrapper: {
flexWrap: "wrap",
alignItems: "flex-start",
flexDirection: "row",
height: 50,
marginTop: 15,
marginBottom: 15
},
cardUserIcon: {
width: 50,
height: 50,
flexDirection: "column"
},
cardUserInfoTextsWrapper: {
height: 50,
flexDirection: "column",
marginLeft: 10,
justifyContent: "space-between",
paddingTop: 4,
paddingBottom: 4
},
userNameText: {
fontFamily: theme.FONT_BLACK,
color: theme.LABEL_COLOR,
fontSize: theme.FONT_SIZE_LARGE
},
ticketCreationTimeText: {
fontFamily: theme.FONT_MEDIUM,
color: theme.LABEL_COLOR,
fontSize: theme.FONT_SIZE_SMALL
}
});
Hi I am trying move logo out of borders for IOS it works fine but Android have a problem the logo is covered by view on background. I am tried to set up background color to transparent but doesn't work.
Any idea how to solvate it?
and here is my code:
const styles = StyleSheet.create({
wallWrapper: {
backgroundColor: '#00000000',
borderWidth: 1,
borderColor: 'green',
paddingTop: 40,
},
wallImageBorderEffect: {
borderWidth: 1,
borderColor: 'red',
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
height: 30,
backgroundColor: 'gray',
},
});
...
render() {
return (
<View style={styles.wallWrapper}>
<View style={styles.wallImageBorderEffect}>
<Image
style={{
height: 45,
width: 105,
position: 'absolute',
bottom: 6,
overflow: 'hidden',
}}
resizeMode="cover"
source={require('./images/mock-logo.png')}
/>
</View>
<View style={{
flex: 1,
justifyContent: 'center',
flexDirection: 'column',
alignItems: 'center',
height: 400,
}}>
</View>
</View>
);
}
}
This is a known issue on Android. The overflow attribute is not supported on Android yet (only on iOS).
But you can support the feature request here.
You could maybe try to move your <Image /> component outside of the <View /> and fix the position by adjusting top props.