How to create text border radius without wrap view in React Native?

Question

In React-Native, how do I set borderRadius to Text-components?

I've tried using borderRadius in text stylesheet but it not work:

import { formatPhone, mapNameWithLocalContact } from '@chat/common/Utils/ChatUtils';
import ChatFunctions from '@chat/service/ChatFunctions';
import { Colors, Text } from '@momo-platform/component-kits';
import React from 'react';
import { StyleSheet, View, TextStyle } from 'react-native';
import { parseValue } from 'react-native-controlled-mentions';
import { MessageText } from 'react-native-gifted-chat';
// @ts-ignore
import ParsedText from 'react-native-parsed-text';
import { partTypes } from '../menstions';
const textStyle = {
    fontSize: 16,
    lineHeight: 20,
    marginTop: 5,
    marginBottom: 5,
    marginLeft: 10,
    marginRight: 10,
};
const styles = {
    left: StyleSheet.create({
        container: {},
        text: {
            color: 'black',
            ...textStyle,
        },
        link: {
            color: 'black',
            textDecorationLine: 'underline',
        },
        textMention: {
            color: Colors.pink_05_b,
            fontWeight: 'bold',
        },
        mentionMe: isMe =>
            isMe
                ? {
                      color: Colors.white,
                      backgroundColor: Colors.pink_05_b,
                  }
                : {},
    }),
    right: StyleSheet.create({
        container: {},
        text: {
            color: 'white',
            ...textStyle,
        },
        link: {
            color: 'white',
            textDecorationLine: 'underline',
        },
        textMention: {
            color: 'white',
            fontWeight: 'bold',
        },
        mentionMe: () => ({}),
    }),
};
export default class MessageTextCustom extends MessageText {
    constructor() {
        super(...arguments);
    }

    render() {
        const linkStyle = [
            styles[this.props.position].link,
            this.props.linkStyle && this.props.linkStyle[this.props.position],
        ];

        const { parts } = parseValue(this.props.currentMessage.text, partTypes);
        return (
            <View
                style={[
                    styles[this.props.position].container,
                    this.props.containerStyle && this.props.containerStyle[this.props.position],
                ]}
            >
                <ParsedText
                    style={[
                        styles[this.props.position].text,
                        this.props.textStyle && this.props.textStyle[this.props.position],
                        this.props.customTextStyle,
                    ]}
                    parse={[
                        ...this.props.parsePatterns(linkStyle),
                        { type: 'url', style: linkStyle, onPress: this.onUrlPress },
                        { type: 'phone', style: linkStyle, onPress: this.onPhonePress },
                        { type: 'email', style: linkStyle, onPress: this.onEmailPress },
                    ]}
                    childrenProps={{ ...this.props.textProps }}
                >
                    {this.props.isGroup ? (
                        <Text>
                            {parts.map(({ text, partType, data }, index) =>
                                partType ? (
                                    <Text
                                        key={`${index}-${data?.trigger ?? 'pattern'}`}
                                        style={[
                                            styles[this.props.position].textMention,
                                            styles[this.props.position].mentionMe(
                                                formatPhone(data.id) === ChatFunctions.phoneNumber
                                            ),
                                        ]}
                                        onPress={() =>
                                            this.props.onPressMenstion &&
                                            this.props.onPressMenstion(data.id)
                                        }
                                    >
                                        {`${data?.trigger}${mapNameWithLocalContact({
                                            phone: data?.id,
                                            name: data?.name,
                                        })}`}
                                    </Text>
                                ) : (
                                    <Text
                                        key={index}
                                        style={[
                                            styles[this.props.position].text,
                                            this.props.textStyle &&
                                                this.props.textStyle[this.props.position],
                                            this.props.customTextStyle,
                                        ]}
                                    >
                                        {text}
                                    </Text>
                                )
                            )}
                        </Text>
                    ) : (
                        this.props.currentMessage.text
                    )}
                </ParsedText>
            </View>
        );
    }
}

My expected style

I cannot use view to wrap this text because my text component is wrap by other text component

Answer 1

I've worked on it on snack you can check out this link and make sure you wrap those text with a View and use

 flexDirection: 'row';
 alignItems: 'center';

So to stop the View from filling the screen 100% add

 alignSelf: 'start';

Checkout this link to see the code I've written for this

https://snack.expo.dev/@rajibola/spontaneous-beef-jerky

Answer 2

For TextStyle, borderTopRightRadius, borderTopLeftRadius, borderBottomRightRadius, borderBottomLeftRadius don't work. Only borderRadius works. Maybe it's a bug!