I am new to programming and I have been running with this problem for the past week and haven’t been able to solve it any other way, please help.
I have a styles/layout issue on my react native application. I have a touchable opacity and inside it I want to have two views (one that will contain an image and one that will be a text box). So far I just have two empty views with a distinct background color to be able to visualize the layout. currently, it only shows the container ‘touchable opacity’ view (i.e. the yellow background). I have tried flex, align items, justify content, and a combination of all, but nothing is working.
Does anybody know how to do this?
import React from 'react'
import {StyleSheet, Text, View, TouchableOpacity, Dimensions, Image} from 'react-native'
import PropTypes from 'prop-types'
const { width, height } = Dimensions.get('screen');
// <TouchableOpacity style={styles.container} onPress={()=> {
//props.onSelectContact(props)
const WalletComponent = props => (
<TouchableOpacity style={styles.container}>
<View styles={styles.imagecontainer}>
</View>
<View styles={styles.infobox}>
</View>
</TouchableOpacity>
)
export default WalletComponent
WalletComponent.propTypes = {
businessname: PropTypes.string,
businesscity: PropTypes.string,
businessimage: PropTypes.any,
pointos: PropTypes.number,
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
height: height*0.30,
width: width*0.8,
borderTopLeftRadius: 20,
borderTopRightRadius:20,
borderBottomRightRadius:20,
borderBottomLeftRadius:20,
borderColor:'red',
backgroundColor:'yellow',
borderWidth:2,
},
imagecontainer: {
flex: 5,
borderColor:'red',
backgroundColor:'blue',
borderWidth:2,
},
infobox:{
flex: 2,
borderBottomRightRadius:20,
borderBottomLeftRadius:20,
borderColor:'red',
borderWidth:2,
backgroundColor:'green'
},
}
Advertisement
Answer
You have spelling mistake in your View it should be “style” not “styles” like this
<View style={styles.infobox}>
</View>
Also you can use borderRadius if you are going to use same radius on all the four corner. Here is your code with changes
import React from 'react'
import {StyleSheet, Text, View, TouchableOpacity, Dimensions, Image} from 'react-native'
import PropTypes from 'prop-types'
const { width, height } = Dimensions.get('screen');
const WalletComponent = props => (
<TouchableOpacity style={styles.container}>
<View style={styles.imagecontainer}>
<Text>test</Text>
</View>
<View style={styles.infobox}>
<Text>test</Text>
</View>
</TouchableOpacity>
)
export default WalletComponent
WalletComponent.propTypes = {
businessname: PropTypes.string,
businesscity: PropTypes.string,
businessimage: PropTypes.any,
pointos: PropTypes.number,
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
height: height*0.30,
width: width*0.8,
borderRadius:20,
borderColor:'red',
backgroundColor:'yellow',
borderWidth:2,
},
imagecontainer: {
flex: 5,
borderColor:'red',
backgroundColor:'blue',
borderWidth:2,
},
infobox:{
flex: 2,
borderBottomRightRadius:20,
borderBottomLeftRadius:20,
borderColor:'red',
borderWidth:2,
backgroundColor:'green',
}
});