Domo's hat in snack.expo.io

domohat.jsx

import React, { Component } from "react";
import { Text, View, StyleSheet, Picker, Image } from "react-native";
//import { Constants } from 'expo';

const Hat = ({ type }) => {
  let url = "";
  switch (type) {
    case "cap":
      url =
        "https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fcap.png?1518712935783";
      break;
    case "pirate":
      url =
        "https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fpirate.png?1518712936051";
      break;
    case "harry-potter":
      url =
        "https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fharry-potter.png?1518712935951";
      break;
    case "propeller":
      url =
        "https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fpropeller.png?1518712935957";
      break;
    case "leprecon":
      url =
        "https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fleprecon.png?1518712935850";
      break;
  }
  return <Image source={{ uri: url }} style={styles.hat} />;
};

const Thinker = () => (
  <Image
    source={{
      uri:
        "https://cdn.glitch.com/1fb3273a-81cb-45bc-acbd-555546cb098f%2Fthinker.png?1518712935862"
    }}
    style={styles.thinker}
  />
);

const ThinkerWithHat = ({ hat }) => (
  <View>
    <Thinker />
    <Hat type={hat} />
  </View>
);

const HatSwitcher = ({ currentHat, onHatChanged }) => (
  <View style={styles.hatSwitcher}>
    <Text style={styles.pickerLabel}>Select a hat:</Text>
    <Picker
      selectedValue={currentHat}
      onValueChange={value => onHatChanged(value)}
    >
      <Picker.Item value="cap" label="Cap" />
      <Picker.Item value="pirate" label="Pirate" />
      <Picker.Item value="harry-potter" label="Harry Potter" />
      <Picker.Item value="propeller" label="Propeller" />
      <Picker.Item value="leprecon" label="Leprecon" />
    </Picker>
  </View>
);

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { hat: "cap" };
  }
  render() {
    const onHatChanged = hat => {
      this.setState({ hat });
    };
    return (
      <View style={styles.app}>
        <HatSwitcher currentHat={this.state.hat} onHatChanged={onHatChanged} />
        <ThinkerWithHat hat={this.state.hat} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  app: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    margin: 20
  },
  thinker: {
    height: 200,
    width: 200,
    marginTop: 60
  },
  hat: {
    height: 70,
    width: 80,
    position: "absolute",
    top: 60,
    left: 100
  },
  hatSwitcher: {
    alignSelf: "stretch"
  }
});