Skip to content

Instantly share code, notes, and snippets.

@marcusvbp

marcusvbp/avatar-changer.js

Last active September 11, 2017 12:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marcusvbp/67cf22925cb5fc38aa11f85efc7c7e83 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marcusvbp/67cf22925cb5fc38aa11f85efc7c7e83 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. marcusvbp revised this gist Sep 11, 2017. 1 changed file with 9 additions and 6 deletions.
    15 changes: 9 additions & 6 deletions avatar-changer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,8 @@ import {
    View,
    Button,
    Icon,
    ActionSheet
    ActionSheet,
    Root
    } from 'native-base';
    import { StyleSheet } from 'react-native';

    @@ -32,11 +33,13 @@ export default class AvatarChanger extends Component {
    }
    render() {
    return (
    <View style={styles.container}>
    <Button transparent style={styles.btn} onPress={ () => this.showAS() }>
    <Icon name="person" style={{ color: '#666', fontSize: 50 }} />
    </Button>
    </View>
    <Root>
    <View style={styles.container}>
    <Button transparent style={styles.btn} onPress={ () => this.showAS() }>
    <Icon name="person" style={{ color: '#666', fontSize: 50 }} />
    </Button>
    </View>
    </Root>
    );
    }
    }
  2. marcusvbp created this gist Sep 7, 2017.
    54 changes: 54 additions & 0 deletions avatar-changer.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,54 @@
    import React, { Component } from 'react';
    import {
    View,
    Button,
    Icon,
    ActionSheet
    } from 'native-base';
    import { StyleSheet } from 'react-native';

    const ActionSheetButtons = [
    { text: "Câmera", icon: "camera" },
    { text: "Galeria de Fotos", icon: "images" },
    { text: "Cancelar" }
    ];

    export default class AvatarChanger extends Component {
    constructor(props) {
    super(props);
    this.state = {};
    }
    showAS() {
    ActionSheet.show(
    {
    options: ActionSheetButtons,
    cancelButtonIndex: 2,
    title: 'Selecione uma opção'
    },
    buttonIndex => {
    this.setState({ clicked: ActionSheetButtons[buttonIndex] });
    }
    )
    }
    render() {
    return (
    <View style={styles.container}>
    <Button transparent style={styles.btn} onPress={ () => this.showAS() }>
    <Icon name="person" style={{ color: '#666', fontSize: 50 }} />
    </Button>
    </View>
    );
    }
    }

    const styles = StyleSheet.create({
    container: { flexDirection: 'row', justifyContent: 'center', marginTop: 20 },
    btn: {
    justifyContent: 'center',
    backgroundColor: '#ccc',
    padding: 20,
    height: 80,
    width: 80,
    borderRadius: 50
    }
    });
    33 changes: 33 additions & 0 deletions register.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    import React, { Component } from 'react';
    import {
    Container,
    Content,
    Form,
    Item,
    Input,
    Label,
    Button,
    Text,
    Picker,
    View
    } from 'native-base';
    import AvatarChanger from '../../Components/avatar-changer';

    export default class Scene extends Component {
    render() {
    return (
    <Container>
    <Content padder>
    <AvatarChanger />
    <Form>
    { /* ... */ }
    </Form>
    <Button block primary style={{ marginTop: 30 }}>
    <Text>Cadastrar</Text>
    </Button>
    </Content>

    </Container>
    );
    }
    }