Merge pull request #348 from supabase/react-native-example-add-elements

Add reactnativeelements.

examples/todo-expo/App.tsx

@@ -1,73 +1,30 @@
 import React from 'react'
-import AsyncStorage from '@react-native-community/async-storage'
-import { createClient } from '@supabase/supabase-js'
 import { StatusBar } from 'expo-status-bar'
-import { Alert, StyleSheet, Text, View } from 'react-native'
-import { Styles, SUPABASE_URL, SUPABASE_ANON_KEY } from './lib/constants'
+import { StyleSheet, View, Platform } from 'react-native'
+import { ThemeProvider, colors, Text } from 'react-native-elements'
+import { Styles } from './lib/constants'
+import Auth from './components/Auth'
 
-import Button from './components/Button'
-import TextField from './components/TextField'
-
-const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
-  localStorage: AsyncStorage as any,
-})
+const theme = {
+  colors: {
+    ...Platform.select({
+      default: colors.platform.android,
+      ios: colors.platform.ios,
+    }),
+  },
+}
 
 export default function App() {
-  const [email, setEmail] = React.useState('')
-  const [password, setPassword] = React.useState('')
-
-  const handleLogin = async (type: string, email: string, password: string) => {
-    
-    // console.log('email', email)
-    // console.log('password', password)
-    try {
-      const { error, user } =
-        type === 'LOGIN'
-          ? await supabase.auth.signIn({ email, password })
-          : await supabase.auth.signUp({ email, password })
-      if (!error && !user) Alert.alert('Check your email for the login link!')
-      if (error) Alert.alert(error.message)
-      console.log('user', user)
-      console.log('error', error)
-    } catch (error) {
-      console.log('Error thrown:', error.message)
-      Alert.alert(error.error_description || error)
-    }
-  }
-
   return (
-    <View style={styles.container}>
-      <View style={styles.verticallySpaced}>
-        <Text style={{ fontSize: Styles.fontExtraLarge, fontWeight: 'bold' }}>To Do List</Text>
+    <ThemeProvider theme={theme}>
+      <View style={styles.container}>
+        <View style={styles.verticallySpaced}>
+          <Text h1>Todo List</Text>
+        </View>
+        <Auth />
+        <StatusBar style="auto" />
       </View>
-      <View style={[styles.verticallySpaced, { marginTop: 20 }]}>
-        <Text>Email</Text>
-        <TextField
-          onChangeText={(text) => setEmail(text)}
-          text={email}
-          placeholder="Enter your email"
-          autoCapitalize={'none'}
-        />
-      </View>
-      <View style={styles.verticallySpaced}>
-        <Text>Password</Text>
-        <TextField
-          onChangeText={(text) => setPassword(text)}
-          text={password}
-          type={'password'}
-          placeholder="Enter your password"
-          customStyles={{ textTransform: 'lowercase' }}
-          autoCapitalize={'none'}
-        />
-      </View>
-      <View style={[styles.verticallySpaced, { marginTop: 20 }]}>
-        <Button text="Log in" onPress={() => handleLogin('LOGIN', email, password)} />
-      </View>
-      <View style={styles.verticallySpaced}>
-        <Button text="Sign up" onPress={() => handleLogin('SIGNUP', email, password)} />
-      </View>
-      <StatusBar style="auto" />
-    </View>
+    </ThemeProvider>
   )
 }
 

examples/todo-expo/components/Auth.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
+import AsyncStorage from '@react-native-community/async-storage'
+import { createClient } from '@supabase/supabase-js'
+import { Styles, SUPABASE_URL, SUPABASE_ANON_KEY } from '../lib/constants'
+
+import { Button, Input } from 'react-native-elements'
+
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+  localStorage: AsyncStorage as any,
+})
+
+export default function Auth() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState('')
+
+  const handleLogin = async (type: string, email: string, password: string) => {
+    setLoading(type)
+    const { error, user } =
+      type === 'LOGIN'
+        ? await supabase.auth.signIn({ email, password })
+        : await supabase.auth.signUp({ email, password })
+    if (!error && !user) Alert.alert('Check your email for the login link!')
+    if (error) Alert.alert(error.message)
+    console.log('user', user)
+    console.log('error', error)
+    setLoading('')
+  }
+
+  return (
+    <View>
+      <View style={[styles.verticallySpaced, { marginTop: 20 }]}>
+        <Input
+          label="Email"
+          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
+          onChangeText={(text) => setEmail(text)}
+          value={email}
+          placeholder="email@address.com"
+          autoCapitalize={'none'}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Input
+          label="Password"
+          leftIcon={{ type: 'font-awesome', name: 'lock' }}
+          onChangeText={(text) => setPassword(text)}
+          value={password}
+          secureTextEntry={true}
+          placeholder="Password"
+          autoCapitalize={'none'}
+        />
+      </View>
+      <View style={[styles.verticallySpaced, { marginTop: 20 }]}>
+        <Button
+          title="Sign in"
+          disabled={!!loading.length}
+          loading={loading === 'LOGIN'}
+          onPress={() => handleLogin('LOGIN', email, password)}
+        />
+      </View>
+      <View style={styles.verticallySpaced}>
+        <Button
+          title="Sign up"
+          disabled={!!loading.length}
+          loading={loading === 'SIGNUP'}
+          onPress={() => handleLogin('SIGNUP', email, password)}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 40,
+    padding: Styles.spacing,
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignSelf: 'stretch',
+  },
+})

examples/todo-expo/components/Button.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import { GestureResponderEvent, StyleSheet, Text, TouchableOpacity } from 'react-native'
-import { Styles } from '../lib/constants'
-
-type ButtonProps = {
-  text: string
-  onPress: ((event: GestureResponderEvent) => void) | undefined
-}
-
-export default function Button({ text, onPress }: ButtonProps) {
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.button}>
-      <Text style={styles.buttonText}>{text}</Text>
-    </TouchableOpacity>
-  )
-}
-
-const styles = StyleSheet.create({
-  button: {
-    backgroundColor: Styles.colorPrimary,
-    alignSelf: 'stretch',
-    padding: Styles.spacing,
-    borderRadius: 4,
-  },
-  buttonText: { fontSize: Styles.fontNormal, color: '#fff', textAlign: 'center' },
-})

examples/todo-expo/components/TextField.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { TextInput, StyleSheet } from 'react-native'
-import { Styles } from '../lib/constants'
-
-type TextFieldProps = {
-  onChangeText: ((text: string) => void) | undefined
-  text: string
-  type?: 'none' | 'password'
-  placeholder?: string
-  customStyles?: object
-  autoCapitalize?: 'sentences' | 'characters' | 'words' | 'none'
-}
-
-export default function TextField({
-  onChangeText,
-  text,
-  type = 'none',
-  placeholder = '',
-  customStyles = {},
-  autoCapitalize = 'none'
-}: TextFieldProps) {
-  return (
-    <TextInput
-      style={[styles.textInput, customStyles]}
-      onChangeText={onChangeText}
-      value={text}
-      placeholder={placeholder}
-      textContentType={type}
-      secureTextEntry={type == 'password'}
-      autoCapitalize={autoCapitalize}
-    />
-  )
-}
-
-const styles = StyleSheet.create({
-  textInput: {
-    fontSize: Styles.fontNormal,
-    borderColor: 'gray',
-    borderWidth: 1,
-    borderRadius: 4,
-    minHeight: 50,
-    padding: Styles.spacing,
-  },
-})

examples/todo-expo/package-lock.json

@@ -1955,14 +1955,12 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
-      "dev": true
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
     "@types/react": {
       "version": "16.9.56",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.56.tgz",
       "integrity": "sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1981,11 +1979,19 @@
       "version": "0.63.35",
       "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.63.35.tgz",
       "integrity": "sha512-2uyPZoHtoUVsVO55HdrRCpgwwG2zVHLttTaR9f/BThoBAQngNWuZQ0eMGmfgRHBKXmi3TmtWjbWPxohkITLlkw==",
-      "dev": true,
       "requires": {
         "@types/react": "*"
       }
     },
+    "@types/react-native-vector-icons": {
+      "version": "6.4.6",
+      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.6.tgz",
+      "integrity": "sha512-lAyxNfMd5L1xZvXWsGcJmNegDf61TAp40uL6ashNNWj9W3IrDJO59L9+9inh0Y2MsEZpLTdxzVU8Unb4/0FQng==",
+      "requires": {
+        "@types/react": "*",
+        "@types/react-native": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -2221,6 +2227,26 @@
       "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
     },
+    "auto-changelog": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/auto-changelog/-/auto-changelog-2.2.1.tgz",
+      "integrity": "sha512-XlykJfZrXlWUAADBqGoN1elmntrRcx7oEymyYB3NRPEZxv0TfYHfivmwzejUMnwAdXKCgbQPo7GV5ULs3jwpfw==",
+      "requires": {
+        "commander": "^5.0.0",
+        "handlebars": "^4.7.3",
+        "lodash.uniqby": "^4.7.0",
+        "node-fetch": "^2.6.0",
+        "parse-github-url": "^1.0.2",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
     "available-typed-arrays": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz",
@@ -2730,6 +2756,15 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
+      "integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.4"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2957,8 +2992,7 @@
     "csstype": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
-      "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
-      "dev": true
+      "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
     },
     "d": {
       "version": "1.0.1",
@@ -3915,6 +3949,31 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
       "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
     },
+    "handlebars": {
+      "version": "4.7.6",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
+      "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+      "requires": {
+        "minimist": "^1.2.5",
+        "neo-async": "^2.6.0",
+        "source-map": "^0.6.1",
+        "uglify-js": "^3.1.4",
+        "wordwrap": "^1.0.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        },
+        "uglify-js": {
+          "version": "3.12.1",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.12.1.tgz",
+          "integrity": "sha512-o8lHP20KjIiQe5b/67Rh68xEGRrc2SRsCuuoYclXXoC74AfSRGblU1HKzJWH3HxPZ+Ort85fWHpSX7KwBUC9CQ==",
+          "optional": true
+        }
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -3982,6 +4041,14 @@
         }
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -4613,11 +4680,21 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
+    },
     "lodash.throttle": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
       "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
     },
+    "lodash.uniqby": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniqby/-/lodash.uniqby-4.7.0.tgz",
+      "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI="
+    },
     "log-symbols": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
@@ -5535,6 +5612,11 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
       "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
     },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
     "next-tick": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
@@ -5760,6 +5842,11 @@
         "is-wsl": "^1.1.0"
       }
     },
+    "opencollective-postinstall": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz",
+      "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
+    },
     "options": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/options/-/options-0.0.6.tgz",
@@ -5809,6 +5896,11 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
       "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
     },
+    "parse-github-url": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.2.tgz",
+      "integrity": "sha512-kgBf6avCbO3Cn6+RnzRGLkUsv4ZVqv/VfAYkRsyBcgkshNvVBkRn1FEZcW0Jb+npXQWm2vHPnnOqFteZxRRGNw=="
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -6160,11 +6252,55 @@
         }
       }
     },
+    "react-native-elements": {
+      "version": "3.0.0-alpha.1",
+      "resolved": "https://registry.npmjs.org/react-native-elements/-/react-native-elements-3.0.0-alpha.1.tgz",
+      "integrity": "sha512-m85yQLo3wPkC5pF4Sp6bWltINElOVk6G57Ld2QNnVnXHwJ4PI5gYOoSvatxbsUV8MHQuvzTePRwDLZIjFu7HDg==",
+      "requires": {
+        "@types/react-native-vector-icons": "^6.4.5",
+        "auto-changelog": "^2.2.1",
+        "color": "^3.1.2",
+        "deepmerge": "^4.2.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "lodash.isequal": "^4.5.0",
+        "opencollective-postinstall": "^2.0.3",
+        "prop-types": "^15.7.2",
+        "react-native-ratings": "^7.3.0",
+        "react-native-size-matters": "^0.3.1",
+        "react-native-status-bar-height": "^2.5.0"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        }
+      }
+    },
+    "react-native-ratings": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-ratings/-/react-native-ratings-7.3.0.tgz",
+      "integrity": "sha512-NCDIkmrVPnxPzP9zKdlcNpa2rPs3Hiv2qXsojUr3FpwbANWfgYE+jjGSSCBcS3vpXndTjhoaTGFDnybnUSFPFA==",
+      "requires": {
+        "lodash": "^4.17.15",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-native-safe-area-context": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.1.4.tgz",
       "integrity": "sha512-bXx3hqz4LovFoMnJIRGIWL2oJ/PHadXviBKvgZV9yNErtURQLJSn0yfQytVtiqslhaBMZOJwH4R6HiClyofvBg=="
     },
+    "react-native-size-matters": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/react-native-size-matters/-/react-native-size-matters-0.3.1.tgz",
+      "integrity": "sha512-mKOfBLIBFBcs9br1rlZDvxD5+mAl8Gfr5CounwJtxI6Z82rGrMO+Kgl9EIg3RMVf3G855a85YVqHJL2f5EDRlw=="
+    },
+    "react-native-status-bar-height": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-native-status-bar-height/-/react-native-status-bar-height-2.6.0.tgz",
+      "integrity": "sha512-z3SGLF0mHT+OlJDq7B7h/jXPjWcdBT3V14Le5L2PjntjjWM3+EJzq2BcXDwV+v67KFNJic5pgA26cCmseYek6w=="
+    },
     "react-native-web": {
       "version": "0.13.18",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.13.18.tgz",

examples/todo-expo/package.json

@@ -16,6 +16,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
+    "react-native-elements": "^3.0.0-alpha.1",
     "react-native-web": "~0.13.12"
   },
   "devDependencies": {