Customize tcomb-form-native's data filds

Question

I'm trying to customize the Data field of atcomb-form-native module.

I wish the date fields were a classic input field but I still tried different methods, I didn't succeed.

I tried to override the datepicker field style but put the style when opening the picker to insert the date and not around the message.

Instead of 'Tap here to select a date' I would like to insert a phrase at will. How can I do?

Also, how can I customize the date format? I tried following this issue of github but it didn't solve the problem. This is the part of code for formatting the data:

config: {
  format: date => {
    let toBeFormatted = new Date(date);
    return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
  },
  dateFormat: date => {
    let toBeFormatted = new Date(date);
    return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
  },
  timeFormat: date => {
    let toBeFormatted = new Date(date);
    return String('Valida dal' + toBeFormatted.format('DD/MM/YYYY'));
  },
}

Answer 1

Okay. I can give you my code. I had a little trouble finding it, but finally, everything is in the tcomb documentation.

The two important points to answer your question are : "defaultValueText" and "format: (date) => ..."

import React, { Component } from "react";
import Expo from "expo";
import t from "tcomb-form-native";
import moment from 'moment';
import { StyleSheet, Text, Date} from "react-native";
import { Button } from "react-native-elements";

const Form = t.form.Form;

Form.stylesheet.dateValue.normal.borderColor = '#d0d2d3';
Form.stylesheet.dateValue.normal.backgroundColor = '#ffffff';
Form.stylesheet.dateValue.normal.borderRadius= 5,
Form.stylesheet.dateValue.normal.color = 'grey';
Form.stylesheet.dateValue.normal.borderWidth = 1;

const User = t.struct({
  pseudo: t.String,
  birthday: t.Date,
});

const options = {
    order: ['pseudo','birthday'],
    fields: {
    pseudo: {
        placeholder: 'Enter Name',
        error: 'Name is empty?',
      },
      birthday: {
         mode: 'date',
         label: 'birthday',
         config: {
            defaultValueText: 'Enter birthday', // Allows you to format the PlaceHolders !!
            format: (date) => {
               return moment(date).format('DD-MM-YYYY'); // Allows you to format the date !!
            },
          }
      },
    },
};

... ...

export default class SignUp extends Component {
state = {...

  render() {
      return (
        <View style={styles.container}>
          <Form
            type={User}
            ref={c => (this._form = c)} // assign a ref
            options={options} //set form options
          />

          <Button
            title="Sign Up!"
            buttonStyle={styles.button}
            onPress={this.handleSubmit}
          />
        </View>
      );
    }
  }
 } ...