oauth.js

import React, { Component } from "react";

import {
  AppRegistry,
  Dimensions,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  AsyncStorage,
  WebView,
  Modal
} from "react-native";
var { width, height } = Dimensions.get("window");
import FadingSlides from "react-native-fading-slides";

const slides = [
  {
    image: require("../images/1.jpg"),
    imageWidth: 1000,
    imageHeight: 600
  },
  {
    image: require("../images/2.jpg"),
    imageWidth: 1000,
    imageHeight: 600
  }
];

class InitialScreen extends Component {
  static navigationOptions = {
    header: false
  };

  constructor(props: Props) {
    super(props);
    this.state = {
      modalVisible: false
    };
    this.oauth = `https://washapi.herokuapp.com/users/auth/facebook`;
  }

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  renderLogin() {
    const { navigate } = this.props.navigation;
    navigate("Login");
  }

  renderRegister() {
    const { navigate } = this.props.navigation;
    navigate("Register");
  }

  componentWillMount() {
    AsyncStorage.removeItem("token");
  }

  google() {
    return (
      <WebView
        automaticallyAdjustContentInsets={false}
        source={{ uri: this.oauth }}
        startInLoadingState={true}
      />
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <FadingSlides
          slides={slides}
          fadeDuration={1200}
          stillDuration={2000}
          height={height}
          style={{ position: "relative" }}
        />
        <View
          style={{
            position: "absolute",
            alignItems: "flex-start",
            width: width
          }}
        >
          <Text
            style={{
              paddingLeft: 30,
              color: "#fff",
              fontWeight: "bold",
              fontSize: 40,
              paddingTop: 250,
              paddingBottom: 5
            }}
          >
            Tenha seu carro{"\n"}
            lavado, {"\n"}
            em poucos
            {"\n"}minutos
          </Text>
          <TouchableOpacity
            onPress={() => this.setModalVisible(true)}
            style={{ width: width, backgroundColor: "#2980b9" }}
          >
            <Text
              style={{
                fontWeight: "bold",
                alignSelf: "center",
                padding: 18,
                color: "#fff",
                fontSize: 16
              }}
            >
              Entrar
            </Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={this.renderRegister.bind(this)}
            style={{ width: width }}
          >
            <Text
              style={{
                fontWeight: "bold",
                alignSelf: "center",
                padding: 20,
                color: "#fff",
                fontSize: 12
              }}
            >
              CADASTRE-SE
            </Text>
          </TouchableOpacity>
          <Modal
            animationType="slide"
            transparent={false}
            visible={this.state.modalVisible}
            onRequestClose={() => {
              alert("Modal has been closed.");
            }}
          >
            {this.google()}
          </Modal>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#000"
  },
  wrapper: {
    paddingVertical: 30,
    backgroundColor: "rgba(0,0,0,0.5)",
    paddingRight: 30,
    paddingLeft: 30,
    marginRight: 15,
    marginLeft: 15
  }
});

module.exports = InitialScreen;