rauchg / slackin

Public Slack organizations made easy
http://rauchg.com/slackin/
MIT License
6.51k stars 1.35k forks source link

need help with TextInput #271

Closed ahmdsdk closed 2 years ago

ahmdsdk commented 7 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
  }
});