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