Update flowtypes for React 16. Scaffold out login/register. Move text and some views to RN-ui-lib

Author: makirby

.eslintrc

@@ -50,6 +50,7 @@
     "react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }], // No, JSX belongs to .js files.
     "react/no-unused-prop-types": 0, // going to use Flow types.
     "react/jsx-no-undef": 1,
+    "react/prefer-stateless-function": 0,
     "react/prop-types": 0, // Can not detect flowtype correctly.
     "react/require-default-props": 0, // Checked by flowtype.
     "react/display-name": 0, // todo: turn on and fix

src/authentication/components/Login.js

@@ -6,7 +6,11 @@
 import { PageWrapper } from '../../common/rl-content-wrappers'
 import React from 'react'
 
-class Login extends React.Component {
+type LoginProps = {
+
+}
+
+class Login extends React.Component<LoginProps> {
   render() {
     return (
       <PageWrapper

src/authentication/components/Register.js

@@ -0,0 +1,24 @@
+/**
+ * # Login.js
+ * @flow
+ */
+
+import { PageWrapper } from '../../common/rl-content-wrappers'
+import React from 'react'
+
+type RegisterProps = {
+  navigator: any,
+}
+
+class Register extends React.Component<RegisterProps> {
+  render() {
+    return (
+      <PageWrapper
+        title="Registration Screen"
+        text="This is the Registration screen"
+      />
+    )
+  }
+}
+
+export default Register

src/authentication/components/Splash.js

@@ -6,7 +6,11 @@
 import { PageWrapper } from '../../common/rl-content-wrappers'
 import React from 'react'
 
-class Splash extends React.Component {
+type SplashProps = {
+
+}
+
+class Splash extends React.Component<SplashProps> {
   render() {
     return (
       <PageWrapper

src/authentication/components/Welcome.js

@@ -3,16 +3,45 @@
  * @flow
  */
 
+import { Button } from '../../common/rl-style'
+import Constants from '../../lib/constants'
 import { PageWrapper } from '../../common/rl-content-wrappers'
+import { View } from 'react-native-ui-lib'
 import React from 'react'
 
-class Welcome extends React.Component {
+type WelcomeProps = {
+  navigator: any,
+}
+
+class Welcome extends React.Component<WelcomeProps> {
+
+  onPressLogin = () => {
+    this.props.navigator.push(
+      {
+        screen: Constants.Screens.LOGIN_SCREEN.screen,
+      },
+    )
+  }
+
+  onPressRegister = () => {
+    this.props.navigator.push(
+      {
+        screen: Constants.Screens.REGISTER_SCREEN.screen,
+      },
+    )
+  }
+
   render() {
     return (
       <PageWrapper
-        title="Welcome Screen"
+        title="Welcome"
         text="This is the welcome screen"
-      />
+      >
+        <View flex bottom>
+          <Button fullWidth marginB-6 label="Login" onPress={this.onPressLogin} />
+          <Button background-orange30 marginB-12 fullWidth label="Register" onPress={this.onPressRegister} />
+        </View>
+      </PageWrapper>
     )
   }
 }

src/authentication/components/index.js

@@ -3,11 +3,13 @@
  */
 
 import Login from './Login'
+import Register from './Register'
 import Splash from './Splash'
 import Welcome from './Welcome'
 
 export {
   Login,
+  Register,
   Splash,
   Welcome,
 }

src/authentication/containers/LoginScreen.js

@@ -7,7 +7,11 @@ import Login from '../components/Login'
 import NavBar from '../../lib/config/NavBar'
 import React from 'react'
 
-class LoginScreen extends React.Component {
+type LoginScreenProps = {
+
+}
+
+class LoginScreen extends React.Component<LoginScreenProps> {
   static navigatorStyle = NavBar.Default.style
   render() {
     return (

src/authentication/containers/RegisterScreen.js

@@ -0,0 +1,26 @@
+/**
+ * # LoginScreen.js
+ * @flow
+ */
+
+import NavBar from '../../lib/config/NavBar'
+import React from 'react'
+import Register from '../components/Register'
+
+type RegisterScreenProps = {
+  navigator: any,
+}
+
+class LoginScreen extends React.Component<RegisterScreenProps> {
+  static navigatorStyle = NavBar.Default.style
+
+  render() {
+    return (
+      <Register
+        navigator={this.props.navigator}
+      />
+    )
+  }
+}
+
+export default LoginScreen

src/authentication/containers/SplashScreen.js

@@ -8,7 +8,11 @@ import NavBar from '../../lib/config/NavBar'
 import React from 'react'
 import Splash from '../components/Splash'
 
-class SplashScreen extends React.Component {
+type SplashScreenProps = {
+
+}
+
+class SplashScreen extends React.Component<SplashScreenProps> {
   static navigatorStyle = NavBar.Default.style
   render() {
     return (

src/authentication/containers/WelcomeScreen.js

@@ -7,11 +7,17 @@ import NavBar from '../../lib/config/NavBar'
 import React from 'react'
 import Welcome from '../components/Welcome'
 
-class WelcomeScreen extends React.Component {
+type WelcomeScreenProps = {
+  navigator: any,
+}
+
+class WelcomeScreen extends React.Component<WelcomeScreenProps> {
   static navigatorStyle = NavBar.Default.style
   render() {
     return (
-      <Welcome />
+      <Welcome
+        navigator={this.props.navigator}
+      />
     )
   }
 }

src/authentication/containers/index.js

@@ -3,11 +3,13 @@
  */
 
 import LoginScreen from './LoginScreen'
+import RegisterScreen from './RegisterScreen'
 import SplashScreen from './SplashScreen'
 import WelcomeScreen from './WelcomeScreen'
 
 export {
   LoginScreen,
   SplashScreen,
+  RegisterScreen,
   WelcomeScreen,
 }

src/common/rl-content-wrappers/PageWrapper.js

@@ -4,39 +4,27 @@
  */
 
 import { Heading1, Paragraph } from '../rl-style'
-import { StyleSheet } from 'react-native'
 import { View } from 'react-native-ui-lib'
 import React from 'react'
 
 type PropsType = {
-  style?: any,
   title?: string,
   text?: string,
-  children?: any
+  children?: any,
+  uiProps?: any,
 };
 
-const RLPageWrapper = (props: PropsType) => {
-  const title = props.title && <Heading1 style={styles.title}>{props.title}</Heading1>
+const RLPageWrapper = ({ title, text, children, ...other }: PropsType): React$Node => {
+  const heading = title && <Heading1 marginH-12 marginV-18>{title}</Heading1>
   return (
-    <View flex flex-1 padding-30 paddingT-75>
-      {title}
-      <Paragraph style={styles.text}>
-        {props.text}
+    <View flex flex-1 {...other}>
+      {heading}
+      <Paragraph marginH-12>
+        {text}
       </Paragraph>
-      {props.children}
+      {children}
     </View>
   )
 }
 
-const styles = StyleSheet.create({
-  title: {
-    textAlign: 'center',
-    marginBottom: 10,
-  },
-  text: {
-    textAlign: 'center',
-    marginBottom: 35,
-  },
-})
-
 export default RLPageWrapper

src/common/rl-content-wrappers/RLRefreshControl.js

@@ -2,21 +2,20 @@
  * @flow
  */
 
-import { Platform, RefreshControl, StyleSheet } from 'react-native'
+import { RefreshControl as RNRefreshControl, StyleSheet } from 'react-native'
 
 import React from 'react'
 
-type PropsType = {
-  refreshAction: (props: any) => Promise<*>
+type RefreshControlProps = {
+  refreshAction: (props: any) => Promise<*>,
 };
 
-class AmigoRefreshControl extends React.Component {
-  props: PropsType;
-  state: {
-    refreshing: boolean
-  }
+type RefreshControlState = {
+  refreshing: boolean,
+}
 
-  constructor(props: PropsType) {
+class RefreshControl extends React.Component<RefreshControlProps, RefreshControlState> {
+  constructor(props: RefreshControlProps) {
     super(props)
 
     this.state = {
@@ -33,7 +32,7 @@ class AmigoRefreshControl extends React.Component {
 
   render() {
     return (
-      <RefreshControl
+      <RNRefreshControl
         // title={'Pull to refresh'}
         style={styles.controlBackground}
         refreshing={this.state.refreshing}
@@ -50,4 +49,4 @@ const styles = StyleSheet.create({
   },
 })
 
-export default AmigoRefreshControl
+export default RefreshControl

src/common/rl-content-wrappers/RLScrollView.js

@@ -7,22 +7,16 @@ import { ScrollView, StyleSheet } from 'react-native'
 
 import React from 'react'
 
-type PropsType = {
+type RLScrollViewProps = {
   style?: any,
   title?: string,
   subtitle?: string,
   children?: any
 };
 
-const RLScrollView = (props: PropsType) => {
-  const title
-    = Boolean(props.title)
-    && <PageHeading style={styles.title}>{props.title}</PageHeading>
-  const subtitle
-    = Boolean(props.subtitle)
-    && <Paragraph style={styles.subtitle}>
-      {props.subtitle}
-    </Paragraph>
+const RLScrollView = (props: RLScrollViewProps): React$Node => {
+  const title = !!props.title && <PageHeading>{props.title}</PageHeading>
+  const subtitle = !!props.subtitle && <Paragraph>{props.subtitle}</Paragraph>
   return (
     <ScrollView style={[styles.container, props.style]}>
       {title}
@@ -36,17 +30,6 @@ const styles = StyleSheet.create({
   container: {
     flexGrow: 1,
   },
-  title: {
-    textAlign: 'left',
-    marginTop: 10,
-    marginLeft: 5,
-    marginBottom: 10,
-  },
-  subtitle: {
-    textAlign: 'left',
-    marginLeft: 5,
-    marginBottom: 10,
-  },
 })
 
 export default RLScrollView

src/common/rl-style/components/RLButton.js

@@ -0,0 +1,16 @@
+/**
+ * @flow
+ */
+
+import { Button as RNButton } from 'react-native-ui-lib'
+import React from 'react'
+
+type ButtonProps = {
+
+}
+
+const Button = (props: ButtonProps): React$Node => {
+  return <RNButton {...props} />
+}
+
+export default Button

src/common/rl-style/components/RLText.js

@@ -1,81 +1,40 @@
 /**
  * # RLText.js
- * @providesModule RLText
+ * Create some default text styles to re-use
  * @flow
  */
 
-import { Text as NativeText, StyleSheet } from 'react-native'
-
-import { normalise } from '../lib/StyleHelpers'
-import Colours from '../lib/RLColours'
+import { Text as RNText } from 'react-native-ui-lib'
 import React from 'react'
-import env from '../../../env'
 
-export function Text({ style, ...props }: Object) {
-  return <NativeText style={[styles.font, style]} {...props} />
+export function Text({ ...props }: Object) {
+  return <RNText text70 {...props} />
 }
 
-export function PageHeading({ style, ...props }: Object) {
-  return <NativeText style={[styles.font, styles.page, style]} {...props} />
+export function PageHeading({ ...props }: Object) {
+  return <RNText marginV-21 text10 {...props} />
 }
 
-export function Heading1({ style, ...props }: Object) {
-  return <NativeText style={[styles.font, styles.h1, style]} {...props} />
+export function Heading1({ ...props }: Object) {
+  return <RNText text20 {...props} />
 }
 
-export function Heading2({ style, ...props }: Object) {
-  return <NativeText style={[styles.font, styles.h2, style]} {...props} />
+export function Heading2({ ...props }: Object) {
+  return <RNText text30 {...props} />
 }
 
-export function Paragraph({ style, ...props }: Object) {
-  return <NativeText style={[styles.font, styles.p, style]} {...props} />
+export function Heading3({ ...props }: Object) {
+  return <RNText text40 {...props} />
 }
 
-export function ErrorText({ style, ...props }: Object) {
-  return <NativeText style={[styles.font, styles.error, style]} {...props} />
+export function Paragraph({ ...props }: Object) {
+  return <Text marginB-18 {...props} />
 }
 
-export function Small({ style, ...props }: Object) {
-  return <NativeText style={[styles.font, styles.small, style]} {...props} />
+export function ErrorText({ ...props }: Object) {
+  return <RNText text80 {...props} />
 }
 
-const styles = StyleSheet.create({
-  font: {
-    fontFamily: env.fontFamily,
-  },
-  page: {
-    fontSize: normalise(28),
-    lineHeight: normalise(34),
-    color: Colours.darkText,
-    fontWeight: 'bold',
-    letterSpacing: -1,
-  },
-  h1: {
-    fontSize: normalise(24),
-    lineHeight: normalise(27),
-    color: Colours.darkText,
-    fontWeight: 'bold',
-    letterSpacing: -1,
-  },
-  h2: {
-    fontSize: normalise(20),
-    lineHeight: normalise(27),
-    color: Colours.darkText,
-    fontWeight: 'bold',
-    letterSpacing: -1.4,
-  },
-  p: {
-    fontSize: normalise(15),
-    lineHeight: normalise(23),
-    color: Colours.lightText,
-  },
-  error: {
-    fontSize: normalise(14),
-    lineHeight: normalise(23),
-    color: 'red',
-  },
-  small: {
-    fontSize: normalise(12),
-    lineHeight: normalise(20),
-  },
-})
+export function Small({ ...props }: Object) {
+  return <RNText text90 {...props} />
+}

src/common/rl-style/index.js

@@ -2,19 +2,5 @@
  * @flow
  */
 
-import { ErrorText, Heading1, Heading2, PageHeading, Paragraph, Small, Text } from './components/RLText'
-
-import { normalise } from './lib/StyleHelpers'
-import RLColours from './lib/RLColours'
-
-export {
-  Text,
-  PageHeading,
-  Heading1,
-  Heading2,
-  Paragraph,
-  Small,
-  ErrorText,
-  RLColours,
-  normalise,
-}
+export * from './components/RLText'
+export { default as Button } from './components/RLButton'

src/common/rl-style/lib/RLColours/index.android.js

@@ -1,16 +1,12 @@
 /**
  * # env.js
- * enviroment variables
+ * JS enviroment variables
  * @flow
  */
 
 const environment = {
-  serverUrl: '',
   version: 1,
   sandbox: true,
-  appId: '',
-  apiKey: '',
-  fontFamily: undefined,
 }
 
 export default environment

src/common/rl-style/lib/RLColours/index.ios.js

@@ -6,7 +6,11 @@
 import { RLScrollView } from '../../common/rl-content-wrappers'
 import React from 'react'
 
-class Feed extends React.Component {
+type FeedProps = {
+
+}
+
+class Feed extends React.Component<FeedProps> {
   render() {
     return (
       <RLScrollView

src/common/rl-style/lib/StyleHelpers.js

@@ -3,20 +3,20 @@
  * @flow
  */
 
-import { Button, StyleSheet, View } from 'react-native'
-import { Heading1, Paragraph, RLColours } from '../../common/rl-style'
+import { Button, StyleSheet } from 'react-native'
+import { Heading1, Paragraph } from '../../common/rl-style'
+import { View } from 'react-native-ui-lib'
 
 import React from 'react'
 
-type FeedItemPropType = {
+type FeedItemProps = {
   title?: string,
   subtitle?: string,
   children?: any,
   actions?: Array<Function>
 };
 
-class FeedItem extends React.Component {
-  props: FeedItemPropType;
+class FeedItem extends React.Component<FeedItemProps> {
   renderTitle = () => (
     <View style={styles.itemHeader}>
       {this.props.title && <Heading1>{this.props.title}</Heading1>}
@@ -38,7 +38,7 @@ class FeedItem extends React.Component {
 
   render() {
     return (
-      <View style={styles.itemContainer}>
+      <View lightBackground style={styles.itemContainer} >
         {this.renderTitle()}
         {this.renderContent()}
         {this.props.actions && this.renderBottomRow()}
@@ -50,7 +50,6 @@ class FeedItem extends React.Component {
 const styles = StyleSheet.create({
   itemContainer: {
     minHeight: 50,
-    backgroundColor: RLColours.darkBackground,
   },
   itemHeader: {
     flexDirection: 'row',

src/env.js

@@ -7,7 +7,11 @@ import Feed from '../components/Feed'
 import NavBar from '../../lib/config/NavBar'
 import React from 'react'
 
-class FeedScreen extends React.Component {
+type FeedScreenProps = {
+
+}
+
+class FeedScreen extends React.Component<FeedScreenProps> {
   static navigatorStyle = NavBar.Default.style
   render() {
     return <Feed />

src/feed/components/Feed.js

@@ -40,6 +40,10 @@ export default {
     screen: 'app.LoginScreen',
     title: 'Login',
   },
+  REGISTER_SCREEN: {
+    screen: 'app.RegisterScreen',
+    title: 'Register',
+  },
   NEWS_SCREEN: {
     screen: 'app.NewsScreen',
     title: 'News',

src/feed/components/FeedItem.js

@@ -6,7 +6,11 @@
 import { RLScrollView } from '../../common/rl-content-wrappers'
 import React from 'react'
 
-class Live extends React.Component {
+type LiveProps = {
+
+}
+
+class Live extends React.Component<LiveProps> {
   render() {
     return (
       <RLScrollView

src/feed/containers/FeedScreen.js

@@ -7,7 +7,11 @@ import Live from '../components/Live'
 import NavBar from '../../lib/config/NavBar'
 import React from 'react'
 
-class LiveScreen extends React.Component {
+type LiveScreenProps = {
+
+}
+
+class LiveScreen extends React.Component<LiveScreenProps> {
   static navigatorStyle = NavBar.Default.style
   render() {
     return (

src/lib/constants/screens.js

@@ -7,7 +7,11 @@ import { PageWrapper } from '../../common/rl-content-wrappers'
 import NavBar from '../../lib/config/NavBar'
 import React from 'react'
 
-class News extends React.Component {
+type NewsProps = {
+
+}
+
+class News extends React.Component<NewsProps> {
   static navigatorStyle = NavBar.Default.style
   render() {
     return (

src/live/components/Live.js

@@ -6,7 +6,11 @@
 import News from '../components/News'
 import React from 'react'
 
-class NewsScreen extends React.Component {
+type NewsScreenProps = {
+
+}
+
+class NewsScreen extends React.Component<NewsScreenProps> {
   render() {
     return (
       <News />

src/live/containers/LiveScreen.js

@@ -6,7 +6,11 @@
 import { RLScrollView } from '../../common/rl-content-wrappers'
 import React from 'react'
 
-class Profile extends React.Component {
+type ProfileProps = {
+
+}
+
+class Profile extends React.Component<ProfileProps> {
   render() {
     return (
       <RLScrollView

src/news/components/News.js

@@ -7,7 +7,11 @@ import NavBar from '../../lib/config/NavBar'
 import Profile from '../components/Profile'
 import React from 'react'
 
-class ProfileScreen extends React.Component {
+type ProfileScreenProps = {
+
+}
+
+class ProfileScreen extends React.Component<ProfileScreenProps> {
   static navigatorStyle = NavBar.Default.style
 
   render() {

src/news/containers/NewsScreen.js

@@ -8,6 +8,7 @@ import Constants from './lib/constants'
 import FeedScreen from './feed/containers/FeedScreen'
 import LiveScreen from './live/containers/LiveScreen'
 import LoginScreen from './authentication/containers/LoginScreen'
+import RegisterScreen from './authentication/containers/RegisterScreen'
 import NewsScreen from './news/containers/NewsScreen'
 import ProfileScreen from './profile/containers/ProfileScreen'
 import RankingScreen from './statistics/containers/RankingScreen'
@@ -51,6 +52,12 @@ export function registerScreens(store: {}, Provider: {}) {
     store,
     Provider,
   )
+  Navigation.registerComponent(
+    Constants.Screens.REGISTER_SCREEN.screen,
+    () => RegisterScreen,
+    store,
+    Provider,
+  )
   Navigation.registerComponent(
     Constants.Screens.SPLASH_SCREEN.screen,
     () => SplashScreen,

src/profile/components/Profile.js

@@ -6,7 +6,9 @@
 import { RLScrollView } from '../../common/rl-content-wrappers'
 import React from 'react'
 
-class Ranking extends React.Component {
+type RankingProps = {}
+
+class Ranking extends React.Component<RankingProps> {
   render() {
     return (
       <RLScrollView

src/profile/containers/ProfileScreen.js

@@ -6,7 +6,9 @@
 import { PageWrapper } from '../../common/rl-content-wrappers'
 import React from 'react'
 
-class Stats extends React.Component {
+type StatsProps = {}
+
+class Stats extends React.Component<StatsProps> {
   render() {
     return (
       <PageWrapper

src/registerScreens.js

@@ -7,8 +7,11 @@ import NavBar from '../../lib/config/NavBar'
 import Ranking from '../components/Ranking'
 import React from 'react'
 
+type RankingScreenProps = {
 
-class RankingScreen extends React.Component {
+}
+
+class RankingScreen extends React.Component<RankingScreenProps> {
   static navigatorStyle = NavBar.Default.style
 
   render() {

src/setup.js

@@ -7,7 +7,11 @@ import NavBar from '../../lib/config/NavBar'
 import React from 'react'
 import Stats from '../components/Stats'
 
-class StatsScreen extends React.Component {
+type StatsScreenProps = {
+
+}
+
+class StatsScreen extends React.Component<StatsScreenProps> {
   static navigatorStyle = NavBar.Default.style
 
   render() {