Shadow Issue with Colored React Native Elements in TextInput Label

[IsmailParacha]

Current behaviour

I'm using react-native-paper for TextInput components. When I pass React Native elements as the label and apply color to them, I see a shadow/replica of the elements behind them. However, if I don't apply any color, the elements display properly.

My requirement is to show an asterisk (*) in the field label, where the asterisk should be red and the label text should be black.

Preview

https://github.com/callstack/react-native-paper/assets/84890110/21813ff8-f38e-4779-8d05-4d5f2d9d6c45

code

import React, {useState} from 'react';
import {TextInput} from 'react-native-paper';
import {StyleSheet, View, Button, Text} from 'react-native';
const Home = () => {
const [surname, setSurname] = useState('');
   <View style={styles.container}>
      <TextInput
        label={
          <>
            <Text style={{fontSize: 20, color: 'red'}}>{'Surname'}</Text>
            <Text style={{fontSize: 20, color: 'red'}}> *</Text>
          </>
        }
        mode="outlined"
        onChangeText={text => {
          setSurname(text);
        }}
        value={surname}
        placeholder="Enter Surname"
        style={{width: '80%', height: 50}}
      />
      <TextInput
        label={
          <>
            <Text style={{fontSize: 20}}>{'Forename'}</Text>
            <Text style={{fontSize: 20}}> *</Text>
          </>
        }
        mode="outlined"
        onChangeText={text => {
          setSurname(text);
        }}
        value={surname}
        placeholder="Enter Forename"
        style={{width: '80%', height: 50}}
      />
 </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Home;

Your Environment

software	version
ios	17
android	11
react-native	0.73.4
react-native-paper	^5.12.3

[seb-zabielski]

Hey, Can you try to use the label in a different way, without the Fragment?

For example something like this:

label={
  <Text style={{ fontSize: 20, color: 'red' }}>
    Surname <Text style={{ fontSize: 20, color: 'red' }}>*</Text>
  </Text>
}

[IsmailParacha]

@seb-zabielski, i have tried to put a text component in the label instead of using fragment but got the same issue as you can see

[seb-zabielski]

As you can see on the screenshot, after removing Fragment problem was solved for me. If the bug still exists to, it means that something else is affecting it. Do you have any additional theme styles, custom fonts etc? On what device (what is the screen resolution) do you have this problem (maybe it occurs on a particular resolution)?

[IsmailParacha]

import React, {useState} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {TextInput} from 'react-native-paper';

const Home = () => {
  const [surname, setSurname] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        label={
          <Text style={{fontSize: 20, color: 'red'}}>
            Surname <Text style={{fontSize: 20, color: 'red'}}>*</Text>
          </Text>
        }
        mode="outlined"
        onChangeText={text => {
          setSurname(text);
        }}
        value={surname}
        placeholder="Enter Surname"
        style={{width: '80%', height: 50}}
      />
      <TextInput
        label={
          <Text style={{fontSize: 20, color: 'grey'}}>
            Forename <Text style={{fontSize: 20, color: 'red'}}>*</Text>
          </Text>
        }
        mode="outlined"
        onChangeText={text => {
          setSurname(text);
        }}
        value={surname}
        placeholder="Enter Forename"
        style={{width: '80%', height: 50}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default Home;

if you change the color of both texts then you will be able to see the shadow like when I put a red color for both so not able to see but when I insert different colors then the shadow becomes visible try to change the color and font size

[seb-zabielski]

@IsmailParacha I've created PR with the fix. ;)