How do I clear placeholder text when using a ref in React Native?

Question

I have a TextInput component gets reused in a few different places:

export default class SomeTextInput extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let fontWeight = this.props.fontWeight ? this.props.fontWeight : 'Light';
        let fontName = this.props.fontName ? this.props.fontName : 'Montserrat';
        let fontString = createFontString(fontName, fontWeight);
        let applyFontFamily = { fontFamily: fontString };
        let style = this.props.style.constructor === Array ? this.props.style : [this.props.style];
        return (
            <TextInput
                ref={(ref) => {
                    this.textInput = ref
                }}
                {...this.props}
                style={[applyFontFamily, ...style]}
                onFocus={() => {
                    this.clearText();
                    console.log('show me this.textInput', this.textInput.props.placeholder)

                }}
            />
        )
    }
    clearText() {
        this.textInput.clear();
        console.log('is this being reached???')
    }
    focus() {
        this.textInput.focus();
    }
    blur() {
        this.textInput.blur();
    }
}

I've also tried using clearTextOnFocus. I believe the best way to do this would be to change the placeholder to '', but I'm not sure how given that the placeholder text is taken from a prop that's been passed down.

edit: I'm going to add the code that @ravibagul91 suggested

export default class OVTextInput extends Component {
    constructor(props) {
        super(props);
        // this.state = {
        //     placeholder: props.placeholder
        // }
    }
    render() {
        let fontWeight = this.props.fontWeight ? this.props.fontWeight : 'Light';
        let fontName = this.props.fontName ? this.props.fontName : 'Montserrat';
        let fontString = createFontString(fontName, fontWeight);
        let applyFontFamily = { fontFamily: fontString };
        let style = this.props.style.constructor === Array ? this.props.style : [this.props.style];
        return (
            <TextInput
                ref={(ref) => {
                    this.textInput = ref
                }}
                {...this.props}
                style={[applyFontFamily, ...style]}
                onFocus={() => {
                    // this.setState({ placeholder: "" });
                    this.clearText();

                }}
            />
        )
    }

    clearText = () => {
        console.log(this.textInput)
        console.log('is this being reached???', this.textInput.value);
        console.log('is this being reached???', this.textInput.placeholder);
        this.textInput.placeholder = "";
        this.textInput.value = "";

    }
    //   focus = () => {
    //         this.textInput.focus();
    //     }
    //     blur = () => {
    //         this.textInput.blur();
    //     }
    focus() {
        this.textInput.focus();
    }
    blur() {
        this.textInput.blur();
    }
};

Answer 1

What you are currently doing is erasing the value of the text. Your Textinput looks like a prop for receiving and using values. Textinput does not currently have the ability to clear placeholders. If you make a proposal, you can use the status values to solve it.

export default class SomeTextInput extends Component {
    constructor(props) {
        super(props);
        this.state={
           placeholder: props.placeholder
        }
    }
....
            <TextInput
                ref={(ref) => {
                    this.textInput = ref
                }}
                placeholder={this.state.placeholder}
                {...this.props}
                style={[applyFontFamily, ...style]}
                onFocus={() => {
                    this.setState({ placeholder : "" });
                    console.log('show me placeholder', this.state.placeholder)

                }}
            />