Instantly share code, notes, and snippets.

Embed
What would you like to do?
Domo's hat in snack.expo.io
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"
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment