Mobile Development - Lecture 14

 

Mobile Development- Using React Native - Lecture 14

Lecture Outcome:

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

• Introduction to Import and Export in RN

# Lecture14

# REACT NATIVE BASICS PART Three

# WHAT IS EXPORT AND WHAT IS IMPORT

export 
import 

# Types 
regular/genral
default

## EXPORTING 
export const x; or export {x}  (general export)
export default x; (default export)


// you can only default export once in a file 


## Importing

general import   you always wrap it in a {} 
import {Footer} from 'file/path'

default importing you always use it as a varibale

import Login from 'file/path'



## DEFAULT EXPORTING 
 if there is a component with same name as the file/container component you export it via default ( its just sytentical sugar )





 =====================================================


 # PACKAGES (majmooa) === library
   bundle of helper code/s
   e.g. rn-ui-lib, react-native, react, react-native-calendar, react-native-image-picker, react-navigation,

## usuability of packages 
    npmjs.org (node package manager) where all packages reside
    every package will have its documentation


## to know what pacakges you have in ayour app 

        you have to see the package.json for it!

app.json

{
  "expo": {
    "name": "our_first_app",
    "slug": "our_first_app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

login.js src/screen/login.js

import {View, Text} from "react-native";

const Login = () => {

    return (
        <View>
            <Text> hie i am from LOGIN.js new test</Text>
        </View>
    )

}


const Footer = ()=>{
    return (
        <Text>privacy policy saved by erozgaar</Text>
    )
}

export default Login;
export {Footer};