create an app using expo that does the following
Create an App using expo that does the following
– Displays 5 Marymount Students or Staff (you can find then on google Marymount university) try to choose from the IT department professors
– Displays their name, title(student/faculty/staff), and email
– Must use a Custom Component called “Person”
– Must use at least 1 piece of styling code
Include Images for each Student/Staff
Submit a link to your expo snack
here is his code example :
import React, { Component } from ‘react’;
import { Text, View, StyleSheet,ScrollView,Image } from ‘react-native’;
import { Constants } from ‘expo’;
const assets = {
egg: require(‘./images/egg.jpg’),
bagel: require(‘./images/bagel.jpg’),
taco: require(‘./images/taco.jpg’),
padthai: require(‘./images/pad-thai.jpg’),
pizza: require(‘./images/pizza.jpg’),
rendang: require(‘./images/rendang.jpg’),
icecream: require(‘./images/icecream.jpg’),
muffin: require(‘./images/muffin.jpg’),
lavacake: require(‘./images/lavacake.jpg’),
steak: require(‘./images/steak.jpg’),
chickenwings: require(‘./images/chickenwings.jpg’),
};
class FoodItem extends Component {
render() {
return (
<View style={styles.container} >
<Image style={styles.icon} source={assets[this.props.foodname]}/>
<Text style={styles.name}>{this.props.foodname}</Text>
<Text style={styles.description}>{this.props.description}</Text>
</View>
);
}
}
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<ScrollView>
<Text style={{fontSize:20}}>Scroll to see more Food</Text>
<FoodItem foodname=”egg” description=”A very fine collection of eggs” />
<FoodItem foodname=”taco” description=”Wonderful crunchy taco” />
<FoodItem foodname=”padthai” description=”Spicy and Sweet!” />
<FoodItem foodname=”pizza” description=”Food of the Gods!” />
<FoodItem foodname=”rendang” description=”Spicy beef curry from Indonesian” />
<FoodItem foodname=”icecream” description=”We all scream for icecream” />
<FoodItem foodname=”chickenwings” description=”Perfect for the ball game” />
<FoodItem foodname=”steak” description=”Medium Rare opening soon!” />
<FoodItem foodname=”lavacake” description=”Chocolate center soft cake” />
<FoodItem foodname=”muffin” description=”Blueberries are healthy right?” />
<FoodItem foodname=”bagel” description=”Round bread boiled and baked”/>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: ‘row’,
alignItems: ‘center’,
backgroundColor: ‘#ffffff’,
justifyContent: ‘space-between’,
padding: 10,
height:120,
margin: 2,
borderWidth: 1,
},
icon:{
flex:.2,
resizeMode:”contain”
},
name:{
marginLeft:5,
flex:.4,
fontSize:30,
fontWeight:’bold’,
},
description:{
fontSize:20,
flex:.4,
fontStyle:’italic’,
}
});
Here is something he gave us might help
In this code we’ll be looking at how to better display data on screen.
In this code you should learn how to use
- ScrollView
- Flex Layouts
ScrollView simply wraps any of it’s children in a scrollable frame. If all the children fit on one screen, no scroll behavior will be apparent but if it takes multiple screens, scroll gestures will work.
<ScrollView>
{/* Place any View/Text/Button/Image/ Or complex components inside*/}
</ScrollView>
If we had 10 <Image> Tags inside of the scroll view we would have 10 images. If they were large enough we would scroll.
Often you want more than one Component type in the List. For this we will make a Complex Component. In the example above we make a FoodItem Component that contains an Image and two Text components.
class FoodItem extends Component {
render() {
return (
<View style={styles.container} >
<Image style={styles.icon} source={assets[this.props.foodname]}/>
<Text style={styles.name}>{this.props.foodname}</Text>
<Text style={styles.description}>{this.props.description}</Text>
</View>
);
}
}
We can now use this to populate our ScrollView
<ScrollView>
<FoodItem />
<FoodItem />
</ScrollView>
Flex Layouts are similar to a percentage based layout (examples can be found here https://facebook.github.io/react-native/docs/flexbox.html)
You can use numerical values to assign “weights” where components take up a portion of their parents. For instance
<Parent style={{flex: 1, flexDirection: ‘row’}} >
<Child style={{flex: .5}} />
<Child style={{flex: .5}} />
</Parent>
This would make the children each take up 50% of their parent’s space in a horizontal direction (row). This is dictated by “flexDirection”
If you examine the FoodItem Styles. You will notice the 3 components take up 20%,40% and 40% of the space. Try changing these to fit your system.
