react-native - React-nativeでカスタムコンポーネントの幅と高さを変更できませんか?

Question

次のような最小限のカスタム ステートレス コンポーネントがあります。

const ViewBox = (props) => (
    <View style={ mainStyle : {backgroundColor: 'beige'} }>
        {props.children}
    </View>
)
export default ViewBox;

そのため、別のコンポーネント内でインポートして使用したいと考えています。

export default class Test extends React.Component {

render() {
    return (
        <View style={styles.containerView} >
            <ViewBox style={styles.mainBox}>
              <Text style={[styles.boxTitle, {color: '#8F468C'}]}>Lorem ipsum...</Text>
            </ViewBox>
        </View>
    );
    }
}

const styles = {    
  containerView: {
    flex: 1,
    marginTop: 50,
    alignItems: 'center',
    backgroundColor: 'brown',
  },
  mainBox: {
    flex: 1,
    width: 250,  //No effect ! ! !
    height: 250  //No effect ! ! !
  },
  boxTitle: {
    backgroundColor: 'pink',
    fontSize: 17,
    marginTop: 20
  }
};

ここで、少なくとも 2 つの不可解な事実があります
。1) さらに重要なのは、ViewBox (またはここで使用するすべてのカスタムコンポーネント) の幅と高さが完全に制御不能になっていることです。数値のサイズまたは Flex 値を割り当てても効果はなく、ViewBox は内側のテキストをレンダリングするために必要な最小の幅/高さを保持します。

2) ルート ビューを削除します (したがって、ViewBox がルートになりました)。ViewBox はサイズを無視し続けますが、利用可能なすべてのスペースを埋めるようになりました.... なぜ ???

上記のすべての動作は、カスタム ビュー (この場合は ViewBox) を使用して発生します。代わりに、通常のビューに置き換えると、すべて期待どおりに機能します。
React-native のフレックスと UI のベスト プラクティスを十分に理解していると思いますが、そのような 2 つのケースはドキュメントで十分にカバーされていません。誰かが私を驚かせてくれることを願っています!