Mobile Development - Lecture 9

 

 Mobile Development- Using React Native - Lecture 9

Lecture Outcome:

At the end of the lecture, students will be able to know about

• Practical Base work. Run Project. create post.js and make changes to App.js

# Lecture 9
- by default RN ke app from expo starts with a returner ENTRY FUNCTION
- using arrays we can reUtilize the code equalz to the amount of array size
- OBjECT
    -> any data type can be handled here

FACEBOOK
    -> POST
    -> GROUP
    -> message
    -> ads

App.js

import { StyleSheet, ScrollView, View } from 'react-native';
import {Post} from './src/components/post'

export default function App() {

  const myPosts = {
    0: {
      rollNumber: 12,
      present: true,
      name:"sohail",
      img: "https://images.unsplash.com/photo-1626968361222-291e74711449?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
      description: "this is sohail's post data",
    },
    1:{
      rollNumber: 11,
      present: true,
      name: "Zainab",
      img:"https://images.unsplash.com/photo-1630319325392-1f6518d2db52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
      description: "this is Zainabs's post data"
    },
    2:{
      present: true,
      rollNumber: 10,
      name: "Bilal",
      img:"https://images.unsplash.com/photo-1616868560403-b4675d3a545b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=500&q=60",
      description: "this is Bilal's post data"
    }
  }


  return (

      <ScrollView>
    <View style={styles.container}>
      {
        Object.keys(myPosts).map(key=>(
          <Post data={myPosts[key]}/>
        ))
      }

    </View>
      </ScrollView>


  );
}

const styles = StyleSheet.create({
  container: {
    width:'100%',
    height:'100%',
    paddingHorizontal:10,
    backgroundColor: 'purple',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle:{
    fontSize:30,
    color:'white'
  }
});

create post.js at /src/components/post
post.js
import { StyleSheet,
    ImageBackground,
    Text, View, Image } from 'react-native';

export function Post({data}) {

  return (
      <ImageBackground
      source = {
          {uri:data.img}
    }
    style={styles.container}
      >

    <View style={styles.dataContainer}>
        <Text>{data.name}</Text>
        <Text>RollNumber: {data.rollNumber}</Text>       
        <Text>Is Present: {data.present ? '✅' : '❌'}</Text>       
        <Text>{data.description}</Text>   
    </View>
    </ImageBackground>

  );
}

const styles = StyleSheet.create({
  container: {
    width:'100%',
    height:300,
    margin:10,
    marginTop:20,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor: 'white',
  },
  dataContainer: {
    width:'100%',
    height:300,
    margin:10,
    marginTop:20,
    justifyContent:'center',
    alignItems:'center',
    backgroundColor: 'rgba(23,255,255,0.2)',
  },
  textStyle:{
    fontSize:30,
    color:'white'
  }
});