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.
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.