TextInput placeholder is not taking fontWeight

Question

I have a TextInput field with placeholder given. On load the placeholder text should be shown as fontWeight:"normal" and when the user enters a value in textbox - the letter gets in fontWeight:"bold" but when the textbox is again empty - the placeholder should revert to fontWeight:"normal". Currently, despite changing and updating the state, the placeholder still takes "fontWeight:bold", once the user types and removes the text from TextInput field.

I tried using placeholderStyle, but this is not for my scenario, I dont want to change the style, only font weight.

  <TextInput
    style={
      !searchText
        ? [styles.autoCompleteInputStyle, styles.placeholderText]
        : [styles.autoCompleteInputStyle, styles.searchedText]
    }
    underlineColorAndroid="transparent"
    placeholder="Search item"
    placeholderTextColor="#505050"
    autocorrect={false}
    value={searchText}
    onChangeText={searchTextValue => this.onChangeText(searchTextValue)}
    clearButtonMode="while-editing"
    returnKeyType="search"
  />

Style for autocompleteTextInput

  autoCompleteInputStyle: {
    flexDirection: "row",
    height: 40,
    borderStyle: "solid",
    borderWidth: 1,
    borderColor: "#cccccc",
    fontSize: 18,
    flex: 1,
    justifyContent: "center",
    marginRight: 14,
    marginBottom: 20,
    paddingLeft: 40,
    color: "#000000",
    borderRadius: 2,
    lineHeight: 21,
    fontFamily: fontStyleFlightCard.fontFamily
  },
    searchedText: {
      fontWeight: "bold"
    },
    placeholderText: {
      fontWeight: "normal"
    },

I expect placeholder should be in normal fontWeight, and when the user inputs text, it should be in bold. Whenever the user types and removes the text from TextInput, placeholder text changes to normal fontWeight.

score 0 · Answer 1 · answered Jun 13 '19 at 20:40

0

I think your issue is !searchText.
Make sure !searchText is true when blank. You might need to make it something like

searchText === '' ? placeholderText : searchedText

answered Jun 13 '19 at 20:40

SHG21

262
2
5

I tried doing the same with the condition, but fontWeight is not getting changed from bold to normal, when there is no text available. – Ruchi Prasad Jun 18 '19 at 10:41

score 0 · Answer 2 · answered Jun 26 '19 at 00:37

0

i've got it working by changing searchTextValue to searchText under onChangeText prop.

you can view an example i've made here.

answered Jun 26 '19 at 00:37

kenmistry

1,934
1
15
24

TextInput placeholder is not taking fontWeight

2 Answers2