Mobile Development - Lecture 17

 

Mobile Development- Using React Native - Lecture 17

Lecture Outcome:

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

• Introduction to MyBooks App
• login page design (Hint: Successfully Run)

# Lecture 17

## how to take user input? and use it as well
   Text Input
   for text input you are suppposed to use Input Component from ReactNative



## Git vs Github 

    Bill Gates ( microsoft )
    Steve jobs ( apple )
    linus Torvald (linux) free products
        -> Linux (OS)
        -> Git (code helping software)

git => german word (Dheet)

 based on GIT companies got formed. (github,gitlab,bitbucket,MS Azure cloud)
 => git helped them to share/read/save/deploy code online! 

 github

 -> user signup
 -> project at github.com
 -> attach the github project to local project on your machine using GIT (origin remote attachement)
 -> stage your code ( sperate out the files to commit)
 -> commit your code (staged file under a keyname(snapshot))
 -> push your code (send your commit/s to origin remote)



## ASSIGNMENT
    => make a dummy Signup Page 
        -> name, email, password, button

login.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, 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}>

      <Text>Email</Text>

      <TextInput
        placeholder='Enter your email'
        style={styles.input}
        onSubmitEditing={(inputData)=>{
          alert(inputData.nativeEvent.text)
        }}
        keyboardType={"email-address"}
      />

      <Text>Password</Text>

      <TextInput
        placeholder='Enter your Password'
        style={styles.input}
        secureTextEntry={true}
      />

    </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,
    padding:10,
  },
  bottomContainer:{
    flex:1,
    backgroundColor:'red'
  },

  title:{
      color: 'blue',
      fontWeight: 'bold',
      fontSize:30
  },
  input:{
    borderWidth:1,
    height:50
  }

});


export default Login;

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


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