I currently have a project in React Native where I need to render the comments to a post. The comments themselves can have replies that I'm recursively rendering.

For the replies, I want it to be similar to Instagram or TikTok's look where the parent comment is not indented but the replies are indented by adding paddingLeft to them. However, in my recursive implementation, the replies to a reply have further padding added to them on top of the initial paddingLeft which resembles Reddit's system where a reply to a reply is further indented. How do I make it so that the replies to a reply are on the same indentation level?

This is what I currently have:

const renderCommentItem = ({ item }) => (
        <View style={{ paddingLeft: item.parent && !item.parent.parent ? 30 : 0 }}>
            <View style={{flexDirection: 'row'}}>
                <Image 
                    source={item.author_profilepic ? {uri: creation_user.profile_pic} : FallbackPhoto}
                    style={stylesmentImage}
                />
                <View style={{paddingLeft: 5}}>
                    <Text style={{fontWeight: 'bold'}}>{item.author_username}</Text>
                    <View style={{flexDirection: 'row'}}>
                        <TouchableOpacity onPress={() => handleUserPress(item.mentioned_username)}>
                            <Text style={{color: 'blue', paddingRight: 5}}>@{item.mentioned_username ? item.mentioned_username : creation_user}</Text>
                        </TouchableOpacity>
                        <Text style={{color: item.parent ? '#bd7979' : 'black'}}>{item.message}</Text>
                    </View>
                </View>
            </View>
            <View style={{flexDirection: 'row', justifyContent: 'space-evenly', padding: 5}}>
                <TouchableOpacity onPress={() => {setReplyingTo(item.id); setMSG(`@${item.author_username} `); inputRef.current.focus();}}>
                    <Text style={{fontSize: 12}}>Reply</Text>
                </TouchableOpacity>
                {item.author_username == user.username && (
                    <View>
                        <TouchableOpacity onPress={() => confirmDeleteComment(item.id)}>
                            <Text style={{fontSize: 12, color: 'red'}}>Delete</Text>
                        </TouchableOpacity>
                    </View>
                )}
            </View>
            {(item.replies.length > 0) && (
                <View>
                    <TouchableOpacity onPress={() => toggleReplies(item.id)} style={{alignSelf: 'center'}}>
                        <Text style={{color: 'gray'}}>{showReplies[item.id] ? "Hide Replies" : "View Replies"}</Text>
                    </TouchableOpacity>
                </View>
            )}
            {showReplies[item.id] && (
                <FlatList 
                    data={item.replies}
                    keyExtractor={(item) => item.id}
                    renderItem={({ item }) => renderCommentItem({item})}
                />
            )}
        </View>
    );

but the relevant line is here:

<View style={{ paddingLeft: item.parent && !item.parent.parent ? 30 : 0 }}>

I'm currently checking if an item (the reply/comment) has a parent of a parent (which means it is a reply to a reply) and if so to add no padding as I want both the replies to a parent comment and the replies to a reply to all be at the same indentation level.

This is what it looks like right now:

but I want the "reply to 2nd reply" comment to be aligned with "reply test" and "2nd reply".