#1 - Add a bunch of useful global components and work on signup

package.json

@@ -15,8 +15,10 @@
     "@reduxjs/toolkit": "^1.6.2",
     "react": "17.0.2",
     "react-native": "0.66.1",
+    "react-native-infinite-scroll-view": "^0.4.5",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-screens": "^3.9.0",
+    "react-native-vector-icons": "^9.0.0",
     "react-redux": "^7.2.6"
   },
   "devDependencies": {

src/App.tsx

@@ -1,37 +1,28 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
- */
-
 import React, { Component } from 'react';
 
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-import { store } from './store'
 import { Provider } from 'react-redux'
+import { store } from './store'
 
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
 import Welcome from './features/welcome/Welcome'
+import Signup from './features/signup/Signup'
 
-const Stack = createNativeStackNavigator();
+// Parameters for each screen
+export type RootStackParamList = {
+  Welcome: undefined
+  Signup: undefined
+};
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
+// Base of app
 export default () => (
   <Provider store={store}>
     <NavigationContainer>
-      <Stack.Navigator>
-        <Stack.Screen name="Welcome" component={Welcome} />
+      <Stack.Navigator initialRouteName="Welcome">
+        <Stack.Screen name="Welcome" component={Welcome} options={{ headerShown: false }} />
+        <Stack.Screen name="Signup" component={Signup} options={{ headerShown: false }} />
       </Stack.Navigator>
     </NavigationContainer>
   </Provider>

src/components/Avatar.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  Image,
+} from 'react-native';
+
+const Avatar = (props) => {
+    const { style, source } = props;
+    return (
+      <Image style={[styles.avatar, style]} source={source} />
+    );
+};
+
+const styles = {
+  avatar: {
+    height: 45,
+    width: 45,
+    borderRadius: 30,
+    //borderWidth: 2,
+    //borderColor: 'yellow',
+    margin: 8
+  }
+};
+
+export { Avatar };

src/components/BlockList.js

@@ -0,0 +1,100 @@
+import React, { Component } from 'react';
+import { View, Text, Image, TouchableOpacity, ActivityIndicator, Dimensions } from 'react-native';
+import { Icon } from '.';
+
+class BlockList extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      windowWidth: Dimensions.get('window').width
+    };
+  }
+  renderOptionView(val, key) {
+    const height = this.state.windowWidth / 2;
+    if (val.loading) {
+      return (
+        <View style={{ flex: 1, height: height / 1.3 }}>
+          <ActivityIndicator
+            key={key}
+            size="large"
+            style={[
+              styles.option,
+            ]}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <TouchableOpacity
+        style={{ flex: 1, height: height / 1.3 }}
+        disabled={val.disabled || false}
+        onPress={val.onPress}
+        key={key}
+      >
+        <View style={[styles.option]}>
+          {val.icon ? <Icon name={val.icon} size={35} /> : undefined}
+          {
+            val.image ? (
+              <Image source={val.image} resizeMode="contain" style={{ height: height / 2.6 }} />
+            ) : undefined
+          }
+          <Text style={{ marginTop: 5 }}>
+            {val.title}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+
+  renderOptions() {
+    let previousView;
+    return map(this.props.list, (val, key) => {
+      if (key % 2 !== 0) {
+        return (
+          <View key={key} style={styles.row}>
+            {this.renderOptionView(previousView.val, previousView.key)}
+            {this.renderOptionView(val, key)}
+          </View>
+        );
+      } else if (this.props.list.length - 1 === key) {
+        return (
+          <View key={key} style={styles.row}>
+            {this.renderOptionView(val, key)}
+          </View>
+        );
+      }
+
+
+      previousView = { val, key };
+    });
+  }
+
+  render() {
+    const { container } = styles;
+    return (
+      <View style={container}>
+        {this.renderOptions()}
+      </View>
+    );
+  }
+}
+
+const styles = {
+  container: {
+    backgroundColor: '#FFF',
+  },
+  row: {
+    flexDirection: 'row'
+  },
+  option: {
+    flex: 1,
+    padding: 30,
+    borderWidth: 1,
+    borderColor: '#f0f0f0',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
+
+export { BlockList };

src/components/Button.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  TouchableOpacity,
+  Text
+} from 'react-native';
+
+/*
+  ## EXAMPLE:
+  <Button
+    label="click me"
+    onPress={() => doSomething()}
+    type="wide" /> // optional
+*/
+
+const getStyle = (type) => {
+  switch (type) {
+    case 'wide':
+      return styles.buttonWide;
+    case 'callForAction':
+      return styles.buttonCallForAction;
+
+    default:
+      return styles.buttonRound;
+  }
+};
+
+const Button = (props) => {
+    const { style, onPress, label, type, textColor } = props;
+    return (
+      <TouchableOpacity style={[styles.button, getStyle(type), style]} onPress={onPress}>
+        <Text style={[styles.buttonText, { color: textColor }]}>{label}</Text>
+      </TouchableOpacity>
+    );
+};
+
+const styles = {
+  button: {
+    paddingRight: 22,
+    paddingLeft: 22,
+    paddingTop: 10,
+    paddingBottom: 10,
+    //flex: 1,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 14,
+    fontWeight: 'bold',
+    color: '#000',
+  },
+
+  buttonCallForAction: {
+    backgroundColor: '#FDD835',
+    borderRadius: 25,
+    borderWidth: 0,
+    borderColor: '#fff'
+  },
+
+  buttonWide: {
+    //flex: 1,
+    backgroundColor: '#FFF',
+    borderWidth: 2,
+    borderColor: '#f9f9f9'
+  },
+
+  buttonRound: {
+    backgroundColor: '#f5f5f5',
+    borderRadius: 50,
+    borderWidth: 0,
+  }
+};
+
+export { Button };

src/components/Card/Card.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+  View,
+} from 'react-native';
+
+const Card = (props) => {
+  return (
+    <View style={[styles.cardStyle, props.style]}>
+      {props.children}
+    </View>
+  );
+};
+
+const styles = {
+  cardStyle: {
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    elevation: 1,
+    marginBottom: 12, // neccessary for the shadow to be visible
+    paddingTop: 5,
+    paddingBottom: 5,
+  }
+};
+
+export { Card };

src/components/Card/CardActions.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { View } from 'react-native';
+import { CardIcon } from './CardIcon';
+
+const CardActions = (props) => {
+  const { actionsContainer } = styles;
+  return (
+      <View style={[actionsContainer, props.style]}>
+        <CardIcon icon="share" />
+        <CardIcon icon="heart" />
+      </View>
+  );
+};
+
+const styles = {
+  actionsContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#f3f3f3',
+    borderTopRightRadius: 32,
+  }
+};
+
+export { CardActions };

src/components/Card/CardHeader.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Text, Image, View } from 'react-native';
+import { CardSection } from './CardSection';
+
+const CardHeader = (props) => {
+  const { cardHeader, title, subtitle, image, imageContainer, titlesContainer } = styles;
+
+  const renderImage = () => {
+    if (!props.image.uri) {
+      return <View style={[image, { backgroundColor: '#F5F5F5' }]} />;
+    }
+    return <Image style={image} source={props.image} />;
+  };
+
+  const renderSubtitle = () => {
+    if (props.renderSubtitle) {
+      return props.renderSubtitle(subtitle);
+    }
+
+    return (
+      <Text style={subtitle}>
+        {props.subtitle}
+      </Text>
+    );
+  };
+
+  return (
+    <CardSection style={[cardHeader, props.style]}>
+      <View style={imageContainer}>
+        {renderImage()}
+      </View>
+      <View style={titlesContainer}>
+        <Text style={title}>
+          {props.title}
+        </Text>
+        {renderSubtitle()}
+      </View>
+    </CardSection>
+  );
+};
+
+const styles = {
+  cardHeader: {
+    backgroundColor: '#fff',
+  },
+  titlesContainer: {
+    justifyContent: 'center'
+  },
+  title: {
+    color: '#424242',
+    fontSize: 13,
+    marginBottom: -2
+  },
+  subtitle: {
+    color: '#757575',
+    fontSize: 12
+  },
+  imageContainer: {
+    justifyContent: 'center',
+    paddingRight: 7,
+  },
+  image: {
+    height: 32,
+    width: 32,
+    borderRadius: 20,
+  },
+};
+
+export { CardHeader };