SHARE
TWEET

Untitled

a guest Jun 25th, 2019 46 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import { View,TouchableOpacity, Text, StyleSheet, Image, Dimensions } from 'react-native';
  3. import BacgroundImage from './BackgroundImage';
  4. import Buttons from './Reusable/Button';
  5.  
  6. const { width: WIDTH } = Dimensions.get('window');
  7.  
  8. class LaunchScreen extends Component {
  9.  
  10.   render() {
  11.         return (
  12.  
  13.             <BacgroundImage>
  14.                 <View style={styles.logoContainer}>
  15.                     <Image
  16.                         source={require('./images/logo.png')}
  17.                         style={styles.PlaceLogo}
  18.                     />
  19.                 </View>
  20.  
  21.                 <View style={styles.Buttons}>
  22.                     <Buttons style={styles.signupButton}
  23.                     onPress={() => navigate('Login')}>
  24.                         <Text style={styles.buttonText}> SIGN UP</Text>
  25.                     </Buttons>
  26.                     <Buttons style={styles.loginButton}>
  27.                         <Text style={styles.buttonText}> SIGN IN</Text>
  28.                     </Buttons>
  29.                 </View >
  30.                 <View style={styles.sepratorView}>
  31.  
  32.                     <Text style={styles.sepratorText}>--------- or connect with us on ---------</Text>
  33.  
  34.                 </View >
  35.                 <View style={styles.socialButtonStyle}>
  36.                    <TouchableOpacity
  37.                         style={styles.fbstyle}
  38.                         activeOpacity={0.5}
  39.  
  40.               >
  41.                 <Image
  42.                   source={require('./images/facebookicon.png')}
  43.                   style={styles.iconstyle}
  44.  
  45.                 />
  46.  
  47.                 <View
  48.                 style={styles.sepratorLine}
  49.                 />
  50.                 <Text
  51.                     style={styles.socialButtonText}
  52.                  >FACEBOOK</Text>
  53.               </TouchableOpacity>
  54.  
  55.  
  56.               <TouchableOpacity
  57.                 style={styles.googlestyle}
  58.                 onPress={this.signIn}
  59.                 activeOpacity={0.5}
  60.  
  61.               >
  62.  
  63.                 <Image
  64.                   source={require('./images/google.png')}
  65.                   style={styles.iconstyle}
  66.                 />
  67.  
  68.                 <View
  69.                  style={styles.sepratorLine}
  70.                  />
  71.                 <Text style={styles.socialButtonText} >GOOGLE</Text>
  72.  
  73.               </TouchableOpacity>
  74.             </View>
  75.  
  76.             </BacgroundImage>
  77.         );
  78.     };
  79. }
  80.  
  81.  
  82.  
  83. const styles = StyleSheet.create({
  84.     logoContainer: {
  85.         flex: 1
  86.  
  87.     },
  88.     PlaceLogo: {
  89.         width: WIDTH - 140,
  90.         margin: 75,
  91.         resizeMode: 'center',
  92.         justifyContent: 'center',
  93.         alignItems: 'center',
  94.     },
  95.     yosoButtons: {
  96.         width: WIDTH - 80,
  97.         justifyContent:'center',
  98.         marginTop:350            
  99.  
  100.     },
  101.     signupButton: {
  102.         height:40,
  103.         paddingTop:7,
  104.         marginBottom: 15,
  105.  
  106.     },
  107.     loginButton: {
  108.         height:40,
  109.         paddingTop:7,
  110.         marginBottom: 15
  111.     },
  112.     buttonText: {
  113.  
  114.     },
  115.     sepratorText: {
  116.         textAlign:'center',
  117.         fontSize:20,
  118.         color: '#b6b7ba',        
  119.  
  120.     },
  121.     sepratorView: {
  122.         flexDirection: 'row',
  123.         justifyContent:'center',
  124.         alignItems:'center'
  125.     },
  126.     socialButtonStyle:{
  127.         flex:1,
  128.         flexDirection:'row',
  129.         justifyContent:'center',
  130.         alignItems:'center',
  131.         margin:5
  132.     },
  133.     fbstyle:{
  134.         flex:1,
  135.         flexDirection:'row',
  136.         borderColor:'white',
  137.         alignItems:'center',
  138.         backgroundColor:'#485a96',
  139.         borderWidth:1,
  140.         borderRadius:35,
  141.         height: 40,
  142.         marginLeft:15,
  143.         marginRight:15
  144.     },
  145.     googlestyle:{
  146.         flex:1,
  147.         flexDirection:'row',
  148.         alignItems:'center',
  149.         backgroundColor:'#dc4e41',
  150.         borderWidth:1,
  151.         borderRadius:35,
  152.         borderColor:'white',
  153.         height: 40,
  154.         marginRight:15
  155.     },
  156.     iconstyle:{
  157.         resizeMode:'stretch',
  158.         height:25,
  159.         width:25
  160.     },
  161.     sepratorLine:{
  162.         backgroundColor:'white',
  163.         width:2,
  164.         height: 40
  165.     },
  166.     socialButtonText:{
  167.         color: '#fff',
  168.         flex:1,
  169.         textAlign: 'center',        
  170.         fontSize: 15,
  171.         fontWeight: "bold"
  172.  
  173.     }
  174.  
  175. });
  176.  
  177.  
  178. export default LaunchScreen;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top