Closed ahmdsdk closed 2 years ago
I can't seem to get the Input text to show properly. It's showing only a couple of letters and in the middle of the box. And also how can I adjust the height of a button? Couldn't find it in the props.
import Exponent from 'exponent'; import React from 'react'; import { StyleSheet, Text, View, Image, TextInput, TouchableOpacity, StatusBar, Button, } from 'react-native'; export default class LoginForm extends React.Component { _handlePress(event) { console.log('Pressed!'); var username = this.state.username; var password = this.state.password; } render() { return ( <View style = {styles.container}> <StatusBar barStyle="light-content" /> <TextInput ref="username" placeholder="Username" returnKeyType="next" clearButtonMode= 'while-editing' onChangeText={(text) => { this.setState({username:text}); }} onSubmitEditing={() => { this.refs.pw.focus(); }} keyboardType="email-address" autoCapitalize="none" autoCorrect={false} style={styles.input} /> <TextInput ref="pw" placeholder="Password" returnKeyType="go" secureTextEntry={true} clearButtonMode= 'while-editing' style={styles.input} onChangeText={(text) => { this.setState({password:text}); }} /> <TouchableOpacity style={styles.buttonContainer}> <Button ContainerStyle={styles.buttonContainer} style={styles.buttonText} onPress={this._handlePress.bind(this)} title="LOGIN" color="#000"/> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { padding: 20 }, input: { textAlign: 'left', height: 40, width: 200, backgroundColor: '#444', marginBottom: 20, color: '#FFF', paddingHorizontal: 125 }, buttonContainer: { backgroundColor: '#FFF', paddingVertical: 15, marginBottom: 20 }, buttonText: { textAlign: 'center', color: '#000', fontSize: 20, fontWeight: '700', padding: 10, height: 20 } });
I can't seem to get the Input text to show properly. It's showing only a couple of letters and in the middle of the box. And also how can I adjust the height of a button? Couldn't find it in the props.