Workshop React Native - Part 2

App.js

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { createStackNavigator } from "react-navigation";

import HomePage from "./pages/Home";
import CheckinPage from "./pages/Checkin";

export default createStackNavigator(
  {
    Home: {
      screen: HomePage
    },
    Checkin: {
      screen: CheckinPage
    }
  }
);

Checkin.js

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  Dimensions,
  TouchableWithoutFeedback
} from "react-native";

const { width, height } = Dimensions.get("window");

export default class Home extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={require("../assets/checkin.png")}
          style={{
            width,
            height
          }}
        />
        <TouchableWithoutFeedback 
          onPress={() => {
            this.props.navigation.navigate("Home");
          }}>
          <View
            style={styles.backLinkContainer}
          />
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  backLinkContainer: {
    width: '30%',
    height: '7%',
    position: "absolute",
    bottom: '4%',
    right: '20%'
  }
});

Home.js

import React from "react";
import {
  StyleSheet,
  ScrollView,
  Text,
  View,
  Image,
  Dimensions,
  StatusBar,
  TouchableWithoutFeedback,
  Alert
} from "react-native";

const { width, height } = Dimensions.get("window");
// const width = Dimensions.get().width
// const height = Dimensions.get().height

export default class Home extends React.Component {
  handlerSelfieCheckin = () => {
    this.props.navigation.navigate("Checkin");
  };

  render() {
    return (
      <ScrollView bounces={false}>
        <StatusBar hidden={true} />
        <Image
          source={require("../assets/mainpage.png")}
          style={styles.mainImage}
        />
        <TouchableWithoutFeedback onPress={this.handlerSelfieCheckin}>
          <View
            style={{
              backgroundColor: "rgba(0,0,0,0.5)",
              position: "absolute",
              top: "18%",
              left: "7%",
              width: "40%",
              height: "7%"
            }}
          />
        </TouchableWithoutFeedback>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "white",
    alignItems: "center",
    justifyContent: "center"
  },
  mainImage: {
    width: width,
    height: 2714 / 2,
    resizeMode: "contain"
  },
  text: {
    fontFamily: "Helvetica"
  }
});