React native layouts – view not showing inside touchable opacity

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'
    },
}

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',
    }
});