Andrew
Andrew

Reputation: 159

How To Change The selectionColor Of All Textinputs in a React App

I have a TextInput in the home menu of my app which I've changed the selectionColor of so the vertical bar is more visible with my colourscheme.

<TextInput
  //various settings
  selectionColor={white}
  //more settings
 />

As the app grows I'm finding myself adding more and more Textinputs and it seems redundant to add a line of code in each Textinput to change it's selection colour to white every time I create a new one so that they all match.

I was wondering if there is any way I can change it so I can set the selectionColor to white in every Textinput without having to manually add a line of code to every Textinput?

Upvotes: 1

Views: 3599

Answers (4)

AN German
AN German

Reputation: 791

for it to work in the whole app you have to add this code in the app.js or wherever

import { TextInput } from 'react-native';

let originalTextInputDefaultProps = TextInput.defaultProps;
TextInput.defaultProps = {
  ...originalTextInputDefaultProps,
  selectionColor: 'white',
};

Upvotes: 0

suga_e
suga_e

Reputation: 59

You can change default props like this. Remember to add these codes before you use any TextInput. Then ALL TextInput's selectionColor will be changed into 'white'.

import { TextInput } from 'react-native';

let originalTextInputDefaultProps = TextInput.defaultProps;
TextInput.defaultProps = {
  ...originalTextInputDefaultProps,
  selectionColor: 'white',
};

Upvotes: 1

Anthony
Anthony

Reputation: 6482

You could make a custom <WhiteTextInput /> component:

const WhiteTextInput = props => {
   return <TextInput {...props} selectionColor={white} />;
};

And then just replace all your <TextInput /> with <WhiteTextInput />;

Upvotes: 1

MattyK14
MattyK14

Reputation: 2126

You could create a custom component for your component.

import { TextInput } from 'react-native';


const AndrewsTextInput = (props) => {
return <TextInput {...props} selectionColor="white" />;
}

export { AndrewsTextInput };

And then import it where you want to use it instead of a normal TextInput.

Upvotes: 0

Related Questions