Mobile Development - Lecture 16

 

Mobile Development- Using React Native - Lecture 16

Lecture Outcome:

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

• MyBook App (Practical)

# Lecture 16

# MyBooks App p#2

  we need to align component in a container!

  VERTICAL (FLEX )

  - JustifyContent ( default === Flex-start(left)) works verticaly
  - AlignItems ( works horizontly )

# WHAT WE NEED

- DASHBOARD ( listing the books and asking for user AUTH(login/signup))
- Login
- Signup
- ForgetPassword
- Profile
- Book Search
- Book Detail Screen
- Favourite this book for me


 ### GENERAL_INFO
- BACKEND (DATA storage and management)
    - SERVER_SIDE
    - FIREBASE( we will be using this as our backend service )




# ============= PART TWO ===============

proTip:  always document your steps

- folder structure basic (v1)
- login UI into code
- make sure it runs on Both OS
- backup of code (ignoring of node_modules)



login.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

function Login() {
  return (
    <View style={styles.container}>

    <View style={styles.upperContainer}>
        <Text style={styles.title}>MyBooks</Text>
    </View>
    <View style={styles.midContainer}></View>
    <View style={styles.bottomContainer}></View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },

  upperContainer:{
    flex:1,
    justifyContent:'flex-end',
    alignItems:'center'
  },
  midContainer:{
    flex:2,
    backgroundColor:'purple'
  },
  bottomContainer:{
    flex:1,
    backgroundColor:'red'
  },

  title:{
      color: 'blue',
      fontWeight: 'bold',
      fontSize:30
  }

});


export default Login;



App.js
import { StatusBar } from 'expo-status-bar';
import Login from './src/screens/login';


export default function App() {
  return (
    <Login/>
  );
}