feat: first commit

components/Header.tsx

@@ -1,24 +1,38 @@
 import React from 'react'
-import { View, StyleSheet, Image } from 'react-native'
+import { View, StyleSheet, Image, Text } from 'react-native'
+import { MaterialIcons } from '@expo/vector-icons'
 
 import Logo from '../images/Nubank_Logo.png'
 
 const Header: React.FC = () => {
   return (
     <View style={styles.container}>
-      <View>
+      <View style={styles.top}>
         <Image source={Logo} />
+        <Text style={styles.title}>Henrique</Text>
       </View>
+      <MaterialIcons size={20} name="keyboard-arrow-down" color="#fff" />
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     alignItems: 'center',
     paddingTop: 40,
     paddingBottom: 30
+  },
+  top: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 20,
+    marginBottom: 10
+  },
+  title: {
+    fontSize: 18,
+    color: '#fff',
+    fontWeight: 'bold',
+    marginLeft: 8
   }
 })
 

components/Menu.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { StyleSheet, View, Text, TouchableOpacity, Animated } from 'react-native'
+import QRCode from 'react-native-qrcode-svg'
+import { MaterialIcons } from '@expo/vector-icons'
+
+interface Props {
+  translateY: Animated.Value
+}
+
+const Menu: React.FC<Props> = ({ translateY }) => {
+  return (
+    <Animated.ScrollView
+      style={[styles.container, {
+        opacity: translateY.interpolate({
+          inputRange: [0, 150],
+          outputRange: [0, 1]
+        })
+      }]}
+    >
+      <View style={styles.code}>
+        <QRCode
+          value="http://facebook.github.io/react-native/"
+          size={80}
+          backgroundColor="#fff"
+          color="#8b10ae"
+        />
+      </View>
+      <View style={styles.nav}>
+        <View style={styles.navItem}>
+          <MaterialIcons name="help-outline" size={20} color="#fff" />
+          <Text style={styles.navText}>Me ajuda</Text>
+        </View>
+        <View style={styles.navItem}>
+          <MaterialIcons name="person-outline" size={20} color="#fff" />
+          <Text style={styles.navText}>Perfil</Text>
+        </View>
+        <View style={styles.navItem}>
+          <MaterialIcons name="credit-card" size={20} color="#fff" />
+          <Text style={styles.navText}>Congiguracao do cartao</Text>
+        </View>
+        <View style={styles.navItem}>
+          <MaterialIcons name="smartphone" size={20} color="#fff" />
+          <Text style={styles.navText}>Configuracao do app</Text>
+        </View>
+      </View>
+      <TouchableOpacity style={styles.signOutButton}>
+        <Text style={styles.signOutButtonText}>Sair do app</Text>
+      </TouchableOpacity>
+    </Animated.ScrollView>
+  )
+}
+
+const { create, hairlineWidth } = StyleSheet
+
+const styles = create({
+  container: {
+    marginStart: 30,
+    marginEnd: 30
+  },
+  code: {
+    backgroundColor: '#fff',
+    padding: 10,
+    alignSelf: 'center'
+  },
+  nav: {
+    marginTop: 30,
+    borderTopWidth: hairlineWidth,
+    borderBottomWidth: hairlineWidth,
+    borderBottomColor: 'rgba(255, 255, 255 , 0.8)',
+    borderTopColor: 'rgba(255, 255, 255 , 0.8)'
+  },
+  navItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 12,
+    paddingTop: 12,
+    borderBottomWidth: hairlineWidth,
+    borderBottomColor: 'rgba(255, 255, 255 , 0.8)'
+  },
+  navText: {
+    fontSize: 15,
+    marginStart: 20,
+    color: '#fff'
+  },
+  signOutButton: {
+    borderWidth: hairlineWidth,
+    borderColor: 'rgba(255, 255, 255 , 0.8)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 12,
+    marginTop: 15
+  },
+  signOutButtonText: {
+    color: '#fff',
+    fontWeight: 'bold',
+    fontSize: 13,
+    textTransform: 'uppercase'
+  }
+})
+
+export default Menu

components/Tabs.tsx

@@ -1,10 +1,82 @@
 import React from 'react'
-import { View } from 'react-native'
+import { View, Text, StyleSheet, ScrollView, Animated } from 'react-native'
 
-const Tabs: React.FC = () => {
+import { MaterialIcons } from '@expo/vector-icons'
+
+interface Props {
+  translateY: Animated.Value
+}
+
+const Tabs: React.FC<Props> = ({ translateY }) => {
   return (
-    <View></View>
+    <Animated.View style={[styles.container,
+      {
+        transform: [{
+          translateY: translateY.interpolate({
+            inputRange: [0, 380],
+            outputRange: [0, 30],
+            extrapolate: 'clamp'
+          })
+        }]
+      }, {
+        opacity: translateY.interpolate({
+          inputRange: [0, 380],
+          outputRange: [1, 0.3],
+          extrapolate: 'clamp'
+        })
+      }]}>
+      <ScrollView
+        contentContainerStyle={styles.tabsContentContainer}
+        horizontal={true}
+        showsHorizontalScrollIndicator={false}
+      >
+        <View style={styles.tabItem}>
+          <MaterialIcons size={24} color="#fff" name="person-add" />
+          <Text style={styles.tabText}>Indicar amigos</Text>
+        </View>
+        <View style={styles.tabItem}>
+          <MaterialIcons size={24} color="#fff" name="chat-bubble-outline" />
+          <Text style={styles.tabText}>Cobrar</Text>
+        </View>
+        <View style={styles.tabItem}>
+          <MaterialIcons size={24} color="#fff" name="arrow-downward" />
+          <Text style={styles.tabText}>Depositar</Text>
+        </View>
+        <View style={styles.tabItem}>
+          <MaterialIcons size={24} color="#fff" name="arrow-upward" />
+          <Text style={styles.tabText}>Transferir</Text>
+        </View>
+        <View style={styles.tabItem}>
+          <MaterialIcons size={24} color="#fff" name="lock" />
+          <Text style={styles.tabText}>Bloquear cartao</Text>
+        </View>
+      </ScrollView>
+    </Animated.View>
   )
 }
 
+const styles = StyleSheet.create({
+  container: {
+    height: 100,
+    marginTop: 20
+  },
+  tabsContentContainer: {
+    paddingStart: 10,
+    paddingEnd: 20
+  },
+  tabItem: {
+    width: 100,
+    height: 100,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    borderRadius: 3,
+    marginLeft: 10,
+    padding: 10,
+    justifyContent: 'space-between'
+  },
+  tabText: {
+    fontSize: 13,
+    color: '#fff'
+  }
+})
+
 export default Tabs