react-native-qrcode/App.js at master · n3xtcoder/react-native-qrcode · 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
102
103
104
105
106
107
108
109
110
111
112
113
114
import React from "react";
import { StyleSheet, Text, View, TouchableOpacity, Alert } from "react-native";
import { Font } from "expo";
import { getAccessToken, apiFetch } from "./api_utils";

import DummyScreen from "./screens/DummyScreen";
import CheckInScreen from "./screens/CheckInScreen";

const API_USERNAME = "test+mr@urbansportsclub.com";
const API_PASSWORD = "usc2012password";

class FontContainer extends React.Component {
  state = {
    fontLoaded: false,
    accessToken: null
  };

  async componentDidMount() {
    await Font.loadAsync({
      "trade-gothic": require("./assets/fonts/TradeGothicLTStd-Bold.otf")
    });

    this.setState({ fontLoaded: true });

    const accessToken = await getAccessToken(API_USERNAME, API_PASSWORD);
    this.setState({ accessToken });

    const venues = await apiFetch("/venues", accessToken);
    console.log("Venues", venues.length);
  }

  render() {
    return this.state.fontLoaded ? this.props.children : null;
  }
}

export default class App extends React.Component {
  state = {
    screen: "DUMMY"
  };

  renderScreen() {
    switch (this.state.screen) {
      case "CHECK-IN":
        return <CheckInScreen />;
      default:
        return <DummyScreen />;
    }
  }

  render() {
    return (
      <FontContainer>
        <View style={styles.container}>
          <View style={styles.container}>{this.renderScreen()}</View>
          <View
            style={{
              backgroundColor: "lightgrey",
              flexDirection: "row",
              height: 64
            }}
          >
            <TouchableOpacity
              style={styles.tabButton}
              onPress={() => {
                this.setState({ screen: "DUMMY" });
              }}
            >
              <Text>Venues</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.tabButton}
              onPress={() => {
                this.setState({ screen: "DUMMY" });
              }}
            >
              <Text>Activities</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.tabButton}
              onPress={() => {
                this.setState({ screen: "CHECK-IN" });
              }}
            >
              <Text>Check-In</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.tabButton}
              onPress={() => {
                this.setState({ screen: "DUMMY" });
              }}
            >
              <Text>Profile</Text>
            </TouchableOpacity>
          </View>
        </View>
      </FontContainer>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  tabButton: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});