React Native Card Styling

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.