CODEWITHSUNDEEP
react-native
Hols
Hols

Reputation: 391

React Native: Custom text component not rendering in Android (works fine on iOS)

I have a custom component that is simply a Text component that receives various props for styling. It works perfectly on iOS but on Android the text of the component doesn't shows.

This is the code of the component:

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>
    );
}
}

I then use it like this in other components:

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>
    );
}
}

But on Android it doesn't renders the text while on iOS it works perfectly. What could be going on?

Thanks in advance.

Upvotes: 1

Views: 1690

Answers (1)

Hols
Hols

Reputation: 391

As it turns out this is due to the use of the textTransform property which currently has a bug on Android that causes the text to disappear if you set this property in a component's style.

The solution for now is to either not use it or use string.toUpperCase() as workaround.

More info on this bug here: https://github.com/facebook/react-native/issues/21966

Upvotes: 1

Related Questions