Geek Answers Handbook

Global color "Text" and text color "TextInput"

I started working with the reaction a few days ago, and after some advanced searching, I could not find answers to 2 (simple?) Questions:

  • How to change color of ALL Text components in native-native? What are the best practices? Creating your own text component with styling and reusing it everywhere?

  • Change the default text color to TextInput . I managed to change the splash screen color as well as the underline color in android, but I can not find anything about how to change the color of the input text (black remains).

  • Is it possible to change the font / text color for everything ? This option seems to be missing.

Thanks for any help and greetings.

+5
source share
2 answers

To get a consistent style for the Text elements (or any other basic element used in the React Native application), our team started creating a library of components for our application that correspond to the styles and style guide name compiled by our development team.

For example, your text component would look like this:

 import React, { PropTypes, Component } from 'react'; import ReactNative from 'react-native'; export default class Text extends Component { getProps() { const { fontSize, fontWeight } = this.props; return { fontSize, fontWeight, }; } render() { return ( <ReactNative.Text {...this.getProps()}>{this.props.children}</ReactNative.Text> ); } } Text.propTypes = { fontSize: PropTypes.oneOf([ 25, 20, 15, ]), fontWeight: PropTypes.oneOf([ 'normal', 'bold', ]), }; Text.defaultProps = { fontSize: 20, fontWeight: 'normal', };

By creating a text component in this way, you can determine which styles are available and show developers a warning if they do not use a valid style with PropTypes definitions.

We also wanted the components in this library to easily reference any file in which you needed them, and therefore we gave the main library file a name with the providesModule comment, which some internal React Native components use.

The main library file looks something like this.

 /** * @providesModule AppNameLibrary */ module.exports = { get Text() { return require('./Text').default; }, };

Then you just need to import it into some component file where you need a custom Text component.

 import { Text } from 'AppNameLibrary';

This is one way to do this. I’m not sure if this is the best way, but it’s a good way that our team started developing the components, so they are developed sequentially in a way that fits our style guide.

As for changing the text color of the TextInput Android component, just setting color: 'orange' as the style, changing the text to orange for me. We are currently using RN 0.28.

+1
source

You have two options:

  • Create your own Text component with the desired default style and reuse it everywhere. (As you mentioned)
  • Create a StyleSheet object and use it in every Text component.

I think No. 1 is the best option. Despite the overhead of replacing all of your <Text/> , it offers better flexibility in the future of your project.

It is not possible to modify all existing Text components unless you create a react-native library branch and change the source code for Text . I do not recommend this method.

0
source

More articles:


All Articles