fix expo update + login base styles

Author: Horacio Herrera

app.json

@@ -1,10 +1,27 @@
 {
   "expo": {
+    "name": "react-native-workshop",
+    "description": "This project is really great.",
+    "slug": "react-native-workshop",
+    "privacy": "public",
     "sdkVersion": "30.0.0",
+    "platforms": ["ios", "android"],
+    "version": "1.0.0",
     "orientation": "portrait",
+    "icon": "./assets/icon.png",
     "splash": {
+      "image": "./assets/splash.png",
       "resizeMode": "contain",
-      "image": "./splash.png"
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
     }
   }
 }

assets/icon.png

@@ -1,30 +1,21 @@
 {
-  "name": "react-native-workshop",
-  "version": "0.1.0",
+  "name": "empty-project-template",
+  "main": "node_modules/expo/AppEntry.js",
   "private": true,
-  "devDependencies": {
-    "jest-expo": "~27.0.0",
-    "react-test-renderer": "16.3.1"
-  },
-  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "scripts": {
     "start": "expo start",
-    "eject": "expo eject",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "test": "jest"
-  },
-  "jest": {
-    "preset": "jest-expo"
+    "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "^27.0.1",
+    "expo": "^30.0.0",
     "parse-link-header": "^1.0.1",
     "prop-types": "^15.6.2",
     "react": "16.3.1",
-    "react-native": "~0.55.2",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
     "react-native-authentication-helpers": "^0.1.0",
     "react-native-elements": "^0.19.1",
-    "react-navigation": "^2.5.2"
+    "react-navigation": "^2.14.2"
   }
 }

splash.png renamed to assets/splash.png

@@ -0,0 +1,23 @@
+import React from 'react'
+import { View } from "react-native";
+import {
+  FormLabel,
+  FormInput as BaseFormInput,
+  FormValidationMessage
+} from "react-native-elements";
+import PropTypes from 'prop-types'
+
+const FormInput = ({ label, value, style, ...rest}) => (
+  <View>
+    <FormLabel>{label}</FormLabel>
+    <BaseFormInput {...rest} value={value} />
+    {/* <FormValidationMessage>Error message</FormValidationMessage> */}
+  </View>
+);
+
+FormInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+}
+
+export default FormInput

package.json

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types'
 import { StyleSheet } from 'react-native'
 import { Text } from 'react-native-elements'
 
-const Title = ({children, style, ...rest}) => (
-  <Text style={[styles.title, style]} {...rest}>{children}</Text>
+const Title = ({style, ...rest}) => (
+  <Text style={[styles.title, style]} {...rest} />
 )
 
 const styles = StyleSheet.create({

src/App/Components/FormInput.js

@@ -1,19 +1,19 @@
 import React from "react";
 import { createSwitchNavigator } from "react-navigation";
-import { AuthNavigator } from "../Auth";
+import LoginScreen from "../Auth/Screens/LoginScreen";
 import PrivateNavigator from "./PrivateNavigator";
 
 export const PRIVATE_SCREEN = "PRIVATE_SCREEN";
 export const PUBLIC_SCREEN = "PUBLIC_SCREEN";
 
 const Navigator = createSwitchNavigator(
   {
-    [PUBLIC_SCREEN]: AuthNavigator,
+    [PUBLIC_SCREEN]: LoginScreen,
     [PRIVATE_SCREEN]: PrivateNavigator
   },
   {
-    //initialRouteName: PUBLIC_SCREEN,
-    initialRouteName: PRIVATE_SCREEN,
+    initialRouteName: PUBLIC_SCREEN,
+    // initialRouteName: PRIVATE_SCREEN,
     headerMode: "none"
   }
 );

src/App/Components/TextInput.js

@@ -11,7 +11,7 @@ export { default as Title } from './Components/Title'
 export { default as Subheading } from './Components/Subheading'
 export { default as ListItem } from './Components/ListItem'
 export { default as Divider } from './Components/Divider'
-export { default as TextInput } from './Components/TextInput'
+export { default as FormInput } from './Components/FormInput'
 export { default as Screen } from './Components/Screen'
 
 // Navigation Names

src/App/Components/Title.js

@@ -10,12 +10,12 @@ export const SINGUP_SCREEN = 'SIGNUP_SCREEN'
 const AuthNavigator = createSwitchNavigator(
     {
         [LOGIN_SCREEN]: LoginScreen,
-        //[SINGUP_SCREEN]: SignUpScreen,
+        // [SINGUP_SCREEN]: SignUpScreen,
     },
     {
         initialRouteName: LOGIN_SCREEN,
         headerMode: 'none'
     },
 )
 
-export default AuthNavigator
+export default AuthNavigator

src/App/Navigator.js

@@ -1,46 +1,56 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { setUser } from 'react-native-authentication-helpers'
-import { Constants } from 'expo'
-import { Button, TextInput, Title, Screen, PRIVATE_SCREEN } from '../../App'
+import React from "react";
+import { StyleSheet, View, TextInput } from "react-native";
+import { setUser } from "react-native-authentication-helpers";
+import { Constants } from "expo";
+import { Button, HeadLine, Title, Screen, PRIVATE_SCREEN, Headline, FormInput } from "../../App";
 
-class Auth extends React.Component {
+class LoginScreen extends React.Component {
   state = {
     email: "",
-    password: ''
-  }
+    password: ""
+  };
 
   login = () => {
-    this.props.navigation.navigate(PRIVATE_SCREEN)
-  }
+    this.props.navigation.navigate(PRIVATE_SCREEN);
+  };
 
-  handleFormChange = (key, text) => this.setState({[key]: text})
+  handleFormChange = ({ key, text }) => this.setState({ [key]: text });
 
   render() {
     return (
       <Screen style={styles.container}>
-        <Title>APP NAME</Title>
-        <TextInput
+        <View style={styles.header}>
+          <Headline>Twitter Clone</Headline>
+          <Title>@reactjsacademy</Title>
+        </View>
+        <FormInput
           label="Email"
           value={this.state.email}
-          onChangeText={(email) => this.handleFormChange("email", email)}
+          onChangeText={value => this.handleFormChange({ key: "email", value })}
         />
-        <TextInput
+        <FormInput
           label="Password"
           value={this.state.password}
           secureTextEntry
-          onChangeText={(password) => this.handleFormChange("password", password)}
+          onChangeText={value =>
+            this.handleFormChange({ key: "password", value })
+          }
         />
       </Screen>
-    )
+    );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    padding: 24,
     paddingTop: Constants.statusBarHeight
+  },
+  header: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 120,
+    backgroundColor: '#73CFEF'
   }
-})
+});
 
-export default Auth
+export default LoginScreen;

src/App/index.js

@@ -3,7 +3,6 @@ import { View, Text, StyleSheet, TouchableOpacity, Linking } from 'react-native'
 import { Paper } from '../../App'
 import Avatar from '../Components/Avatar'
 import { Feather } from '@expo/vector-icons';
-import { stringify } from 'querystring';
 
 const IconButton = ({ icon }) => {
   let Icon;

src/Auth/Components/AuthNavigator.js

@@ -1,15 +1,11 @@
-import linkHeader from 'parse-link-header'
-
 export const API_SEARCH_BASE_URL = 'https://api.github.com/search/users'
 export const API_SEARCH_USER_BASE_URL = 'https://api.github.com/users'
 
 export const fetchUsers = ({ nextUrl, query }) => {
     const url = nextUrl || `${API_SEARCH_BASE_URL}?q=${query}&sort=followers`
 
     return fetch(url).then(response => {
-        const link = linkHeader(response.headers.get('Link'))
         return response.json().then(users => ({
-            nextUrl: link.next.url,
             users
         }))
     })