Textfield password alias not working

[jcteague]

We had a password text field defined as so:

const PasswordField = MKTextField
  .textfieldWithFloatingLabel()
  .withPassword(true)
  .withPlaceholder('Password:')
  .withStyle(styles.textfieldWithFloatingLabel)
  .withFloatingLabelFont({fontSize: 10, fontStyle: 'italic', fontWeight: '200'})
  .withTintColor(MKColor.Red)
  .build();

After upgrading to r-n .30 from .24, it was no longer hiding the password characters. We did a workaround by specifying the actual proptype name on textfield secureTextEntry and the characters are now masked.

const PasswordField = MKTextField
  .textfieldWithFloatingLabel()
  //works with correct property name, not with alias
  .withSecureTextEntry(true)
  .withPlaceholder('Password:')
  .withStyle(styles.textfieldWithFloatingLabel)
  .withFloatingLabelFont({fontSize: 10, fontStyle: 'italic', fontWeight: '200'})
  .withTintColor(MKColor.Red)
  .build();

[jcteague]

I just tested to see if the value alias in textfield would work and it is also not working.

I was going to work on PR for this, but I honestly don't think these provide any real value. IMHO just changing the docs would be better. It keeps the builder props inline with r-n props and you don't have to make any changes if they change property names.

[Crash--]

Thank you @jcteague! I'll test it and see if it works well everywhere and then update the readme.

[jcteague]

I should have mentioned I only tested on android

On Aug 19, 2016 6:38 AM, "Quentin Valmori" notifications@github.com wrote:

Thank you @jcteague https://github.com/jcteague! I'll test it and see if it works well everywhere and then update the readme.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xinthink/react-native-material-kit/issues/220#issuecomment-240996155, or mute the thread https://github.com/notifications/unsubscribe-auth/AAElJqxKVcqm_fQQ0NwnE0ly9jB5PGBgks5qhZWhgaJpZM4Jn1rD .

[homanp]

How do I set the password type in MKTextField using JSX? I've tried both password and secureTextEntry as props, none of them seem to work.

Example below: <MKTextField highlightColor={'#00C84B'} placeholder='Password' style={styles.textfieldWithFloatingLabel} floatingLabelEnabled={true} value={this.state.password} secureTextEntry={true} onTextChange={(password) => this.setState({password})} />

[jcteague]

@homanp this worked just fine for me on android. I'm not setup on ios at the moment, so I can't test there.

          <MKTextField
            highlightColor={'#00C84B'}
            placeholder='Password' style={style.textfieldWithFloatingLabel}
            floatingLabelEnabled={true}

            secureTextEntry={true}
            onTextChange={(password) => this.setState({password})} />

[homanp]

Hmm...I'm running RN 0.27. Perhaps that is an issue?

[homanp]

The above code doesn't mask the password field input

[jcteague]

could be, I tested on .30

On Tue, Aug 23, 2016 at 3:11 PM, Ismail Pelaseyed notifications@github.com wrote:

Hmm...I'm running RN 0.27. Perhaps that is an issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/xinthink/react-native-material-kit/issues/220#issuecomment-241860948, or mute the thread https://github.com/notifications/unsubscribe-auth/AAElJilTbFhkLtoqwXrM15o1valWTib4ks5qi1PtgaJpZM4Jn1rD .

[homanp]

The 0.27 states that secureTextEntry should work on both iOS and Android. Any ideas on what could be wrong?

[homanp]

Btw tested with te build() merhod and withSecureTextEntry works just fine

[Crash--]

Yep it doesn't work with JSX. There is a PR (if I remember correctly) to fix it.. I need time to merge it.

Le 23 août 2016 à 22:28, Ismail Pelaseyed notifications@github.com a écrit :

Btw tested with te build() merhod and withSecureTextEntry works just fine

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[vermiculite]

There is a pull request to fix it. It is just a one line fix. If I can do anything to help let me know and I will do it.

[ghost]

I'm still having this issue, not sure if it's something I've done wrong or not but thought I'd provide more information.

I am only running on iOS

RN: 0.31.0 CLI: 0.2.0 RNMK: 0.3.4 iOS Simulator: iPhone 5s iOS Version: 9.3

I've tested with a builder:

const MaterialPasswordField = MKTextField.textfield()
  .withSecureTextEntry(true)
  .withStyle(Style.iOSRequired)
  .withTextInputStyle(Style.inputStyle)
  .withHighlightColor(MKColor.Lime)
  .withTintColor(MKColor.Blue)
  .withPlaceholderTextColor(Colors.placeholderColor)
  .build();

and without:

<MKTextField 
    testID="textfield_password" 
    secureTextEntry={true} 
    returnKeyType="done" 
    autoCapitalize={'none'} 
    autoCorrect={false} 
    onChangeText={(text) => { this.setState({ password: text }); }} 
  />

Sorry if my styling/formatting isn't great.

[damoguyan8844]

use <MKTextField .... password={true} /> works