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,
Related
I have texts listed one below the other. I want the spaces between the list to be bigger but I have no idea how to do it.
const CustomInput = () => {
return (
<View style={styles.container}>
<Text>Book Titles</Text>
<Text>Genre</Text>
<Text>Author</Text>
<Text>Number of pages</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
height: '50%',
borderColour: '#e8e8e8',
borderWidth: 1,
borderRadius: 5,
paddingHorizontal: 10,
marginVertical: 5,
},
});
export default CustomInput;
Vertically space added between your text
const CustomInput = () => {
return (
<View style={styles.container}>
<Text>Book Titles</Text>
<Text>Genre</Text>
<Text>Author</Text>
<Text>Number of pages</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
height: '50%',
borderColour: '#e8e8e8',
borderWidth: 1,
borderRadius: 5,
justifyContent:'space-between',
paddingHorizontal: 10,
marginVertical: 5,
},
});
export default CustomInput;
Horizontally space added between your text
const CustomInput = () => {
return (
<View style={styles.container}>
<Text>Book Titles</Text>
<Text>Genre</Text>
<Text>Author</Text>
<Text>Number of pages</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
width: '100%',
height: '50%',
flexDirection:'row',
borderColour: '#e8e8e8',
borderWidth: 1,
borderRadius: 5,
justifyContent:'space-between',
paddingHorizontal: 10,
marginVertical: 5,
},
});
export default CustomInput;
I am trying to create a view with a top card showing an image and a bottom card showing relative information in a horizontal flatlist.
The style gets broken on the first load and as soon as I refresh the code without any change, the component shows the correct style as expected.
This is happening after I migrated the react native from 0.60.5 to 0.61.0.
This is the code for component.
<View
accessible={Platform.OS === 'ios' ? false : true}
style={styles.container}>
<View style={styles.itemContainer}>
<View style={styles.topContainer}>
<ImageBackground
source={{uri: item.img, cache: 'default'}}
resizeMode="contain"
imageStyle={{borderRadius: 4}}
style={styles.topContainer}>
</ImageBackground>
<View style={styles.bottomContainer}>
<Text style={styles.destination}>{item.title}</Text>
<Text style={styles.subtitle}>{item.description}</Text>
</View>
</View>
</View>
</View>
This is the stylesheet.
import {StyleSheet, Platform} from 'react-native';
import Color from '../../../../utilities/Color';
import {BaseStyle} from '../../../../utilities/Style';
const flex1 = {
flex: 1,
};
const flexRow = {
flexDirection: 'row',
};
const centerView = {
justifyContent: 'center',
alignItems: 'center',
};
const cardStyle = {
...Platform.select({
ios: {
borderWidth: 1,
borderColor: Color.white,
shadowOffset: {width: 1, height: 1},
shadowOpacity: 0.2,
shadowRadius: 2,
borderRadius: 2,
shadowColor: 'rgba(0, 0, 0, 1.0)',
},
android: {
elevation: 2,
borderRadius: 2,
},
}),
};
export default StyleSheet.create({
container: {
...flex1,
padding: 16,
borderBottomWidth: 1,
borderColor: '#efefef',
},
title: {
...BaseStyle.font16RobotoBoldGray,
},
subtitle: {
...BaseStyle.textSubHead1,
top: 10,
marginRight: 10,
color: Color.lightTextGray,
},
});
export const ItemStyle = StyleSheet.create({
container: {
...flex1,
marginBottom: 15,
},
itemContainer: {
height: 210,
width: 260,
marginRight: 15,
},
topContainer: {
height: 162,
borderRadius: 4,
},
bottomContainer: {
...cardStyle,
position: 'absolute',
left: 0,
right: 0,
top: 120,
marginHorizontal: 8,
paddingHorizontal: 15,
paddingVertical: 12,
borderRadius: 4,
backgroundColor: Color.white,
},
destination: {
...BaseStyle.textTitle,
fontSize: 14,
lineHeight: 18,
color: Color.darkGray,
marginBottom: 8,
},
subHeading: {
marginBottom: 4,
},
caption: {
...BaseStyle.textCaption,
color: Color.lightTextGray,
},
subtitle: {
...BaseStyle.textSubHead1,
},
});
This is the image at the first load
This is the image after I refresh the code.
Please suggest a way, how can I debug it. Or something wrong I am doing in my stylesheet?
Removing all the borderRadius solved it.
I am a newbie to react-native. I am currently trying to implement the code which can scan and capture image for an ID card. Basically i am able to take image and save to gallery by using react native camera, but i have no idea how to detect the ID card border. I am seeking help which can guide me about the card border detection or some open source library that can implement such function.
Basically, I have already tried to implement react-native-documentscanner-android and rn-doc-scanner-android library. But react-native-documentscanner-android library i failed to implement and the rn-doc-scanner-android is without card border detection function.
Here is my code:
import React, {Component} from 'react';
import { RNCamera } from 'react-native-camera';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import {
Colors
} from 'react-native/Libraries/NewAppScreen';
import Dimensions from 'Dimensions';
import CameraRoll from "#react-native-community/cameraroll";
export default class App extends Component {
constructor(props){
super(props)
}
state = {
barcodes: [],
}
render(){
const { height, width } = Dimensions.get('window');
const maskRowHeight = Math.round((height - 500) / 20);
const maskColWidth = (width - 300) / 2;
return (
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={{
flex: 1,
width: '100%',
justifyContent: "center"
}}
>
<View style={styles.maskOutter}>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
<View style={[{ flex: 30 }, styles.maskCenter]}>
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
<View style={styles.maskInner} />
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
</View>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
</View>
</RNCamera>
<View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center', backgroundColor: '#2E8B57', margin: 5}}>
<TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
<Text style={{ fontSize: 14 }}> SNAP </Text>
</TouchableOpacity>
</View>
</View>
);
}
takePicture = async() => {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
console.log(data.uri);
ToastAndroid.show(data.uri, ToastAndroid.LONG);
if(data.uri!= null){
console.log('not null')
}else{
console.log('null')
}
CameraRoll.saveToCameraRoll(data.uri);
}
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#2E8B57",
overflow: 'hidden',
//width: 350,
//height: 150,
},
camera: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
maskOutter: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'space-around',
},
maskInner: {
width: 300,
//height: 300,
backgroundColor: 'transparent',
borderColor: '#DC143C',
borderWidth: 1,
},
maskFrame: {
backgroundColor: 'rgba(1,1,1,0.6)',
},
maskRow: {
width: '100%',
},
maskCenter: { flexDirection: 'row' },
});
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
}
});
I'm having an issue with React Native. I'm trying to put an image as a header, which needs to resize itself responsively to fit inside of the viewport and be centred horizontally.
Unfortunately, I'm unable to produce any sort of result using styling arguments such as resizeMode: 'contain' and the image disappears when following the advice of people who say to use the styling arguments width: undefined and height: undefined.
I'm a bit new to React Native so it's certainly possible that there's a blindingly obvious issue with how I'm approaching this problem. I'm also new to posting on Stack Overflow so any pointers about how best to describe or show my problem would also be most welcome.
Here is the source code I am using which produces the result where the image is too big for the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image going off the side of the screen
And here is the Source Code I am using where the image disappears off the screen:
export default class ComponentIndex extends React.Component {
render(){
return(
<ImageBackground
source={require('./../../assets/images/background_placeholder.png')}
style={{width: '100%', height: '100%'}}
>
<View style={styles.parentView}>
<View style={styles.elementSpacer}>
<Image
source={require('./../../assets/images/iview_learning_logo.png')}
style={styles.headerImage}
/>
</View>
<View style={styles.elementContainer}>
<Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
</View>
<View style={styles.elementContainer}>
<Button rounded style={styles.startButton}>
<Text style={styles.startButtonText}>LET'S GO</Text>
</Button>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
parentView: {
flex: 1,
flexDirection: 'column',
padding: 30,
justifyContent: 'center',
},
headerImage: {
resizeMode: 'contain',
height: undefined,
width: undefined,
},
elementSpacer: {
flex: 1,
},
elementContainerHeader: {
height: 60,
},
elementContainer: {
margin: 10,
},
subheadingText: {
fontSize: 18,
textAlign: 'center',
//fontFamily: 'Arial',
},
startButton: {
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
paddingRight: 25,
paddingLeft: 25,
backgroundColor: '#c00000',
},
startButtonText: {
color: 'white',
//fontWeight: 'bold',
fontSize: 20,
//fontFamily: 'Arial',
},
});
Image disappeared entirely
After viewing the related questions, I found a solution which worked for me. Adding the following styling arguments did the trick:
width: null,
resizeMode: 'contain',
height: 220
The Stack Overflow question this solution was taken from