avatar-changer.js

import React, { Component } from 'react';
import {
  View,
  Button,
  Icon,
  ActionSheet,
  Root
} 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 (
      <Root>
        <View style={styles.container}>
          <Button transparent style={styles.btn} onPress={ () => this.showAS() }>
            <Icon name="person" style={{ color: '#666', fontSize: 50 }} />
          </Button>
        </View>
      </Root>
    );
  }
}

const styles = StyleSheet.create({
  container: { flexDirection: 'row', justifyContent: 'center', marginTop: 20 },
  btn: {
    justifyContent: 'center',
    backgroundColor: '#ccc',
    padding: 20,
    height: 80,
    width: 80,
    borderRadius: 50
  }
});

register.js

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>
    );
  }
}