Scribd Logo
Upload

Welcome to Scribd!

  • React Native User Detail Screen

    Uploaded by

    Ardi Muhammad Husen
    35 views4 pages
    a sample source code of react native user account detail screen

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    a sample source code of react native user account detail screen

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    35 views4 pages

    React Native User Detail Screen

    Uploaded by

    Ardi Muhammad Husen
    a sample source code of react native user account detail screen

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    import React from 'react';

    import { View, ImageBackground, Dimensions, StyleSheet, Image, WebView,


    AsyncStorage, Alert } from 'react-native';
    import { createBottomTabNavigator } from 'react-navigation';
    import { Col, Row, Grid } from "react-native-easy-grid";
    import { Container, Body, Content, Header, Left, Form, Right, Icon, Title, Input,
    Item, Label, Button, Text, List, ListItem, Thumbnail } from "native-base";
    import IconM from 'react-native-vector-icons/dist/MaterialIcons';
    import { TabNavigator, TabBarBottom, StackNavigator } from 'react-navigation';

    class ReportScreen extends React.Component {


    constructor() {

    super()

    this.state = {

    userId: '',
    namaBengkel: '',
    emailBengkel: '',
    fotoBengkel: '',
    alamatBengkel: '',
    jamBuka: '',
    phone: ''

    componentDidMount() {
    AsyncStorage.getItem('user_id').then((idBengkel) => {
    if(idBengkel === null){
    //Alert.alert("token kosong");
    this.setState({ userId: 'null' });
    }
    else{
    this.setState({ userId: idBengkel });
    //Alert.alert(this.state.namaBengkel);
    }
    });

    AsyncStorage.getItem('nama_bengkel').then((bengkelName) => {
    if(bengkelName === null){
    //Alert.alert("token kosong");
    this.setState({ namaBengkel: 'null' });
    }
    else{
    this.setState({ namaBengkel: bengkelName });
    //Alert.alert(this.state.namaBengkel);
    }
    });

    AsyncStorage.getItem('email_bengkel').then((bengkelEmail) => {
    if(bengkelEmail === null){
    //Alert.alert("token kosong");
    this.setState({ emailBengkel: 'null' });
    }
    else{
    this.setState({ emailBengkel: bengkelEmail });
    //Alert.alert(this.state.namaBengkel);
    }
    });

    AsyncStorage.getItem('foto_bengkel').then((bengkelFoto) => {
    if(bengkelFoto === null){
    //Alert.alert("token kosong");
    this.setState({ fotoBengkel: 'null' });
    }
    else{
    this.setState({ fotoBengkel: bengkelFoto });
    //Alert.alert(this.state.namaBengkel);
    }
    });

    AsyncStorage.getItem('alamat_bengkel').then((bengkelAlamat) => {
    if(bengkelAlamat === null){
    //Alert.alert("token kosong");
    this.setState({ alamatBengkel: 'null' });
    }
    else{
    this.setState({ alamatBengkel: bengkelAlamat });
    //Alert.alert(this.state.namaBengkel);
    }
    });

    AsyncStorage.getItem('jam_buka').then((bengkelJamBuka) => {
    if(bengkelJamBuka === null){
    //Alert.alert("token kosong");
    this.setState({ jamBuka: 'null' });
    }
    else{
    this.setState({ jamBuka: bengkelJamBuka });
    //Alert.alert(this.state.namaBengkel);
    }
    });

    AsyncStorage.getItem('phone').then((bengkelPhone) => {
    if(bengkelPhone === null){
    //Alert.alert("token kosong");
    this.setState({ phone: 'null' });
    }
    else{
    this.setState({ phone: bengkelPhone });
    //Alert.alert(this.state.namaBengkel);
    }
    });
    }

    render() {
    const thumbnail = this.state.fotoBengkel;
    const webUrl = this.state.fotoBengkel;
    return (
    <Container>
    <Header noLeft style={{ backgroundColor: 'white' }} >
    <Body style={{ backgroundColor: 'white'}}>
    <Title style={{color: 'black'}}>Detail Akun</Title>
    </Body>
    </Header>
    <Content>
    <List>
    <ListItem itemDivider>
    <Text>Foto Bengkel</Text>
    </ListItem>
    <ListItem>
    <Image resizeMode='cover' source={{uri: webUrl}}
    style={styles.canvas} />
    </ListItem>
    <ListItem itemDivider>
    <Text>Nama Bengkel</Text>
    </ListItem>
    <ListItem>
    <Text>{this.state.namaBengkel}</Text>
    </ListItem>
    <ListItem itemDivider>
    <Text>Alamat Bengkel</Text>
    </ListItem>
    <ListItem>
    <Text>{this.state.alamatBengkel}</Text>
    </ListItem>
    <ListItem itemDivider>
    <Text>Jam Buka Bengkel</Text>
    </ListItem>
    <ListItem>
    <Text>{this.state.jamBuka}</Text>
    </ListItem>
    <ListItem itemDivider>
    <Text>Email Bengkel</Text>
    </ListItem>
    <ListItem>
    <Text>{this.state.emailBengkel}</Text>
    </ListItem>
    <ListItem itemDivider>
    <Text>Phone Bengkel</Text>
    </ListItem>
    <ListItem>
    <Text>{this.state.phone}</Text>
    </ListItem>
    </List>
    <Button block danger onPress={() => this.props.navigation.navigate("LogOut")}>
    <Text>Log Out</Text>
    </Button>
    </Content>
    </Container>
    );
    }
    }

    const styles = StyleSheet.create({


    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
    },
    canvas: {
    flex:1, width: 300, height: 200
    }
    });
    export default ReportScreen

    You might also like