Is it possible use textinput-effects?

[rochapablo]

Is there any chance to apply these masks using https://github.com/halilb/react-native-textinput-effects?

Here's what I did

onChangeText={(value) => { this.setState({ phone: value }) }}
onBlur={(e) => { this.setState({phone: MaskService.toMask('cel-phone', e.nativeEvent.text)}) }}

Still, if there's something fancy, let me know.

[bhrott]

Hi!

Thanks for reporting and showing me this awesome library that i didn't know about. I release a new version 1.6.0 with compatibility.

Check this: https://github.com/benhurott/react-native-masked-text#customtextinputprops

Thanks a lot =).

[rochapablo]

Wow, very nice!

Thank you for your time.

[rochapablo]

@benhurott, I'm having a little issue that I'm not sure what I'm missing.

When I have like, two mask fields at the same screen, they stay duplicated.

       <TextInputMask
          ref='phone1'
          customTextInput={Hideo}
          customTextInputProps={{
            ...
            placeholder: 'Phone 1'
          }}
          type={'cel-phone'}
          value={this.state.phone}
          onChangeText={(value) => { this.props.setData({phone1: value}) }}
        />

       <TextInputMask
          ref='phone2'
          customTextInput={Hideo}
          customTextInputProps={{
            ...
            placeholder: 'Phone 2'
          }}
          type={'cel-phone'}
          value={this.state.phone}
          onChangeText={(value) => { this.props.setData({phone2: value}) }}
        />

In these case, it will appear two inputs named Phone 2 and when I type, both fields get the same value.

[bhrott]

Hmmm,

I will investigate it as soon as possible.

Loading...

[bhrott]

Try change the value prop on phone2 to this.state.phone2. Change the onChangeText to this.setState({.....})

[rochapablo]

Oops, the value thing was a mistake. Now both have different values. Unfortunately both fields still having the same label (Phone 2 - Phone 2).

I've also tried create a custom field component having only Text and TextInput, but the labels still been repeat.

[rochapablo]

Using placeholder="Enter text to see events" it will work for textinput-effects.

But maybe this could be related to another issue.

I also have a custom input, so I tried to do this passing the customTextInputProps

As my custom input have label property, I set

<TextInputMask
   customTextInput={CustomInput}
   customTextInputProps={{
      ...
      label: 'Phone 2'
   }}
/>

My input component it's something like

<View>
   <Text style={[styles.label, this.props.textStyle]}>{this.props.label}</Text>
   <TextInput {... this.props} placeholder={this.props.placeholder} value={this.props.value} style={style} />
</View>

But for some reason, it prevails always the last label description for both fields.

[bhrott]

Ok,

I'm going to analyze this at night because i'm out of my pc for now =/.

[bhrott]

Noooooow yea!!! I found the fucking problem and it's (perhaps =P) fixed at 1.6.1.

Here is the code:

import React from 'react';
import { StyleSheet, View } from 'react-native';

import { TextInputMask } from 'react-native-masked-text';
import { Kaede } from 'react-native-textinput-effects';

export default class App extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      phone1: '',
      phone2: ''
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TextInputMask
          ref='phone1'
          style={styles.input}
          customTextInput={Kaede}
          customTextInputProps={{
            label: 'Phone 1'
          }}
          type={'cel-phone'}
          value={this.state.phone1}
          onChangeText={(value) => { this.setState({ phone1: value }) }}
        />

        <TextInputMask
          style={styles.input}
          ref='phone2'
          customTextInput={Kaede}
          customTextInputProps={{
            label: 'Phone 2'
          }}
          type={'cel-phone'}
          value={this.state.phone2}
          onChangeText={(value) => { this.setState({ phone2: value }) }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  input: {
    width: '90%',
    marginTop: 10
  }
});

And here is the result:

[rochapablo]

Just perfect.

Thank you very much!

[karanpratapsingh]

Not working with Sae effect :(