airbridge-react-native-sdk/qa/source/component/CustomView.js

Airbridge SDK for React Native

import React, { Children, isValidElement, cloneElement } from 'react';
import { View } from 'react-native';

// ios 의 경우 accessibilityLabel 이 자식 값에 의해 복사 된다.
// 이 경우를 해결 하기 위해 재귀 호출을 통해 
// accessibilityLabel 이 지정 되어 있지 않은 케이스에 한해 공백을 지정하도록 한다
export function CustomView({ children, style, ...rest }) {
    // 재귀적으로 children을 순회하면서 accessibilityLabel 추가
    const processChildren = (nodes) => {
        return Children.map(nodes, (child) => {
        if (isValidElement(child)) {
            // 현재 요소의 children을 다시 검사 (재귀 호출)
            const processedChildren = processChildren(child.props.children);

            return cloneElement(child, {
                accessibilityLabel: child.props.accessibilityLabel || '',
                children: processedChildren
            });
        }
        return child;
        });
    };

    const modifiedChildren = processChildren(children);

    return (
        <View style={style} {...rest}>
            {modifiedChildren}
        </View>
    );
}