feat: add ability to change TextInput fontSize and height (#1020)

example/src/Examples/TextInputExample.js

@@ -18,6 +18,17 @@ type State = {
  text: string,
  name: string,
  outlinedText: string,
+ largeText: string,
+ outlinedLargeText: string,
+ nameNoPadding: string,
+ flatDenseText: string,
+ flatDense: string,
+ outlinedDenseText: string,
+ outlinedDense: string,
+ flatMultiline: string,
+ flatTextArea: string,
+ outlinedMultiline: string,
+ outlinedTextArea: string,
 };
 
 class TextInputExample extends React.Component<Props, State> {
@@ -27,9 +38,20 @@ class TextInputExample extends React.Component<Props, State> {
  text: '',
  name: '',
  outlinedText: '',
+ largeText: '',
+ outlinedLargeText: '',
+ nameNoPadding: '',
+ flatDenseText: '',
+ flatDense: '',
+ outlinedDenseText: '',
+ outlinedDense: '',
+ flatMultiline: '',
+ flatTextArea: '',
+ outlinedMultiline: '',
+ outlinedTextArea: '',
  };
 
- _isUsernameValid = () => /^[a-zA-Z]*$/.test(this.state.name);
+ _isUsernameValid = (name: string) => /^[a-zA-Z]*$/.test(name);
 
  render() {
  const {
@@ -56,6 +78,44 @@ class TextInputExample extends React.Component<Props, State> {
  value={this.state.text}
  onChangeText={text => this.setState({ text })}
  />
+ <TextInput
+ style={[styles.inputContainerStyle, styles.fontSize]}
+ label="Flat input large font"
+ placeholder="Type something"
+ value={this.state.largeText}
+ onChangeText={largeText => this.setState({ largeText })}
+ />
+ <TextInput
+ style={styles.inputContainerStyle}
+ dense
+ label="Dense flat input"
+ placeholder="Type something"
+ value={this.state.flatDenseText}
+ onChangeText={flatDenseText => this.setState({ flatDenseText })}
+ />
+ <TextInput
+ style={styles.inputContainerStyle}
+ dense
+ placeholder="Dense flat input without label"
+ value={this.state.flatDense}
+ onChangeText={flatDense => this.setState({ flatDense })}
+ />
+ <TextInput
+ style={styles.inputContainerStyle}
+ label="Flat input multiline"
+ multiline
+ placeholder="Type something"
+ value={this.state.flatMultiline}
+ onChangeText={flatMultiline => this.setState({ flatMultiline })}
+ />
+ <TextInput
+ style={[styles.inputContainerStyle, styles.textArea]}
+ label="Flat input text area"
+ multiline
+ placeholder="Type something"
+ value={this.state.flatTextArea}
+ onChangeText={flatTextArea => this.setState({ flatTextArea })}
+ />
  <TextInput
  disabled
  style={styles.inputContainerStyle}
@@ -69,6 +129,57 @@ class TextInputExample extends React.Component<Props, State> {
  value={this.state.outlinedText}
  onChangeText={outlinedText => this.setState({ outlinedText })}
  />
+ <TextInput
+ mode="outlined"
+ style={[styles.inputContainerStyle, styles.fontSize]}
+ label="Outlined large font"
+ placeholder="Type something"
+ value={this.state.outlinedLargeText}
+ onChangeText={outlinedLargeText =>
+ this.setState({ outlinedLargeText })
+ }
+ />
+ <TextInput
+ mode="outlined"
+ style={styles.inputContainerStyle}
+ dense
+ label="Dense outlined input"
+ placeholder="Type something"
+ value={this.state.outlinedDenseText}
+ onChangeText={outlinedDenseText =>
+ this.setState({ outlinedDenseText })
+ }
+ />
+ <TextInput
+ mode="outlined"
+ style={styles.inputContainerStyle}
+ dense
+ placeholder="Dense outlined input without label"
+ value={this.state.outlinedDense}
+ onChangeText={outlinedDense => this.setState({ outlinedDense })}
+ />
+ <TextInput
+ mode="outlined"
+ style={styles.inputContainerStyle}
+ label="Outlined input multiline"
+ multiline
+ placeholder="Type something"
+ value={this.state.outlinedMultiline}
+ onChangeText={outlinedMultiline =>
+ this.setState({ outlinedMultiline })
+ }
+ />
+ <TextInput
+ mode="outlined"
+ style={[styles.inputContainerStyle, styles.textArea]}
+ label="Outlined input text area"
+ multiline
+ placeholder="Type something"
+ value={this.state.outlinedTextArea}
+ onChangeText={outlinedTextArea =>
+ this.setState({ outlinedTextArea })
+ }
+ />
  <TextInput
  mode="outlined"
  disabled
@@ -80,10 +191,13 @@ class TextInputExample extends React.Component<Props, State> {
  label="Input with helper text"
  placeholder="Enter username, only letters"
  value={this.state.name}
- error={!this._isUsernameValid()}
+ error={!this._isUsernameValid(this.state.name)}
  onChangeText={name => this.setState({ name })}
  />
- <HelperText type="error" visible={!this._isUsernameValid()}>
+ <HelperText
+ type="error"
+ visible={!this._isUsernameValid(this.state.name)}
+ >
  Error: Only letters are allowed
  </HelperText>
  </View>
@@ -93,14 +207,14 @@ class TextInputExample extends React.Component<Props, State> {
  style={{ backgroundColor: 'transparent' }}
  padding="none"
  placeholder="Enter username, only letters"
- value={this.state.name}
- error={!this._isUsernameValid()}
- onChangeText={name => this.setState({ name })}
+ value={this.state.nameNoPadding}
+ error={!this._isUsernameValid(this.state.nameNoPadding)}
+ onChangeText={nameNoPadding => this.setState({ nameNoPadding })}
  />
  <HelperText
  type="error"
  padding="none"
- visible={!this._isUsernameValid()}
+ visible={!this._isUsernameValid(this.state.nameNoPadding)}
  >
  Error: Only letters are allowed
  </HelperText>
@@ -122,6 +236,12 @@ const styles = StyleSheet.create({
  inputContainerStyle: {
  margin: 8,
  },
+ fontSize: {
+ fontSize: 24,
+ },
+ textArea: {
+ height: 80,
+ },
 });
 
 export default withTheme(TextInputExample);

src/components/TextInput/TextInput.js

@@ -56,6 +56,14 @@ export type TextInputProps = {|
  * Whether to apply padding to label and input.
  */
  padding?: 'none' | 'normal',
+ /**
+ * Sets min height with densed layout. For `TextInput` in `flat` mode
+ * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.
+ * For `TextInput` in `outlined` mode
+ * height is `56dp` or in dense layout - `40dp` regardless of label.
+ * When you apply `heigh` prop in style the `dense` prop affects only `paddingVertical` inside `TextInput`
+ */
+ dense?: boolean,
  /**
  * Whether the input can have multiple lines.
  */
@@ -95,6 +103,11 @@ export type TextInputProps = {|
  * Value of the text input.
  */
  value?: string,
+ /**
+ * Pass `fontSize` prop to modify the font size inside `TextInput`.
+ * Pass `height` prop to set `TextInput` height. When `height` is passed,
+ * `dense` prop will affect only input's `paddingVertical`.
+ */
  style?: any,
  /**
  * @optional
@@ -153,6 +166,7 @@ class TextInput extends React.Component<TextInputProps, State> {
  static defaultProps = {
  mode: 'flat',
  padding: 'normal',
+ dense: false,
  disabled: false,
  error: false,
  multiline: false,
@@ -178,6 +192,7 @@ class TextInput extends React.Component<TextInputProps, State> {
  labelLayout: {
  measured: false,
  width: 0,
+ height: 0,
  },
  };
 
@@ -333,6 +348,7 @@ class TextInput extends React.Component<TextInputProps, State> {
  this.setState({
  labelLayout: {
  width: e.nativeEvent.layout.width,
+ height: e.nativeEvent.layout.height,
  measured: true,
  },
  });