Search code examples
javascriptreact-nativeplaceholderstring-concatenation

React Native placeholder icon

I have a problem with putting an icon inside placeholder of DatePicker in React Native. In fact, I have a problem to put some text ('Search by date') next to that icon. I tried with ES6 template strings but it doesn't work, or I am missing something... Here is the code:

 <View style={styles.searchDateView}>
      <DatePicker
        defaultDate={this.state.chosenDate}
        minimumDate={new Date(1970, 1, 1)}
        maximumDate={new Date(2050, 12, 31)}
        placeHolderText={<FontAwesome5 name="calendar-alt" size={20} />}
        textStyle={{ color: 'grey' }}
        placeHolderTextStyle={styles.placeHolderTextStyle}
        onDateChange={date => this.onDateChange(date)
      />
    </View>

Inside "placeHolderText" I have an icon, and next to it, I want to put text "Search by date". This way, the icon is showing, but when I try to add text as well (using template strings), it doesn't show the icon, just text, and something like [object, Object].

Solution

  • Welcome to S.O.! :-)

    Is that specific icon mandatory?
    Should something like this be feasible?

        ...
    placeHolderText={<Text>&#128197; Search by date</Text>}
    ...

    This should work (untested...)

    P.S.: There are many other unicode calendar icons out there... i.e.: https://www.alt-codes.net/calendar-symbols.