module to display a message at the top of a view

Author: drewvolz

modules/info-header/index.js

@@ -0,0 +1,42 @@
+// @flow
+import * as React from 'react'
+import {View, Text, StyleSheet} from 'react-native'
+import * as c from '@frogpond/colors'
+
+const styles = StyleSheet.create({
+	content: {
+		backgroundColor: c.white,
+		borderWidth: StyleSheet.hairlineWidth,
+		borderTopColor: c.iosHeaderTopBorder,
+		borderBottomColor: c.iosHeaderBottomBorder,
+		marginBottom: 10,
+	},
+	title: {
+		fontSize: 16,
+		fontWeight: 'bold',
+		paddingTop: 15,
+		paddingHorizontal: 15,
+	},
+	message: {
+		fontSize: 14,
+		paddingTop: 5,
+		paddingBottom: 15,
+		paddingHorizontal: 15,
+	},
+})
+
+type Props = {
+	message: string,
+	title: string,
+}
+
+export class InfoHeader extends React.PureComponent<Props> {
+	render() {
+		return (
+			<View style={styles.content}>
+				<Text style={styles.title}>{this.props.title}</Text>
+				<Text style={styles.message}>{this.props.message}</Text>
+			</View>
+		)
+	}
+}

modules/info-header/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@frogpond/info-header",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "author": "",
+  "license": "ISC",
+  "scripts": {
+    "test": "jest"
+  },
+  "peerDependencies": {
+    "react": "^16.4.2",
+    "react-native": "^0.55.4"
+  },
+  "dependencies": {
+    "@frogpond/colors": "^1.0.0"
+  }
+}