react-native-md-textinput/examples/FloatingLabel/index.android.js at 8359f45b38499116ac37a493252b82a35fc25b86 · evblurbs/react-native-md-textinput · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/**
 * Sample React Native App
 * that demos the react-native-md-textinput
 */
'use strict';
import React, {Component} from "react";
import {AppRegistry, StyleSheet, Text, ScrollView} from "react-native";

import TextField from 'react-native-md-textinput';

class FloatingLabel extends Component {
  constructor(props: Object) {
    super(props);
    this.inputs = {
      name: '',
      address: '',
      city: '',
      state: '',
      zip: ''
    };
  }
  render() {
    return (
      <ScrollView style={styles.container}>
        <Text style={styles.welcome}>
          React Native Material Design TextInput
        </Text>
        <TextField
          label={'Name'}
          highlightColor={'#00BCD4'}
          onChangeText={(text) => {
            this.inputs.name = text;
          }}
          value={'Jane'}
          dense={true}
        />
        <TextField
          label={'Address'}
          highlightColor={'#FF5722'}
          onChangeText={(text) => {
            this.inputs.address = text;
          }}
          returnKeyType={'next'}
          onSubmitEditing={() => {
            this.refs.cityInput.focus();
          }}
          dense={true}
        />
        <TextField
          label={'City'}
          highlightColor={'#673AB7'}
          onChangeText={(text) => {
            this.inputs.city = text;
          }}
          ref="cityInput"
        />
        <TextField
          label={'State'}
          highlightColor={'#E91E63'}
          onChangeText={(text) => {
            this.inputs.state = text;
          }}
          value={'WA'}
        />
        <TextField
          label={'Zip'}
          highlightColor={'#F44336'}
          onChangeText={(text) => {
            this.inputs.zip = text;
          }}
          onBlur={() => {
            console.log(this.inputs);
          }}
          keyboardType={'numeric'}
        />
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    paddingTop: 50,
    paddingLeft: 16,
    paddingRight: 16
  },
  welcome: {
    fontSize: 18,
    textAlign: 'center',
    margin: 10,
    color: '#333'
  }
});

AppRegistry.registerComponent('FloatingLabel', () => FloatingLabel);