Override style not working

[backendbyyuto]

Hello, I did:

import { setCustomTextInput } from "react-native-global-props";
const customTextInputProps = {
  style: {
    //fontFamily: theme.fontFamily.regular,
    //color: theme.colors.text,

    backgroundColor: "#E0E7FF33",
    borderColor: "#E0E7FF",
    borderRadius: 5,
    borderWidth: 1,
    marginVertical: 5,
    paddingVertical: 7,
    paddingHorizontal: 18,
    fontSize: 14,
    fontFamily: theme.fontFamily.regular,
    //color: "red"
  }
};

setCustomTextInput(customTextInputProps);

If I write:

<TextInput value={code} />

The global styles are applied correctly

But if I try to override one property of the style for a particular TextInput, the global styles dissapear, for example writting:

<TextInput 
   value={code} 
   style={{color: "red"}}
/>

It only apply the red color, and the rest of the style is gone. No border, no padding, etc.

What I'm doing wrong?

If I do:

<TextInput 
   value={code} 
   style={[TextInput.defaultProps.style, {color: "red"}]}
/>

It worked as expected... But then... whats the point using this library?

Can you help me please?

[olahat90]

This is normal operation. This package doesn't unite values. The point is that the default values of the given component (in the current case TextInput) can be overwritten globally (so it is unnecessary to overwrite one by one), but it doesn't implement a unique logic.

So if you want to use globally the second version ( {[TextInput.defaultProps.style, {color: "red"}]} ), then you have to create your own CustomTextInput component to achieve style integration. In many cases this package is useful ecxept when you have to write your own component.

[backendbyyuto]

Nop... what I want is to use a general style globally, achieved with:

<TextInput value={code} />

That worked perfectly, borders and padding and the rest of the styles are applied correctly.

But I only want to override the style for some inputs in some specific views (for example change color to red), but having the same borders, padding, and the rest of the "global" styles...

If I do:

<TextInput value={code} style={{color: "red"}} />

The global styles are gone, no border, no padding...

Is this the intended behavior?

[pke]

No, that seems like a bug. It should merge the style props. I can confirm this is not working.

[mrshahzeb7]

@backendbyyuto found any solution ? i have used this in other projects, worked fine ! but now in new project if i give style to components global props does not applies if it is not applying then what is the point of it !

[cinnamonpon]

To anyone experiencing this issue, it seems this only happens when Hermes is enabled. it worked as expected when I disabled Hermes in the project.

[djiworks]

Is there any plan to make it work with Hermes please ?

[maxhaponenko]

Can confirm @cinnamonpon In my case, it happens only with Android app and when Hermes engine is enabled. Any update about it? Is it possible to fix it?

[neowwm]

I experienced same problem... I just wanted to use conditional merge, as before i did, but it didn't work, it only changed to second style, just ignoring first prop list is this only my mistake or bug? can anyone know this issue?

my code example is like below : <Text style={([styles.markingText], isMarkingsVisible && {opacity: 0.5})}>