InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
How do you construct a logic screen in React Native? |
|
Answer» Login functionality is an essential part of any mobile application. We can design a login component which PERFORMS a client-side validation and if it passes then make an API call to the server for authentication of the user. We can create a simple login screen using TextInput, View and Button component. Since Button component RENDERS based on the platform, it will give different look and feel on IOS and Android. To avoid this, we can use TouchableOpacity to create a button component. TouchableOpacity component can be styled as per the requirement. Similar to Button component, TouchOpacity component also provides onPress props where we assign our click listener. Following code explains the implementation of a Login form import React from 'react'; import { View, StyleSheet, Text, TouchableOpacity, TextInput, Alert } from "react-native"; const initialState = { username: '', password: '' }; class LoginForm extends React.Component { constructor(props) { super(props); this.state = initialState; this.handleSubmitForm = this.handleSubmitForm.bind(this); this.handleUsernameChange = this.handleUsernameChange.bind(this); this.handlePasswordChange = this.handlePasswordChange.bind(this); } handleUsernameChange(text) { this.setState({ username: text }); } handlePasswordChange(text) { this.setState({ password: text }); } handleSubmitForm() { const { username, password } = this.state; Alert.alert(`User ${username} is log in with password ${password}`); } render() { return ( <View style={styles.CONTAINER}> <View> <Text style={styles.text}>Username</Text> <TextInput autoCorrect={false} autoCapitalize={'none'} style={styles.input} onChangeText={this.handleUsernameChange}></TextInput> </View> <View> <Text style={styles.text}>Password</Text> <TextInput autoCorrect={false} autoCapitalize={'none'} style={styles.input} secureTextEntry onChangeText={this.handlePasswordChange}></TextInput> </View> <TouchableOpacity style={styles.button} onPress={this.handleSubmitForm}> <Text style={[styles.text, styles.center]}>Login</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { alignSelf: 'stretch', margin: 10, padding: 10, borderColor: '#ccc', borderWidth: 1, borderRadius: 5, backgroundColor: '#fff' }, text: { fontSize: 14, fontWeight: 'bold', color: '#015169', paddingVertical: 5 }, input: { height: 40, borderColor: "#e0e0e0", borderWidth: 1, borderRadius: 5, marginBottom: 15, paddingHorizontal: 10 }, button: { padding: 10, borderColor: '#bee6fe', borderWidth: 1, borderRadius: 5, backgroundColor: '#eaf7fd' }, center: { alignSelf: 'center' } }); export default LoginForm;Username and password TextInputs are controlled component here as its value is getting stored as a state of the component. onPress event of the login button, we validate the user input and if everything looks good then we will make the API call for login. We style this component using Stylesheet. create method. We used normal CSS rules to make this form looks nice. |
|