CodingDojo/Welcome.js at master · gxnews8/CodingDojo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React from 'react';
import {
  View,
  Image,
  Text,
  StatusBar,
  StyleSheet,
  TouchableOpacity,
  ActionSheetIOS,
} from 'react-native';
import Colors from '../constants/Colors';
import Layout from '../constants/Layout';
import { MonoText } from '../components/StyledText';

export default class Welcome extends React.Component {
  static navigationOptions = {
    header: null,
  };

  render() {
    const loginWithSocialMedia = () => {
      ActionSheetIOS.showActionSheetWithOptions(
        {
          options: ['Sign in with Google', 'Sign in with Facebook', 'Sign in with Twitter', 'Sign in with GitHub', 'Sign in with LinkedIn', 'Sign in with phone', 'Sign in with email', 'Cancel'],
          cancelButtonIndex: 7,
          //destructiveButtonIndex: 6,
        },
        buttonIndex => {
          console.log({ buttonIndex });
        }
      );
    };

    const showShareSheet = () => {
      ActionSheetIOS.showShareActionSheetWithOptions(
        {
          url: 'https://expo.io',
          message: 'message to go with the shared url',
          subject: 'a subject to go in the email heading',
        },
        error => alert(error),
        (success, method) => {
          if (success) {
            alert(`Shared via ${method}`);
          }
        }
      );
    };

    return (
      <View>
        <StatusBar hidden={true} barStyle="default" />
        <Image
          source={require('../assets/images/YouChat.png')}
          style={{width: Layout.window.width, height: Layout.window.height}}
        />
        <View style={{ flexDirection: 'row', position: 'absolute', zIndex: 1, top: 35, right: 5, paddingHorizontal: 10 }}>
          <Text style={styles.lang} onPress={loginWithSocialMedia}>English</Text>
        </View>
        <View style={{ flexDirection: 'row', position: 'absolute', zIndex: 1, bottom: 20, paddingHorizontal: 10 }}>
          <View style={styles.logInButton}><Text style={styles.logInText} onPress={loginWithSocialMedia}>Log In</Text></View>
          <View style={styles.signUpButton}><Text style={styles.signUpText} onPress={showShareSheet}>Sign Up</Text></View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  lang: {
    color: '#aaa',
    backgroundColor: 'rgba(255,255,255,0)',
  },
  logInButton: {
    width: Layout.window.width / 2.34,
    alignItems: 'center',
    backgroundColor: '#fff',
    borderRadius: 6,
    marginHorizontal: 10,
  },
  signUpButton: {
    width: Layout.window.width / 2.34,
    alignItems: 'center',
    backgroundColor: 'green',
    borderRadius: 6,
    marginHorizontal: 10,
  },
  logInText: {
    fontSize: 18,
    paddingVertical: 13,
  },
  signUpText: {
    fontSize: 18,
    paddingVertical: 13,
    color: '#fff',
  },
});