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.jsimport { StatusBar } from 'expo-status-bar'; import Login from './src/screens/login'; export default function App() { return ( <Login/> ); }
0 comments:
Post a Comment