Chat with us, powered by LiveChat ​Create an App using expo that does the following | Coms Paper

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 codeInclude Images for each Student/StaffSubmit a link to your expo snackhere 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 ( {this.props.foodname} {this.props.description} ); }}export default class App extends Component { render() { return ( Scroll to see more Food ); }}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 useScrollViewFlex LayoutsScrollView 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. {/* Place any View/Text/Button/Image/ Or complex components inside*/}If we had 10 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 ({this.props.foodname}{this.props.description});}}We can now use this to populate our ScrollViewFlex Layouts are similar to a percentage based layout (examples can be found here can use numerical values to assign “weights” where components take up a portion of their parents. For instanceThis 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.

error: Content is protected !!