AppLoading/AppText/AppTextInput/Button/FramedSegment/Link -> ./common

components/common/app-loading.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { View } from 'react-native'
+
+import AppText from './app-text'
+import { shared } from '../../i18n/en/labels'
+
+const AppLoadingView = () => {
+  return (
+    <View flex={1}>
+      <View style={{flex:1, justifyContent: 'center'}}>
+        <AppText style={{alignSelf: 'center'}}>{shared.loading}</AppText>
+      </View>
+    </View>
+  )
+}
+
+export default AppLoadingView

components/common/app-text-input.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { TextInput } from 'react-native'
+import styles from '../../styles'
+
+export default function AppTextInput({ style, ...props }) {
+  if (!Array.isArray(style)) style = [style]
+  return (
+    <TextInput
+      style={[styles.textInputField, ...style]}
+      autoFocus={props.autoFocus}
+      onChangeText={props.onChangeText}
+      value={props.value}
+      placeholder={props.placeholder}
+      {...props}
+    />
+  )
+}
+
+AppTextInput.propTypes = {
+  autoFocus: PropTypes.bool,
+  onChangeText: PropTypes.func,
+  placeholder: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  value: PropTypes.string,
+}
+
+AppTextInput.defaultProps = {
+  style: []
+}

components/common/app-text.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Text } from 'react-native'
+import styles from "../../styles"
+import Link from './link'
+
+export default function AppText({ children, onPress, numberOfLines, style}) {
+  // we parse for links in case the text contains any
+  return (
+    <Link>
+      <Text style={[styles.appText, style]}
+        onPress={onPress}
+        numberOfLines={numberOfLines}
+      >
+        {children}
+      </Text>
+    </Link>
+  )
+}
+
+AppText.propTypes = {
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+  numberOfLines: PropTypes.number,
+  style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+}

components/common/button.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { TouchableOpacity } from 'react-native'
+import AppText from './app-text'
+import styles from '../../styles'
+
+export default function Button({
+  backgroundColor,
+  children,
+  onPress,
+  style,
+  testID
+}) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[styles.button, style, { backgroundColor }]}
+      testID={testID}
+    >
+      <AppText style={styles.homeButtonText}>{children}</AppText>
+    </TouchableOpacity>
+  )
+}
+
+Button.propTypes = {
+  backgroundColor: PropTypes.string,
+  children: PropTypes.node,
+  onPress: PropTypes.func,
+  style: PropTypes.object,
+  testID: PropTypes.string
+}

components/common/framed-segment.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { View } from 'react-native'
+import AppText from './app-text'
+import styles from '../../styles'
+
+const FramedSegment = ({ children, last, style, title }) => {
+  const viewStyle = [styles.framedSegment, style]
+  if (last) viewStyle.push(styles.framedSegmentLast)
+  return (
+    <View style={[viewStyle]}>
+      {title && <AppText style={styles.framedSegmentTitle}>{title}</AppText>}
+      {children}
+    </View>
+  )
+}
+
+FramedSegment.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]),
+  last: PropTypes.bool,
+  style: PropTypes.object,
+  title: PropTypes.string
+}
+
+export default FramedSegment

components/common/link.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Hyperlink from 'react-native-hyperlink'
+import styles from '../../styles'
+import links from '../../i18n/en/links'
+
+export default function Link(props) {
+  return (
+    <Hyperlink
+      linkStyle={styles.link}
+      linkText={replaceUrlWithText}
+      linkDefault
+    >
+      {props.children}
+    </Hyperlink>
+  )
+}
+
+Link.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ])
+}
+
+function replaceUrlWithText(url) {
+  const link = Object.values(links).find(l => l.url === url)
+  return (link && link.text) || url
+}