Merge pull request #124 from flexbox/feature/ep-2

add UIKitten

Author: MatthysDev

hackathon/ui-tier-list/README.md

@@ -0,0 +1,5 @@
+# UI Tiers List Twitch show
+
+```console
+cp -R template ReactNativeElements
+```

hackathon/ui-tier-list/ReactNativePaper/.eslintrc

@@ -0,0 +1,3 @@
+{
+ "extends": "react-native-wcandillon",
+}

hackathon/ui-tier-list/ReactNativePaper/.gitignore

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

hackathon/ui-tier-list/ReactNativePaper/App.tsx

@@ -0,0 +1,23 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, View } from "react-native";
+import { Provider as PaperProvider } from "react-native-paper";
+
+import { LoginScreen } from "./LoginScreen";
+
+// eslint-disable-next-line import/no-default-export
+export default function App() {
+ return (
+ <PaperProvider>
+ <View style={styles.container}>
+ <StatusBar style="auto" />
+ <LoginScreen />
+ </View>
+ </PaperProvider>
+ );
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ },
+});

hackathon/ui-tier-list/ReactNativePaper/LoginScreen.tsx

@@ -0,0 +1,70 @@
+import { StyleSheet, View } from "react-native";
+import React from "react";
+import { Button, Text, TextInput, useTheme } from "react-native-paper";
+
+interface Props {}
+
+export const LoginScreen = (props: Props) => {
+ const theme = useTheme();
+
+ return (
+ <View>
+ <View
+ style={[
+ styles.headerContainer,
+ { backgroundColor: theme.colors.primary },
+ ]}
+ >
+ <Text
+ variant="headlineMedium"
+ style={{ color: theme.colors.onPrimary }}
+ >
+ ReactNativePaper
+ </Text>
+ <Text variant="bodyMedium" style={{ color: theme.colors.onPrimary }}>
+ Sign in to your account
+ </Text>
+ </View>
+ <View style={styles.mainContainer}>
+ <TextInput
+ mode="outlined"
+ style={styles.input}
+ placeholder="Email"
+ keyboardType="email-address"
+ textContentType="emailAddress"
+ autoCapitalize="none"
+ autoCorrect={false}
+ autoComplete="email"
+ right={<TextInput.Icon icon="face-woman" />}
+ />
+ <TextInput
+ mode="outlined"
+ style={styles.input}
+ placeholder="Password"
+ secureTextEntry={true}
+ right={<TextInput.Icon icon="eye-outline" />}
+ returnKeyType="done"
+ />
+ <Button mode="contained" onPress={() => console.log("Pressed")}>
+ Sign In
+ </Button>
+ <Button mode="text" onPress={() => console.log("Pressed")}>
+ Don't have an account? Create
+ </Button>
+ </View>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ headerContainer: {
+ alignItems: "center",
+ paddingVertical: 48,
+ },
+ mainContainer: {
+ paddingHorizontal: 24,
+ },
+ input: {
+ marginBottom: 16,
+ },
+});

hackathon/ui-tier-list/ReactNativePaper/README.md

@@ -0,0 +1,6 @@
+# Getting started
+
+```bash
+yarn
+yarn ios
+```

hackathon/ui-tier-list/ReactNativePaper/app.json

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