React Native Card Styling - react-native

Question

How to stretch the content of the card so it has 100% width. For example I want the red paragraph to touch the edges horizontally so there won't be yellow space on the right and left. In other words I would like to remove the padding from the cad content so there will be no yellow shown.
Here is my code:
import React,{Component} from 'react';
import { Searchbar, Button, Card, Paragraph } from 'react-native-paper';
import { StyleSheet, SafeAreaView, View, ActivityIndicator, StatusBar, TextInput, Text } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
render()
{
const styles = StyleSheet.create({
container: {
flex: 1,
},
menuContainer:{
// backgroundColor: 'orange',
borderRadius: 10,
margin: 10,
marginTop: 2,
},
menuItemHeader:{
backgroundColor: '#D9B611',
borderRadius: 10,
borderBottomRightRadius: 0,
borderBottomLeftRadius: 0,
},
menuItemHeaderText:{
marginTop:5,
fontSize:17,
fontWeight:'bold',
color:'#fff'
},
menuItemHeaderSubText:{
marginTop:5,
fontSize:15,
color:'#fff'
},
menuItemBody:{
backgroundColor: 'yellow',
borderWidth:1,
borderBottomRightRadius: 5,
borderBottomLeftRadius: 5,
borderColor: 'gray',
borderTopWidth: 0,
alignSelf: 'stretch',
},
menuItemBodyText:{
marginTop:5,
fontSize:15,
},
description_input: {
height: 150,
backgroundColor: 'red',
alignItems: this.multiline ? 'flex-start' : 'center',
},
action_buttons_positioning: {
alignSelf: 'flex-end',
backgroundColor: 'green',
},
action_buttons: {
width: 50,
elevation: 8,
// backgroundColor: "#D9B611",
backgroundColor: "gray",
justifyContent: "center",
alignItems: "center",
borderRadius: 10,
paddingHorizontal: 5,
paddingVertical: 2,
},
action_buttons_text: {
color: '#fff',
fontSize: 16,
padding: 5
},
bottomLogoContainer:{
alignSelf: "center",
justifyContent: 'center',
alignItems: 'center',
textAlign:"center",
height: 100,
marginBottom: 20,
zIndex: 0
},
bottomLogoImage:{
width: 150,
height: 150,
resizeMode: 'contain',
}
});
if (this.state.loading) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<ActivityIndicator />
</View>
)
}
return (
<>
<StatusBar barStyle="light-content" />
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
keyExtractor = {(item, index) => index.toString()}
renderItem={({ item }) => (
<Card style={styles.menuContainer}>
{/* <Card.Cover source={{ uri: item.cover_img }} /> */}
<Card.Title title={item.title.toString()} subtitle={item.title.toString()} style={styles.menuItemHeader}/>
<Card.Content style={styles.menuItemBody}>
<Paragraph style = {styles.description_input}>
<View>
<TextInput
underlineColorAndroid = "transparent"
placeholderTextColor = "gray"
autoCapitalize = "none"
multiline={true}
// numberOfLines={4}
placeholder = "Job description"
// onBlur={()=>this.lastNameValidation()}
// onChangeText={last_name => this.setState({ last_name })}
/>
</View>
</Paragraph>
<Paragraph style={styles.action_buttons_positioning}>
<TouchableOpacity onPress={() => alert('Clicked')}>
<View style={styles.action_buttons}>
<Text style={styles.action_buttons_text}>Edit</Text>
</View>
</TouchableOpacity>
</Paragraph>
</Card.Content>
</Card>
)
}
/>
{/* <View style={styles.bottomLogoContainer}>
<Image
style={styles.bottomLogoImage}
source={require('../../../../src/assets/img/logo_120.png')}
/>
</View> */}
</SafeAreaView>
</>
)
}
}

Answer 1

You can add paddingHorizontal: 0 in your menuItemBody styles object, i.e. the styles that apply to the Card.Content component.
The CardContent component apparently sets 16 horizontal padding by default.