React Native Design Systems: Messy Cascading Example

rn-design-systems-messy-cascade.js

class MessyCardComponent extends Component {
	render() {
		return (
			<View style={[ CardComponentStyles.container, LayoutStyles.wideMargin, GlobalStyles.shadedBox ]}>
				<View style={[ CardComponentStyles.headingBar, LayoutStyles.smPadding, BackgroundColors.mediumGreen ]}>
					<Text style={[ TypographyStyles.heading1, Colors.textAbsoluteBlack ]}>{ this.props.title }</Text>
				</View>
				<View style={[ CardComponentStyles.contentContainer, BackgroundColors.offWhite ]}>
					<Text style={[ TypographyStyles.bodyText, Colors.textAbsoluteBlack ]}>{ this.props.children }</Text>
				</View>
			</View>
		);
	}
}