focused label has shadow background

Question

I'm using react-native-floating-label-input package and the label has a background colour if I click on it. Can you help me how I can remove it? I read the documentation and messaged a creator but to no avail.

<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
    <FloatingLabelInput
      label={'label'}
      value={cont}
      onChangeText={value => setCont(value)}
    />
</View>

I tried to add backgroudnColor for labelStyle, but as you can see on the second picture the problem is with background colour behind the text.

   label={'label'}
              value={cont}
              onChangeText={value => setCont(value)}
              labelStyles={{ backgroundColor: '#ad8b8b', padding: 12 }}

Answer 1

If you check the source code and styling here: https://github.com/Cnilton/react-native-floating-label-input/blob/master/src/index.tsx#L361

you can find that the property labelStyles is merged with global style.

Try to provide labelStyles with the same background colour value as your input.

<View style={{ padding: 50, flex: 1, backgroundColor: '#fff' }}>
    <FloatingLabelInput
      label={'label'}
      value={cont}
      labelStyles={backgroundColor: '#fff'}
      onChangeText={value => setCont(value)}
    />
</View>