Как повторно визуализировать указанный c компонент в реагировать родной, используя ссылку?

Question

Я должен очистить или повторно обработать ввод DatePicker, нажав значок очистки / закрытия. Но в DatePicker нет четкой опции. Поэтому я должен заново отобразить указанный c компонент (DatePicker), а не весь пользовательский интерфейс.

import DatePicker from 'react-native-date-ranges';

<View style={styles.row}>
    <Item rounded style={styles.inputWrap}>
        <Input placeholder='Customer Id' keyboardType="numeric" placeholderTextColor='rgba(0,0,0,0.4)' onChangeText={(text) => this.setState({customerCode: text})}/>
    </Item>
    <View style={{flex: .025}}></View>
    <Item rounded style={styles.inputWrap}>
        <Input placeholder='Invoice No' keyboardType="numeric" placeholderTextColor='rgba(0,0,0,0.4)' onChangeText={(text) => this.setState({invoiceNo: text})}/>
    </Item>
    <DatePicker
        style={ {height: 36, borderRadius: 8, borderColor: "#cccccc", borderWidth: 1,} }
        customStyles = { {
            placeholderText:{ fontSize:14 }, // placeHolder style
            headerStyle : { backgroundColor:'#007aff' },            // title container style
            headerMarkTitle : { }, // title mark style 
            headerDateTitle: { }, // title Date style
            contentInput: { fontSize:14 }, //content text container style
            contentText: {fontSize:14}, //after selected text Style
        } } // optional 
        ButtonStyle={{backgroundColor:'#007aff', borderWidth:1, borderRadius:8,marginHorizontal: 20, borderColor:'#fff'}}
        ButtonTextStyle={{color: '#fff',alignSelf:'center',padding:10, fontSize: 16}}
        centerAlign // optional text will align center or not
        allowFontScaling = {false} // optional
        markText={'Select Date'}
        ButtonText='Select'
        placeholder={'Ex: Apr 27, 2018 → Jul 10, 2018'}
        mode={'range'}
        onConfirm={(text) => {this.setState({invoiceDate: text}); console.log('invoiceDate: ', text)}}
        ref = {(ref)=> this.picker = ref}
    />
    <Icon style={{padding: 10, marginLeft: -30, marginTop: -2}} size={20} name={'md-close'} color={'red'} onPress={() => "Clear or rerender the DatePicker Input. There are no clear option in DatePicker. So i have to rerender"}/>
</View>

Я новичок в реагировать на родной. Итак, мне очень нужна твоя помощь

Answer 1

В используемой библиотеке отсутствуют некоторые реквизиты для установки выбранных дат.

Используйте https://github.com/wix/react-native-calendars вместо