如何将 css 应用于<text>内部组件<card.content> react-native-paper 中的组件？</card.content></text>

Question

I am working on the React Native 0.62 in which i am using react-native-paper for card. And i have used from react-native inside the Card.Content component. But the UI is not as expected as i want. I tried using nested componet it works but then other css won't apply to it like padding etc. Any help is appreciated.

Expected Output:

Current UI:

Code:

 <Card.Content style={{ paddingTop: 10 }}>
                {this.props.data.getHolidays.loading ?
                  (<View style={{ width: 'auto', height: 175, justifyContent: 'center', alignItems: 'center' }}><ActivityIndicator color="#6CCFF6" size="large" /></View>)
                  :
                  Object.keys(this.props.data.getHolidays.holidays).length == 0 ?
                    (<View style={{ width: 'auto', height: 175, justifyContent: 'center', alignItems: 'center' }}><Text style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: 'black' }}>Not Available</Text></View>) :

                (
                  Object.keys(this.props.data.getHolidays.holidays).map(key => (
                    <>
                      <Caption style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: '#CFCFCF', marginBottom: 10, }}>{key}</Caption >
                      {this.props.data.getHolidays.holidays[key].map((holidayList, index) => (                            

                        <View style={{ borderRadius: 5, backgroundColor: (index % 2 == 0) ? '#596AB2' : '#48657D', marginBottom: 10 }} key={index}>

                          <Text style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: '#FFFFFF', paddingVertical: 6, paddingHorizontal: 10 }}>
                            {moment(holidayList.holidayDate).format('ddd')} {moment(holidayList.holidayDate).format('Do')} - {holidayList.holidayEvent}</Text>
                        </View>
                      ))}
                    </>
                  ))
                )
            }
          </Card.Content>

Answer 1

This has nothing to do with the Card styling when you place a text inside a view it takes the full space

You can put a assignSelf for wrapper view which will solve your problem.

  <View
    style={{
      borderRadius: 5,
      backgroundColor: '#48657D',
      marginBottom: 10,
      alignSelf:'flex-start'
    }}>
    <Text
      style={{
        fontFamily: 'OpenSans-Regular',
        fontSize: 14,
        color: '#FFFFFF',
        paddingVertical: 6,
        paddingHorizontal: 10,
      }}>
      {"1232"}
      {"123"} -
      {"Event goes here"}
    </Text>
  </View>