Workshop React Native - Part I

Home01.js

import React from "react";
import {
  StyleSheet,
  View,
  Image,
  Dimensions,
} 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/mainpage.png")}
          style={{
            width: width,
            height: height
          }}
        />
      </View>
    );
  }
}

// Teach how to use dinamic values in top and left.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "black"
  }
});

Home02.js

import React from "react";
import {
  StyleSheet,
  View,
  ScrollView,
  Image,
  Dimensions,
  TouchableWithoutFeedback
} from "react-native";
const { width, height } = Dimensions.get("window");

export default class Home extends React.Component {
  render() {
    return (
      <ScrollView
        style={{
          backgroundColor: "#000",
          paddingTop: 0
        }}
        bounces={false}
        showsVerticalScrollIndicator={false}
      >
        <Image
          source={require("../assets/mainpage.png")}
          style={{
            width: width,
            height: 1357
          }}
        />

        <TouchableWithoutFeedback>
          <View style={styles.visibleClick} />
        </TouchableWithoutFeedback>
      </ScrollView>
    );
  }
}

// Teach how to use dinamic values in top and left.
const styles = StyleSheet.create({
  visibleClick: {
    position: "absolute",
    width: "40%",
    height: "7%",
    top: "18%",
    left: "7%"
  },
  container: {
    flex: 1,
    backgroundColor: "black"
  }
});

Home03.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 = () => {
    Alert.alert("Message")
  };

  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"
  }
});