React Native: пользовательский текстовый компонент не отображается в Android (отлично работает на iOS)

Question

У меня есть пользовательский компонент, который представляет собой просто текстовый компонент, который получает различные реквизиты для стилизации.Он отлично работает на iOS, но на Android текст компонента не отображается.

Это код компонента:

import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';

export default class TextLabel extends Component {
    render() {
    const colors = {
        red: '#CF243E',
        lightRed: '#E9BBC0',
        white: '#FFFFFF',
        default: '#434A54'
    }

    const weights = {
        bold: 'Raleway-Bold',
        default: 'Raleway-Regular'
    }

    const styles = StyleSheet.create({
        textStyles: {
            fontFamily: this.props.weight ? weights[this.props.weight] : weights.default,
            fontSize: this.props.size ? this.props.size : 16,
            textTransform: this.props.case ? this.props.case : 'none',
            color: this.props.color ? colors[this.props.color] : colors.default
        },
        additionalStyles: this.props.additionalStyles ? this.props.additionalStyles : {}
    })

    return (
        <Text style={[styles.textStyles, styles.additionalStyles]}>

            {this.props.children}

        </Text>
    );
}
}

Затем я использую его в других компонентах:

import React, { Component } from 'react';
import { View } from 'react-native';

import TextLabel from '../UI/TextLabel';

export default class Resolution extends Component {
render() {
    return (
        <View style={styles.wrapper}>

            <TextLabel
                size={21}
                weight={'bold'}
                additionalStyles={{ marginTop: 30, marginBottom: 10, textAlign: 'center'}}
            >
                Some random text
            </TextLabel>

        </View>
    );
}
}

Но на Android он не рендерит текст, а на iOS он работает отлично.Что может происходить?

Заранее спасибо.

Answer 1

Как выясняется, это связано с использованием свойства textTransform, которое в настоящее время имеет ошибку на Android, которая приводит к исчезновению текста, если вы установите это свойство в стиле компонента.

Решение на данный моментлибо не использовать его, либо использовать string.toUpperCase () в качестве обходного пути.

Подробнее об этой ошибке здесь: https://github.com/facebook/react-native/issues/21966