Default AutoCapitalize on MKTextField may not be working

[badnorseman]

I have this function and it works fine with the exception of AutoCapitalize. By default, it should be sentences (capitalize first letter).

I am wondering, if I am the only with this issue.

import { MKTextField } from 'react-native-material-kit'
export const TextfieldWithFloatingLabel = MKTextField.textfieldWithFloatingLabel()
  .withEnablesReturnKeyAutomatically(true)
  .withKeyboardAppearance('light')
  .withReturnKeyType('done')
  .withStyle({
    height: 48,
    marginHorizontal: 16,
    marginTop: 16
  })
  .withFloatingLabelFont({
    color: 'rgba(0,0,0,0.38)',
    fontSize: 14,
    fontWeight: '400'
  })
  .withTintColor('rgba(0,0,0,0.38)')
  .withHighlightColor('#8BC34A')
  .withUnderlineSize(1)
  .build()

[Crash--]

I'm agree with you, we should have the same default behavior as RN textinput. I'm using some MKTextField in my app, with the use of the JSX not the builder, and I've not this particular issue. I think the problem comes from :

 withDefaultValue(defaultValue) {
    const propName = Textfield.propTypes.defaultValue ? 'defaultValue' : 'value';
    this[propName] = defaultValue;
    return this;
  }
    BuiltTextfield.defaultProps = Object.assign({}, Textfield.defaultProps, this.toProps());

[badnorseman]

@Crash-- Please feel free to assign this to @israelidanny, if nobody is working on this.

[badnorseman]

@israelidanny please can you take a look at this. It better to solve it than rewrite our TextInput to JSX.

[xinthink]

I'll look into it, but I'm fully understand what's the problem, do you mean there's no way to set the AutoCapitalize property with Builder?

[xinthink]

Hi @urbanvikingr , I tested the built-in TextInput on Android with RN 0.27.2 (my Xcode doesn't work for now, it says 'it's upgrading'), it looks like there no a default value for the autoCapitalize prop, even though the official documents say sentences is the default value.

The Textfield component is just a wrapper of TextInput, it has the same behavior as the built-in TextInput, so for this moment, you can set the prop yourself, and I'll consider giving it a default value in the future releases.

There's two ways to set the prop,

// using Builder
const TextfieldWithWordsCapital = MKTextField.textfield()
  .withStyle(styles.textfield)
  .withAutoCapitalize("words")
  .build();

// using property, or even mix them up
const Textfield = MKTextField.textfield()
  .withStyle(styles.textfield)
  .build();

<Textfield
  autoCapital="words"
/>

[badnorseman]

Awesome. Ty. I'll test this right now.

@xinthink Don't you mean autoCapitalize?

[badnorseman]

Hi @xinthink, I am still unable to use withAutoCapitalize with builder.

My component look like this:

import { MKTextField } from 'react-native-material-kit'

export const TextfieldWithFloatingLabel = MKTextField.textfieldWithFloatingLabel()
  .withAutoCapitalize('sentences')
  .withEnablesReturnKeyAutomatically(true)
  .withKeyboardAppearance('light')
  .withMaxLength(255)
  .withReturnKeyType('done')
  .withStyle({
    height: 48,
    marginHorizontal: 16,
    marginTop: 16
  })
  .withFloatingLabelFont({
    color: 'rgba(0,0,0,0.38)',
    fontSize: 14,
    fontWeight: '400'
  })
  .withTintColor('rgba(0,0,0,0.38)')
  .withHighlightColor('#8BC34A')
  .withUnderlineSize(1)
  .build()