The text was not showing in the grid - css

Question

Here is a list view with grid and detail within the grid with React Native 0.63.2 app. Within a grid, the left-most image shows up fine. However that text is not showing. Here is the code:
import { Container, Header, Title, Content, List, ListItem, Footer, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base'; //ver 2.15.2
import FastImage from 'react-native-fast-image';
import { Col, Row, Grid } from 'react-native-easy-grid'; //ver 0.2.2
const { height } = Dimensions.get("window");
function ListBlock ({item}) {
return(
<TouchableOpacity onPress={() => {}}>
<Grid style={styles.grid}>
<Col size={1} >
<FastImage source={{uri:item.artimages[0].path}} style={styles.itemImage}/>
</Col>
<Col size={4}>
<Content>
<Text>Hello world</Text> //<<==text does not show. No stylesheet applied.
</Content>
</Col>
</Grid>
</TouchableOpacity>
);
}
const App = () => {
var items = [{id:1, name:"1st item", description:"this is the first item", artimages:[{path:'https://homepages.cae.wisc.edu/~ece533/images/boat.png'}]},
{id:2,name:"2nd item", description: "this is second item", artimages:[{path:'https://homepages.cae.wisc.edu/~ece533/images/baboon.png'}]}];
return (
<Container>
<Header />
<Content>
<List>
{items.map(item => {
return(
<ListItem key={item.id}>
<ListBlock item={item} />
</ListItem>)
})}
</List>
</Content>
</Container>
);
};
const styles = StyleSheet.create({
titleText:{
alignItems:'center',
alignContent:'flex-start',
textAlignVertical:'center',
fontSize:14
},
grid:{
//width:"90%",
height:40,
paddingTop:2,
paddingBottom:2,
padding:2,
},
imgCard:{
alignItems:'center',
alignContent:'center',
},
itemImage:{
paddingLeft:20,
width:40,
height:40,
},
})
export default App;
Here is how screen shot:
How to bring up the text inside a grid?

Answer 1

Use View instead of Content as a wrapper for the Text