react-native prop type for text style

Question

i have component with a simple structure and a <Text> somewhere inside the tree for which i want to pass in a style. Which works perfectly but for the proptypes validation.

The basic setup is not much more than that

export default class Component extends PureComponent {
    render() {
        return (<View><Text style={this.props.style}>Some text</Text></view>);
    }
}

Component.defaultProps = {
    style: null,
};

Component.propTypes = {
    style: ViewPropTypes.style,
};

The problem is that the ViewPropTypes.style does not contain i.e. color key. So providing a style with a color is invalid and produces a warning. I tried to import TextStylePropTypes as i found in https://github.com/facebook/react-native/blob/master/Libraries/Text/TextStylePropTypes.js but it is undefined.

Any advice on what to do?

Crowfoot

Answer 1

For anybody trying to achieve this seems like View.propTypes.style is deprecated while Text.propTypes.style is not.

Crowfoot

For view style prop check import { ViewPropTypes } from 'react-native'; & style: ViewPropTypes.style, use this – Erastian

As of React Native 0.62, Text.propTypes.style is also deprecated. – Counterwork

@EricWiener, have you found the solution for this error in 0.62 version? because i am finding the same error. – Beamends

@EricWiener i have remove all these thing from everywhere but there is no any success. – Beamends

@anshumanburmman Make sure there aren't any occurrences in any of your dependencies. – Counterwork

Answer 2

As the passed style prop is for the Text node, use Text.propTypes.style as shown below...

Component.propTypes = {
    style: Text.propTypes.style
};

Awaken

Answer 3

Text.propTypes.style is no longer available.

React Native library exports its prop types, so interfaces like TextStyle and ImageStyle are the most up-to-date. Therefore, make sure to TextStyle instead.

import { StyleProp, TextStyle } from 'react-native'

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: '#FFF',
  },
})

export const MyComponent = ({ style, title }) => {

  return (
      <Text style={[styles.text]}>
        {title}
      </Text>
  )

}

MyComponent.propTypes = {
    style: StyleProp<TextStyle>;
    title: string;
};

• Reference: https://reactnative.dev/docs/text#style

Truss