How to use secureTextEntry in tcomb-form-native? - validation

Question

I am using tcomb-form-native version 0.6.15 for form validation in react-native Version0.55.4 . When I use password field text should be hidden inside dots. As per docs I used secureTextEntry and set it to true but it is still showing the data like a simple text. I found some suggestion to use temple but i don't know how to use them.
Below is the Form code
const Form = t.form.Form;
t.form.Form.stylesheet.controlLabel.normal = {color: 'white'}
console.log(t.form.Form.options)
const User = t.struct({
name: t.String,
email: t.String,
password: t.String,
});
const formStyles = {
...Form.stylesheet,
formGroup: {
normal: {
marginBottom: 10,
color: 'white'
},
},
controlLabel: {
normal: {
fontSize: 12,
marginBottom: 7,
fontWeight: '600',
},
// the style applied when a validation error occours
error: {
color: 'red',
fontSize: 18,
marginBottom: 7,
fontWeight: '600',
},
},
};
const options = {
order: ['name', 'email', 'password' ],
fields: {
name: {
placeholder: 'Enter Name',
error: 'Name is empty?',
},
email: {
placeholder: 'Enter Email',
error: 'Email is empty?',
},
password: {
placeholder: 'Enter Password',
error: 'Password is empty?',
secureTextEntry: true,
template: (locals) => textbox(locals, )//here i can use template but don't know how
},
},
stylesheet: formStyles,
};
class SignupScreen extends Component{
static navigationOptions = {
header: null
};
constructor(props) {
super(props);
this.state = {
name: '',
email: '',
password: '',
dateOfBirth: '',
};
}
onSubmit(){
const value = this._form.getValue();
console.log('value: ', value);
}
render(){
console.log(this.state.dateOfBirth)
return(
<ImageBackground
source={require('../../images/splash_screen.jpg')}
style={{flex: 1}}
>
<View style={styles.container}>
<View style={{flex:3, justifyContent: 'center', alignItems: 'center'}}>
<Image source={require('../../images/big_transparent_logo.png')} />
<Text style={styles.subtitleStyle}>Get free drink everyday</Text>
</View>
<View style={{ flex: 7, justifyContent: 'flex-start', alignSelf: 'center', alignItems: 'center', width: '80%'}}>
<View style={{width: '100%', paddingHorizontal: 10, paddingVertical: 10 , backgroundColor: 'rgba(0,0,0,0.6)'}}>
<Form ref={c => (this._form = c)} type={User} />
<TouchableOpacity style={{width: '100%', marginVertical: 10}} >
<Label title="BIRTHDAY" />
<DatePicker
style={{width: '100%'}}
date=''
mode="date"
placeholder={this.state.dateOfBirth}
format="DD-MM-YYYY"
maxDate="2002-06-01"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
showIcon={true}
androidMode='spinner'
customStyles={{
dateInput: {
marginLeft: 0,
borderWidth: 0,
textAlign: 'left',
color: 'white',
backgroundColor: '#f2f2f2',
paddingVertical: 0,
height: 30,
color: 'black'
}
// ... You can check the source to find the other keys.
}}
onDateChange={(date) => {this.setState({dateOfBirth: date})}}
/>
</TouchableOpacity >
<Button block bordered light
style={{ width: '47%', borderRadius: 5, alignSelf: 'center', height: 50}}
onPress={this.onSubmit.bind(this)}
>
<Text style={{color: 'white'}}>Sign Up</Text>
</Button>
<Button block light
style={{ width: '47%', borderRadius: 5, alignSelf: 'center', height: 50, backgroundColor: 'rgba(0,0,0,0)',}}
onPress={()=>this.props.navigation.goBack()}
>
<Text style={{color: 'white'}}>Back</Text>
</Button>
</View>
</View>
</View>
</ImageBackground>
);
}
}
export { SignupScreen };

Answer 1

Your form is not connected to the options variable. Call options in your form tag as in below.
<Form ref={c => (this._form = c)}
type={User}
options={options} //set form options
/>
It should work without a template.
password: {
password: true,
secureTextEntry: true}
}