<file_sep>
import axios from 'axios';
import AppAsyncStorage from './components/common/AppAsyncStorage';
import appConstants from './components/common/AppConstants';
import * as SecureStore from 'expo-secure-store';

setFoo=async ()=>{
    await SecureStore.setItemAsync("foo", "bares")
}
getCategories = async () => {
    try {
        let res = await axios.get('https://tarjetaapp.herokuapp.com/categories/api');
        await AppAsyncStorage.storeData(appConstants.CATEGORIES,JSON.stringify(res.data))
    } catch (error) {
        console.log("error api categories =>"+error)
    }
};

getShops = async () => {
    try {
        let res = await axios.get('https://tarjetaapp.herokuapp.com/shops/api');
        await AppAsyncStorage.storeData(appConstants.SHOPS,JSON.stringify(res.data))
    } catch (error) {
        console.log("error api categories =>"+error)
    }
};

getCategories()
getShops()
setFoo()
// console.log("categories: "+JSON.stringify(getCategoriesFromApi()))<file_sep>import { Text, StyleSheet, View, } from 'react-native';
import React, { Component } from 'react';
import { TabView, SceneMap, TabBar } from 'react-native-tab-view';
import Categories from './benefits/Categories';
import Benefits from './benefits/Benefits';
import { Header, Container, Button, Icon, Left, Body, Title } from 'native-base';
import * as SecureStore from 'expo-secure-store';
import Values from '../common/Values';
class Home extends Component {
    static navigationOptions = {
        drawerLabel: 'Tarjeta APP',
    };
    constructor(props) {
        super(props);
        this.state = {
            index: 0,
            routes: [
                { key: 'first', title: 'Categorías' },
                { key: 'second', title: 'Beneficios' },
            ],
        };
        // this.getFoo();

    }
    // async getFoo(){
    //     let bar=await SecureStore.getItemAsync('foo');
    //     alert('foo:'+bar)
    // }
    tabBar = props =>
        <TabBar
            {...props}
            renderLabel={({ route }) => (
                <Text style={{ fontFamily: 'segoeuil', fontSize: 20, color: 'red', margin: 8 }}>
                    {route.title}
                </Text>
            )}
            indicatorStyle={{ backgroundColor: 'red' }}
            style={{
                height: 55,
                backgroundColor: '#fefafa',
            }}
        />;
    render() {
        return (
            <View style={Values.styles.container}>
                <Container>
                    <Header style={{ backgroundColor: 'red' }}>
                        <Left>
                            <Button onPress={() => {
                                this.props.navigation.openDrawer()
                            }} transparent>
                                <Icon name='menu' />
                            </Button>
                        </Left>
                        <Body>
                            <Title style={{ fontFamily: 'segoeuil' }}>Tarjeta App</Title>
                        </Body>

                    </Header>

                    <TabView

                        renderTabBar={this.tabBar}
                        navigationState={this.state}
                        renderScene={SceneMap({
                            first: Categories,
                            second: Benefits
                        })}
                        onIndexChange={index => this.setState({ index })}
                        initialLayout={styles.tabView}
                    />
                </Container>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabView: {
        flex: 1
    }
})

export default Home;<file_sep>import React, { Component } from 'react';
import { View, ScrollView, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';
import { Card, Left, Button, Body, Icon, CardItem, Right } from 'native-base';
import { Button as Btn } from 'react-native-elements';
import Values from '../../common/Values';


class BenefitInfo extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            header: null//navigation.getParam('otherParam', 'Home')
        }

    };
    constructor(props) {
        super(props);
        this.state = {
            favorite: false
        }
    }
    truncateString(str, len) {
        return str.substring(0, len) + "..."
    }
    render() {
        const benefit = this.props.shop.benefits[this.props.benefitId]
        return (
            <ScrollView style={styles.containter}>

                <Card style={{ flex: 0 }}>
                    <CardItem>
                        <Left>
                            <Button style={{ backgroundColor: "#FF9501" }}>
                                <Icon active type={this.props.shop.category.icon_type} name={this.props.shop.category.icon_name} />
                            </Button>
                            <Body>
                                <Text style={{ fontFamily: 'segoeuisb', fontSize: 16 }}>{this.props.shop.shop_name}</Text>
                                <Text style={{ fontFamily: 'segoeuil', fontSize: 14 }} note>{this.props.shop.subtitle}</Text>
                            </Body>
                        </Left>
                        <Right>
                            <View style={{flexDirection: 'row'}}>
                                <TouchableOpacity style={{marginRight: 8,}} onPress={() => {
                                    this.setState({
                                        favorite: !this.state.favorite
                                    })
                                }
                                }>
                                    <Icon
                                        style={{fontSize:30}}
                                        name={this.state.favorite ? "heart" : "heart-empty"} />
                                </TouchableOpacity>
                                <TouchableOpacity onPress={
                                    () => this.props.goBack()
                                }>
                                    <Text style={{ color: '#ccc', fontFamily: 'segoeuisb', fontSize: 30 }}>
                                    <Icon
                                        style={{fontSize:30}}
                                        name='close'/>
                                </Text>
                                </TouchableOpacity>
                            </View>
                        </Right>
                    </CardItem>
                    <CardItem cardBody>
                        <View style={{ height: 150, width: null, flex: 1, padding: 10, backgroundColor: '#f4f4f4', borderRadius: 2 }}>
                            <Image source={{ uri: this.props.shop.logo }}
                                style={{ height: 130, width: 130, alignSelf: 'center' }} />

                        </View>
                    </CardItem>
                    <CardItem style={{ paddingBottom: 0 }}>
                        <TouchableOpacity onPress={() => alert(benefit.details_and_terms)}>
                            <Text style={[{ fontFamily: 'segoeuil', fontSize: 18 }]}>
                                {this.truncateString(benefit.details_and_terms, 175)}
                            </Text>
                        </TouchableOpacity>


                    </CardItem>
                    <CardItem style={{ paddingTop: 0, paddingBottom: 0 }}>
                        <Text style={{ fontFamily: 'segoeuisb', fontSize: 18 }}>
                            BENEFICIO :
                        </Text>
                    </CardItem>
                    <CardItem style={{ paddingTop: 0, paddingBottom: 0 }}>
                        <Text style={{ fontFamily: 'segoeuil', fontSize: 18 }}>
                            {benefit.description}
                        </Text>
                    </CardItem>
                    <CardItem>
                        <View style={{ width: null, flex: 1, paddingLeft: 20, paddingRight: 20 }}>
                            {/* <Button style={{ alignItems:"center", padding:5,textAlign:'center',alignSelf: 'stretch',borderRadius:5,backgroundColor:'red' }}>
                                <Text style={{color:'white',fontFamily:'segoeuil',fontSize:20}}>
                                    Obtener Beneficio
                                </Text>
                            </Button> */}
                            <Btn
                                containerStyle={{ alignSelf: 'stretch' }}
                                titleStyle={[Values.styles.appText, { color: 'white' }]}
                                buttonStyle={[styles.btn]}
                                onPress={
                                    () => {
                                        alert("Muestra el código 45789600 a tu tienda")

                                    }
                                }
                                title="Obtener beneficio"
                            />
                        </View>
                    </CardItem>
                </Card>
                <View style={{ height: 20 }}>

                </View>
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    containter: {
        backgroundColor: '#efeef4',
        padding: 10,
        flex: 1
    },
    btn: {
        backgroundColor: 'red',
        height: 33,
        marginTop: 2
    }
});
export default BenefitInfo;<file_sep>import { createStackNavigator, createAppContainer } from 'react-navigation';
import Login from './src/components/UI/Login';
import RegisterCard from './src/components/UI/QR/RegisterCard';
import RegisterUserData from './src/components/UI/register/RegisterUserData';
// import Home from './src/components/UI/Home';
import DrawerHome from './src/components/UI/DrawerHome';
import BenefitInfo from './src/components/UI/benefits/BenefitInfo';

const MainNavigator = createStackNavigator({
  Login: { screen: Login },
  RegisterUserData: { screen: RegisterUserData },
  DrawerHome: DrawerHome,
  BenefitInfo: { screen: BenefitInfo },
  RegisterCard: { screen: RegisterCard },
},
  {
    headerMode:'none',
    /* The header config from HomeScreen is now here */
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f00',
        alignContent: 'center',

      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
        marginLeft: 0
      },
    },
  }
);


const Router = createAppContainer(MainNavigator);

export default Router;<file_sep>import Home from "./Home";
import Profile from './Profile';
import { createDrawerNavigator} from 'react-navigation';
import CustomDrawerContentComponent from '../common/CustomDrawerContentComponent';

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home,
  },
  Perfil: {
    screen: Profile,
  },
  Favoritos: {
    screen: Profile,
  },
  "Mis puntos": {
    screen: Profile,
  },
  Historial: {
    screen: Profile,
  },
  Mapa: {
    screen: Profile,
  },
},
  {
    contentComponent: CustomDrawerContentComponent,
   
  });
export default MyDrawerNavigator;
<file_sep>import React, { Component } from 'react';
import { View,ActivityIndicator,Text } from 'react-native';
import Values from './Values';
class Loader extends Component {
    state = {  }
    render() { 
        return ( <View style={[Values.styles.container,Values.styles.centered]}>
            <ActivityIndicator size='large'/>
            <Text style={Values.styles.appText}>
                {this.props.message}
            </Text>
        </View> );
    }
}
 
export default Loader;<file_sep>import React, { Component } from 'react';
import { ScrollView, StyleSheet, Image, View, TouchableOpacity } from 'react-native';
import { CardItem, Card, Body, Button, Left, Text, Icon } from 'native-base';
import AppAsyncStorage from '../../common/AppAsyncStorage';
import appConstants from '../../common/AppConstants';
import Values from '../../common/Values';
import BenefitInfo from './BenefitInfo';

class Benefits extends Component {
    constructor(props) {
        super(props);
        this.state = {
            categories: [],
            shops: [],
            selectedBenefit: null,
            selectedShop:null
        }
        this.loadShops()
    }

    async loadShops() {
        let shopsArray = await AppAsyncStorage.retrieveData(appConstants.SHOPS)
        let categoriesArray = await AppAsyncStorage.retrieveData(appConstants.CATEGORIES)
        if (shopsArray != null) {
            shops = JSON.parse(shopsArray);
            categories = JSON.parse(categoriesArray)
            shops.forEach(shop => {
                let category = categories.find((c) => {
                    return c._id == shop.category_id
                })
                if (category != null) {
                    shop.category = category
                }
            });
            this.setState({
                shops: shops
            })
        }

    }
    goBack() {
        this.setState({
            selectedBenefit: null
        })
    }
    render() {
        if (this.state.selectedBenefit != null) {
            return (
                <BenefitInfo
                    benefitId={this.state.selectedBenefit}
                    shop={this.state.selectedShop}
                    goBack={() => this.goBack()}
                    
                />
            )
        }
        return (
            <ScrollView style={[styles.containter]} >

                {this.state.shops.map(
                    (shop, i) => {
                        return shop.benefits.map(
                            (benefit, j) => {
                                return (
                                    <TouchableOpacity onPress={
                                        () => {
                                           this.setState({
                                                selectedBenefit: j,
                                                selectedShop: shop,
                                            })
                                        }
                                    } key={"benefit_" + i + "_" + j}>
                                        <Card>
                                            <CardItem>
                                                <Left>
                                                    <Button style={{ backgroundColor: "#FF9501" }}>
                                                        <Icon active type={shop.category.icon_type} name={shop.category.icon_name} />
                                                    </Button>
                                                    <Body>
                                                        <Text style={{fontFamily:'segoeuisb',fontSize:16}}>{shop.shop_name}</Text>
                                                        <Text style={{fontFamily:'segoeuil',fontSize:14}} note>{shop.subtitle}</Text>
                                                    </Body>
                                                </Left>
                                            </CardItem>
                                            <CardItem cardBody>
                                                <View style={{ height: 200, width:null,flex:1,padding:10,backgroundColor:'#f4f4f4',borderRadius:2}}>
                                                    <Image source={{ uri: shop.logo }}
                                                        style={{ height: 180, width: 180, alignSelf: 'center' }} />

                                                </View>


                                            </CardItem>
                                            <CardItem>
                                                <Text style={[{ fontFamily:'segoeuisb',fontSize:16, textAlign: 'center' }]}>
                                                    {benefit.description}
                                                </Text>
                                            </CardItem>
                                        </Card>
                                    </TouchableOpacity>
                                )
                            }
                        )
                    }
                )}
                <View style={{ height: 20 }}>

                </View>
            </ScrollView>
        );
    }
}
const styles = StyleSheet.create({
    containter: {
        backgroundColor: '#efeef4',
        padding: 10,
        flex: 1
    }
});
export default Benefits;<file_sep>const appConstants={
    LOGIN:"Login",
    REGISTER_CARD:"RegisterCard",
    REGISTER_USER_DATA:"RegisterUserData",
    DRAWER_HOME :"DrawerHome",
    BENEFIT_INFO:"BenefitInfo",
    CATEGORIES:"categories",
    SHOPS:"shops",
    UNCHECKED:'unchecked',
    NEEDS_UPDATE:"needs_update",
    UP_TO_DATE:"up_to_date",
    USER_INFO:"user_info",
}

export default appConstants;
<file_sep>import React from 'react';
import { StyleSheet, View, ActivityIndicator, Text, TouchableOpacity, Linking } from 'react-native';
import { Font } from 'expo';
import Router from './Router';
import appConstants from './src/components/common/AppConstants';
import axios from 'axios';
import Constants from 'expo-constants';
import Values from './src/components/common/Values';
import AppAsyncStorage from './src/components/common/AppAsyncStorage';
import Loader from './src/components/common/Loader';

const LoadingStatus = [
  "Cargando Fuentes",
  "Cargando Información",
  "Revisando Actualizaciones",
  "ok"
]

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      LoadingStatusIndex: 0,
      checkVersionStatus: appConstants.UNCHECKED
    }
  }
  async componentDidMount() {
    await Font.loadAsync({
      'segoeuil': require('./assets/fonts/segoeuil.ttf'),
      'segoeuisb': require('./assets/fonts/segoeuisb.ttf'),
      'Roboto': require('native-base/Fonts/Roboto.ttf'),
      'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    });
    this.setState({
      LoadingStatusIndex: 1
    });
    await this.getCategories()
    await this.getShops()
    this.setState({
      LoadingStatusIndex: 2
    });
  }

  getCategories = async () => {
    try {
      let res = await axios.get('https://tarjetaapp.herokuapp.com/categories/api');
      await AppAsyncStorage.storeData(appConstants.CATEGORIES, JSON.stringify(res.data))
    } catch (error) {
      console.log("error api categories =>" + error)
    }
  };

  getShops = async () => {
    try {
      let res = await axios.get('https://tarjetaapp.herokuapp.com/shops/api');
      await AppAsyncStorage.storeData(appConstants.SHOPS, JSON.stringify(res.data))
    } catch (error) {
      console.log("error api categories =>" + error)
    }
  };


  async checkAppVersion() {
    try {
      let response = await axios({
        method: 'get',
        url: "https://tarjetaapp.herokuapp.com/version",
        timeout: 1000
      })
      if (Constants.appOwnership == 'expo') {
        this.setState({
          checkVersionStatus: appConstants.UP_TO_DATE
        })
      } else {
        if (Constants.platform.android.versionCode < response.data.version) {
          this.setState({
            checkVersionStatus: appConstants.NEEDS_UPDATE
          })
        } else {
          this.setState({
            checkVersionStatus: appConstants.UP_TO_DATE
          })
        }
      }
    } catch (error) {
      console.log("error checking updates: " + error)
    }

  }
  render() {
    switch (this.state.LoadingStatusIndex) {
      case 0:
        return (
          <View style={styles.container}>
            <ActivityIndicator size='large' />
            <Text>{LoadingStatus[this.state.LoadingStatusIndex]}</Text>
          </View>
        );
      case 1:
        return (
          <Loader message={LoadingStatus[this.state.LoadingStatusIndex]} />
        )
      case 2:
        switch (this.state.checkVersionStatus) {
          case appConstants.UNCHECKED:
            this.checkAppVersion();
            return (
              <Loader message={LoadingStatus[this.state.LoadingStatusIndex]}/>
            )
          case appConstants.NEEDS_UPDATE:
            return (
              <View style={[Values.styles.container, Values.styles.centered]}>
                <Text style={Values.styles.appText}>Necesitamos una actualización :)</Text>
                <TouchableOpacity
                  onPress={() => {
                    Linking.openURL('https://play.google.com/store/apps/details?id=com.cerezabusiness.tarjetaapp')
                  }}
                  style={styles.btn}
                >
                  <Text style={Values.styles.appText}>
                    Ir a Google Play
                    </Text>
                </TouchableOpacity>
              </View>
            );
          case appConstants.UP_TO_DATE:

            return (
              <Router />
            );


        }


      default:
        break;
    }

  }




}





const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  btn: {
    margin: 10,
    padding: 5,
    borderWidth: 1,
    borderColor: 'red',
    borderRadius: 5,
  }
});<file_sep>import React, { Component } from 'react';
import { StyleSheet, ScrollView, Text } from 'react-native';
import { DrawerItems, SafeAreaView } from 'react-navigation';
import { Button } from 'native-base';
import * as SecureStore from 'expo-secure-store';
import appConstants from './AppConstants';
const CustomDrawerContentComponent = props => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
      <Button onPress={
        () => {
          SecureStore.deleteItemAsync(appConstants.USER_INFO)
          props.navigation.dangerouslyGetParent().navigate(appConstants.LOGIN);
        }
      } block>
        <Text>Cerrar sesión</Text>
      </Button>
    </SafeAreaView>

  </ScrollView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default CustomDrawerContentComponent;<file_sep>/**
 *
 * This file was generated with Adobe XD React Exporter
 * Exporter for Adobe XD is written by: <NAME> <<EMAIL>>
 *
 **/

import React, { Component } from 'react';
import { View, StyleSheet, Image, PixelRatio, Text } from 'react-native';
import Constants from 'expo-constants';
import Values from '../common/Values';
import { Item, Label, Input } from 'native-base';
import { Button } from 'react-native-elements';
import appConstants from '../common/AppConstants';
import Loader from '../common/Loader';
import * as SecureStore from 'expo-secure-store';
import Axios from 'axios';
import { NavigationEvents } from 'react-navigation';

/* Adobe XD React Exporter has dropped some elements not supported by react-native-svg: style */
const loadingStatus = ["Cargando datos del usuario", 'ok']
class Login extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      header: null
    }

  };
  constructor(props) {
    super(props);
    this.state = {
      loadingStatusIndex: 0,
      userData: {
        email: '',
        password: '',
      },
    }
    this.checkUserData();
  }
  onChangeText(value, field) {
    let userDataCopy = {}
    Object.assign(userDataCopy, this.state.userData);
    userDataCopy[field] = value;
    this.setState({
      userData: userDataCopy
    })
  }
  async checkUserData() {
    let userInfo = JSON.parse(await SecureStore.getItemAsync(appConstants.USER_INFO));
    if (userInfo != null && userInfo.user) {
      this.goTo(appConstants.DRAWER_HOME);
    } else {
      this.setState({
        loadingStatusIndex: 1
      })
    }
  }

  goTo(page, params = {}) {
    const { navigate } = this.props.navigation;
    navigate(page, params)
    // alert("clicked")
  }
  async login() {
    this.setState({
      isLoading: true
    })
    try {
      let response = await Axios.post('https://tarjetaapp.herokuapp.com/users/api/auth/signin'
        , this.state.userData)
      if (response.data.token) {
        await SecureStore.setItemAsync(appConstants.USER_INFO, JSON.stringify(response.data))
        alert('Bienvenido, ' + response.data.user.name)
        this.setState({
          isLoading: false
        })
        this.goTo(appConstants.DRAWER_HOME)
      }
    } catch (error) {
      console.log(error)
      if (error.response) {
        /*
         * The request was made and the server responded with a
         * status code that falls out of the range of 2xx
         */
        // console.log(error.response.data);
        // console.log(error.response.status);
        // console.log(error.response.headers);
        switch (error.response.status) {
          case 400:
            alert('lo sentimos no hay coincidencias');
            this.setState({
              userData: {
                email: '',
                password: '',
              }
            })
            break;
          default:
            alert('un error ha ocurrido');
            break;
        }
      } else if (error.request) {
        /*
         * The request was made but no response was received, `error.request`
         * is an instance of XMLHttpRequest in the browser and an instance
         * of http.ClientRequest in Node.js
         */
        //console.log(error.request.response);
        alert('No estás conectado a internet');
        this.setState({
          userData: {
            email: '',
            password: '',
          }
        })
      } else {
        // Something happened in setting up the request and triggered an Error
        console.log('Error', error.message);
      }
      console.log(error.config);

    }
  }

  render() {
    if (this.state.loadingStatusIndex == 0) {
      return (
        <View style={[Values.styles.container]}>
          <NavigationEvents
            onWillFocus={payload => console.log('will focus', payload)}
            onDidFocus={() => this.checkUserData()}
            onWillBlur={payload => console.log('will blur', payload)}
            onDidBlur={payload => console.log('did blur', payload)}
          />
          <Loader message={loadingStatus[this.state.loadingStatusIndex]} />
        </View>)
    }
    return (
      <View
        style={[Values.styles.container, styles.container]}
      >

        <View style={[styles.logoContainer, Values.styles.centered]}>
          <Image style={styles.logo} source={require('./img/logo.png')} />
        </View>
        <View style={styles.formContainer}>
          <View style={[styles.formTitle, Values.styles.centered]}>
            <Text style={[styles.formText, styles.marginEqual]}>
              BIENVENIDOS A UN MUNDO DE BENEFICIOS
            </Text>
          </View>

          <View style={
            [styles.form, Values.styles.centered, styles.marginEqual]
          }>
            <Item style={styles.formInput} floatingLabel>
              <Label style={[styles.formText, styles.marginBottom]}>Correo o teléfono</Label>
              <Input value={this.state.userData['email']}
                onChangeText={
                  (text) => {
                    this.onChangeText(text, 'email')
                  }
                } style={[styles.formText]} form />
            </Item>
            <Item style={styles.formInput} floatingLabel>
              <Label style={[styles.formText, styles.marginBottom]}>Clave</Label>
              <Input value={this.state.userData['password']}
                onChangeText={
                  (text) => {
                    this.onChangeText(text, '<PASSWORD>')
                  }
                } style={[styles.formText]} secureTextEntry={true} />
            </Item>
            <Button
              containerStyle={{ alignSelf: 'stretch' }}
              titleStyle={[styles.formText, { color: 'red' }]}
              buttonStyle={[styles.btn]}
              onPress={
                () => {
                  this.login();
                }
              }
              title="Ingresa"
            />
          </View>
        </View>
        <View style={styles.socialLoginContainer}>
          <View style={
            [styles.form, { alignItems: 'center' }, styles.marginEqual]
          }>
            <Button
              containerStyle={{ alignSelf: 'stretch' }}
              titleStyle={[styles.formText, { color: 'white' }]}
              buttonStyle={[styles.btn, { backgroundColor: '#3B5998' }]}
              title="Ingresa con Facebook"
            />
            <Button
              containerStyle={{ alignSelf: 'stretch' }}
              titleStyle={[styles.formText, { color: 'white' }]}
              buttonStyle={[styles.btn, { backgroundColor: '#0F9D58' }]}
              title="Ingresa con Google"

            />

            <Text
              style={[styles.formText, { alignSelf: 'stretch' }, { marginTop: 20 }]}
              onPress={() => this.goTo(appConstants.REGISTER_CARD, {})}
            >
              Registra <Text style={{ textDecorationLine: 'underline' }}>aquí</Text> tu tarjeta si aún no eres socio
            </Text>
          </View>
        </View>


      </View >
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ff0000',
  },
  logo: {
    width: 224,//PixelRatio.getPixelSizeForLayoutSize(126),
    height: 62//PixelRatio.getPixelSizeForLayoutSize(35),
  },
  logoContainer: {
    flex: 0.46
  },
  formContainer: {
    flex: 1,
  },
  formTitle: {
    flex: 0.20
  },
  form: {
    flex: 1
  },
  formText: {
    fontFamily: 'segoeuil',
    textAlign: 'center',
    color: 'white',
    fontSize: 20// fontSize: PixelRatio.getPixelSizeForLayoutSize(10),
  },
  formInput: {
    borderColor: 'white',
    padding: 5,
    color: 'white',
    marginBottom: 5,
  },
  btn: {
    backgroundColor: 'white',
    height: 33,
    marginTop: 5//PixelRatio.getPixelSizeForLayoutSize(5)
  },
  socialLoginContainer: {
    flex: 0.66,

  },
  marginEqual: {
    marginLeft: 68, //cambió con respecto a XD
    marginRight: 68,//cambió con respecto a XD
  },
  marginBottom: {
    marginBottom: 2//PixelRatio.getPixelSizeForLayoutSize(2)
  },


});



export default Login;
<file_sep>import { StyleSheet } from 'react-native';
import Constants from 'expo-constants';
export default values = {
    styles: StyleSheet.create({
        centered: {
            justifyContent: 'center',
            alignItems: 'center',
        },
        container: {
            flex: 1,
            paddingTop: Constants.statusBarHeight,
        },
        promptTitle:{
            fontSize:20,
            fontFamily: 'segoeuil',
        },
        appText:{
            fontSize:20,
            fontFamily: 'segoeuil',
        }
    }),

}<file_sep>import React, { Component } from 'react';
import Values from "../../common/Values";
import { ScrollView, View, Text, StyleSheet, Image, KeyboardAvoidingView } from 'react-native';
import { Item, Label, Input, Right, Icon, Button as Btn } from 'native-base';
import { Button } from 'react-native-elements';
import appConstants from '../../common/AppConstants';
import Axios from 'axios';
import { isLoading } from 'expo-font';
import Loader from '../../common/Loader';
import * as SecureStore from 'expo-secure-store';

class RegisterUserData extends Component {

    static navigationOptions = ({ navigation }) => {
        return {
            header: null
        }

    };
    constructor(props) {
        super(props);
        this.state = {
            secureTextEntry: true,
            userData: {
                first_name: '',
                last_name: '',
                email: '',
                phone_number: '',
                password: '',
            },
            isLoading: false
        }
    }
    onChangeText(value, field) {
        let userDataCopy = {}
        Object.assign(userDataCopy, this.state.userData);
        userDataCopy[field] = value;
        this.setState({
            userData: userDataCopy
        })
    }
    async doRegister() {
        this.setState({
            isLoading: true
        })
        try {
            let data = this.state.userData;
            data2Send = {
                name: data.first_name + ' ' + data.last_name,
                email: data.email,
                phone_number: data.phone_number,
                password: <PASSWORD>
            }
            let response = await Axios.post('https://tarjetaapp.herokuapp.com/users/api'
                , data2Send)
            if (response.data.token) {
                await SecureStore.setItemAsync(appConstants.USER_INFO, JSON.stringify(response.data))
                alert('que bien te registraste')
                this.setState({
                    isLoading: false
                })
                this.goTo(appConstants.DRAWER_HOME)
            }
        } catch (error) {
            console.log(error)
        }
    }
    goTo(page) {
        this.props.navigation.navigate(page);
    }
    render() {
        if (this.state.isLoading) {
            return (<Loader message='Registrandote...' />)
        }
        return (
            <KeyboardAvoidingView style={[Values.styles.container]} behavior="padding" enabled>
                <ScrollView style={[{ flex: 1 }, styles.container]}>
                    <Image style={styles.logo} source={require('../img/logo.png')} />
                    <Text style={[styles.formText, styles.marginEqual]}>
                        REGÍSTRATE PARA EMPEZAR A DISFRUTAR
                </Text>
                    <View style={[styles.marginEqual, { flex: 1 }]}>
                        <Item style={styles.formInput} floatingLabel>
                            <Label style={[styles.formText, styles.marginBottom]}>Nombre</Label>
                            <Input
                                value={this.state.userData['first_name']}
                                onChangeText={
                                    text => { this.onChangeText(text, 'first_name') }
                                }
                                style={[styles.formText]} form />
                        </Item>
                        <Item style={styles.formInput} floatingLabel>
                            <Label style={[styles.formText, styles.marginBottom]}>Apellido</Label>
                            <Input
                                value={this.state.userData['last_name']}
                                onChangeText={
                                    text => { this.onChangeText(text, 'last_name') }
                                }
                                style={[styles.formText]} form />
                        </Item>

                        <Item style={styles.formInput} floatingLabel>
                            <Label style={[styles.formText, styles.marginBottom]}>Correo electrónico</Label>
                            <Input
                                value={this.state.userData['email']}
                                onChangeText={
                                    text => { this.onChangeText(text, 'email') }
                                }
                                style={[styles.formText]} form />
                        </Item>

                        <Item style={styles.formInput} floatingLabel>
                            <Label style={[styles.formText, styles.marginBottom]}>Teléfono</Label>
                            <Input
                                value={this.state.userData['phone_number']}
                                onChangeText={
                                    text => { this.onChangeText(text, 'phone_number') }
                                }
                                style={[styles.formText]} form />
                        </Item>
                        <View style={{flexDirection:'row',alignSelf: 'stretch' }}>
                            <Item style={[styles.formInput,{flex:1}]} floatingLabel>
                                <Label style={[styles.formText, styles.marginBottom]}>Clave</Label>
                                <Input
                                    value={this.state.userData['password']}
                                    onChangeText={
                                        text => { this.onChangeText(text, 'password') }
                                    }
                                    style={[styles.formText]} form secureTextEntry={this.state.secureTextEntry} />

                            </Item>
                            <Btn
                                onPress={() => {
                                    this.setState({
                                        secureTextEntry: !this.state.secureTextEntry
                                    })
                                }}
                                transparent>
                                <Icon name={this.state.secureTextEntry ? 'eye' : 'eye-off'} />
                            </Btn>

                        </View>

                        <Button
                            containerStyle={{ marginTop: 25, alignSelf: 'stretch' }}
                            titleStyle={[styles.formText, { color: 'red' }]}
                            buttonStyle={[styles.btn]}
                            onPress={
                                () => {

                                    this.doRegister()
                                }
                            }
                            title="Registrarse"
                        />

                    </View>
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'red'
    },
    logo: {
        marginTop: 58,
        marginBottom: 28, //cambió respecto a XD
        alignSelf: 'center',
        width: 224,//PixelRatio.getPixelSizeForLayoutSize(126),
        height: 62//PixelRatio.getPixelSizeForLayoutSize(35),
    },
    formText: {
        fontFamily: 'segoeuil',
        textAlign: 'center',
        color: 'white',
        fontSize: 20// fontSize: PixelRatio.getPixelSizeForLayoutSize(10),
    },
    marginEqual: {
        marginLeft: 68,
        marginRight: 68,
    },
    formInput: {
        borderColor: 'white',
        padding: 2,
        color: 'white',
        marginBottom: 5,
    },
    marginBottom: {
        marginBottom: 2//PixelRatio.getPixelSizeForLayoutSize(2)
    },
    btn: {
        backgroundColor: 'white',
        height: 33,
        marginTop: 5//PixelRatio.getPixelSizeForLayoutSize(5)
    },
})

export default RegisterUserData;<file_sep>import React, { Component } from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import { Permissions, BarCodeScanner } from 'expo';
import Values from '../../common/Values';
import appConstants from '../../common/AppConstants';
import Constants from 'expo-constants';
import privateKeyJson from "../../../../keys/dev_private_key.json"
class RegisterCard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hasCameraPermission: null,
            scanned: false,
        }
        
        
    }
    async componentDidMount() {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({ hasCameraPermission: status === 'granted' });
    }

    static navigationOptions = ({ navigation }) => {
        return {
            header: null
        }

    };
    goTo(page, params = {}) {
        const { navigate } = this.props.navigation;
        navigate(page, params)
    }
    handleBarCodeScanned = ({ type, data }) => {

        this.setState({
            scanned:true
        })
        alert('Tarjeta Escaneada, Completa tus datos');
        this.goTo(appConstants.REGISTER_USER_DATA)
    };
    render() {
        const { hasCameraPermission, scanned } = this.state;
        if (hasCameraPermission === null) {
            return (
                <View style={[Values.styles.container, Values.styles.centered]}>
                    <Text style={Values.styles.promptTitle}>Esperando los permisos de cámara</Text>
                </View>

            )
        }
        if (hasCameraPermission === false) {
            return (
                <View style={[Values.styles.container, Values.styles.centered]}>
                    <Text style={Values.styles.promptTitle}>Sin Acceso a la cámara</Text>
                </View>

            )

        }
        return (<View style={[Values.styles.container]}>
            <BarCodeScanner
                    onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
                    style={StyleSheet.absoluteFill}
                />
            <View style={styles.qrReaderContainer}>
                <Image style={styles.qrFrame} source={require('../img/qrFrame.png')} />
            </View>
            <View style={styles.imageContainer}>
                <Text style={[styles.title, styles.marginEqual]}>Apunta con tu cámara al código que figura en tu tarjeta</Text>
                <Image style={[styles.image]} source={require('../img/image1.png')} />
            </View>
        </View>);
    }
}
const styles = StyleSheet.create({
    qrReaderContainer: {
        paddingTop: Constants.statusBarHeight,
        flex:1,
        height: 320, //cambió con respecto a XD
        //justifyContent: 'center',
        alignItems: 'center',
    },
    qrFrame:{
        alignSelf:'center',
        height:254,//cambió con respecto a XD
        width:250.98,//cambió con respecto a XD
    },
    imageContainer: {
        flex: 1,
        backgroundColor:'white'
    },
    title: {
        paddingTop: 18,
        fontFamily: 'segoeuil',
        fontSize: 20,
        color: 'red',
        textAlign: 'center',
    },
    image: {
        height: 200,
        width: 313,
        alignSelf: 'center',
        marginTop: 11,
    },
    marginEqual: {
        marginLeft: 43,
        marginRight: 43,
    },
})
export default RegisterCard;