CODEWITHSUNDEEP
javascriptnode.jsnpmstylesreact-native
alexmngn
alexmngn

Reputation: 9597

React-native: Override the style of an external component

I downloaded a component from npm which works very well, but I was wondering if there is a way to override the default style of this component? Just like I could override the style if I was using CSS.

The style is currently defined in the index.js file of the component located in node_modules/react-native-floating-label-text-input.

And I would like to do something like this:

<FloatLabelTextInput style={styles.textbox} />

const styles = StyleSheet.create({
  textbox: {
    container: {
      height: 30,
      backgroundColor: 'red'
    }, etc...
   }
});

Where styles.textbox contains all the new styles for the component. I'm using this component as an example but this could apply for any component that comes from npm.

Thanks.

Upvotes: 3

Views: 1982

Answers (1)

Andrea Rosales
Andrea Rosales

Reputation: 1058

Many react-native components are built to receive style props that are in turn used to override default styles to the corresponding inner components. If these are not documented, you can try checking the module's source code to see if it receives any such prop (which does not necesarily have to be called style).

I reviewed this particular module and sadly it does not seem to receive any styling props other than selectionColor which lets you change the color of the label when the input is focused.

To counter your example, I'll mention react-native-floating-labels, which supports labelStyle, inputStyle and style props to override default label, TextInput and container styles respectively.

If the component does not support any styling properties, there is no one true way to override its styles, since any additional props you send will simply be ignored.

Edit - I just realized this question is over a year old but I guess maybe someone will find it useful since it still pops on Google

Upvotes: 1

Related Questions