primeiro dia

.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

.gitignore

@@ -0,0 +1,13 @@
+node_modules/
+.expo/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

App.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SignIn } from './src/screens/SignIn';
+
+export default function App() {
+  return (
+    <SignIn />
+  );
+}

app.json

@@ -0,0 +1,32 @@
+{
+  "expo": {
+    "name": "gameplay",
+    "slug": "gameplay",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#070B24"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

package.json

@@ -0,0 +1,25 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "expo": "~41.0.1",
+    "expo-status-bar": "~1.0.4",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
+    "react-native-web": "~0.13.12"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.9.0",
+    "@types/react": "~16.9.35",
+    "@types/react-native": "~0.63.2",
+    "typescript": "~4.0.0"
+  },
+  "private": true
+}

src/@types/png.d.ts

@@ -0,0 +1 @@
+declare module "*"

src/components/ButtonIcon/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { 
+  Text, 
+  Image,
+  View,
+  TouchableOpacity,
+  TouchableOpacityProps
+} from 'react-native';
+
+import DiscordImg from '../../assets/discord.png';
+import { styles } from './styles'
+
+type Props = TouchableOpacityProps & {
+  title: string;
+}
+
+export function ButtonIcon({ title, ...rest }: Props) {
+  return (
+    <TouchableOpacity style={styles.container} {...rest}>
+      <View style={styles.iconWrapper}>
+        <Image source={DiscordImg} style={styles.icon} />
+      </View>
+
+      <Text style={styles.title}>
+        { title }
+      </Text>
+    </TouchableOpacity>
+  );
+}

src/components/ButtonIcon/styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native'
+import { theme } from '../../global/styles/theme'
+
+export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: 56,
+    backgroundColor: theme.colors.primary,
+    borderRadius: 8,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  iconWrapper: {
+    width: 56,
+    height: 56,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRightWidth: 1,
+    borderColor: theme.colors.line
+  },
+  icon: {
+    width: 24,
+    height: 18,
+  },
+  title: {
+    flex: 1,
+    color: theme.colors.heading,
+    fontSize: 15,
+    textAlign: 'center'
+  },
+})

src/global/styles/theme.ts

@@ -0,0 +1,8 @@
+export const theme = {
+  colors: {
+    background: '#0D133D',
+    heading: '#DDE3F0',
+    primary: '#E51C44',
+    line: '#991F36'
+  }
+}

src/screens/SignIn/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { 
+  Text, 
+  View,
+  Image,
+  StatusBar
+} from 'react-native';
+
+import IllustrationImg from '../../assets/illustration.png'
+import { ButtonIcon } from '../../components/ButtonIcon'
+import { styles } from './styles'
+
+export function SignIn() {
+  return (
+    <View style={styles.container}>
+      <StatusBar
+        barStyle="light-content"
+        backgroundColor="transparent"
+        translucent
+      />
+      <Image 
+        source={IllustrationImg}
+        style={styles.image}  
+        resizeMode="stretch"
+      />
+
+      <View style={styles.content}>
+        <Text style={styles.title}>
+          Organize {`\n`}
+          suas jogatinas {`\n`}
+          facilmente
+        </Text>
+
+        <Text style={styles.subTitle}>
+          Crie grupos para jogar seus games {`\n`}
+          favoritos com seus amigos
+        </Text>
+
+        <ButtonIcon
+          title={'Entrar com o Discord'}
+          activeOpacity={0.8}
+        />
+      </View>
+    </View>
+  );
+}

src/screens/SignIn/styles.ts

@@ -0,0 +1,31 @@
+import { StyleSheet } from 'react-native'
+import { theme } from '../../global/styles/theme'
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.colors.background
+  },
+  image: {
+    width: '100%',
+    height: 360,
+  },
+  content: {
+    marginTop: -40,
+    paddingHorizontal: 50,
+  },
+  title: {
+    color: theme.colors.heading,
+    textAlign: 'center',
+    fontSize: 40,
+    marginBottom: 16,
+  },
+  subTitle: {
+    color: theme.colors.heading,
+    fontSize: 15,
+    textAlign: 'center',
+    marginBottom: 64,
+  }
+})

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}