Cannot change width and height of custom component in React-native?

Question

I have a minimal custom stateless component like this:

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

so I want to import and use it inside another component.

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

Here we have at least 2 inexplicable facts:
1) and more important the width and height of the ViewBox (or every custom component you want to use here) is totally out of control! Assigning numeric size or Flex values has no effect and ViewBox keeps the minimum width/height needed to render the inner Text.

2) Removing the root View (so the ViewBox became the root) ViewBox continue ignoring any size, but now it fills all the space available.... WHY???

All mentioned behavoirs occurs using a custom View (ViewBox in this case), instead if replace it with a normal View all works as expected.
I guess to know enough flex and UI best practices for React-native, but such two cases are not well covered by docs. Hope somebody can surprise me!

Answer 1

Вот как работает flexbox:

1. Контейнеры Flex поставляются с flexShrink: 1 по умолчанию это означает, что они будут сокращены до их содержимого. Добавление flexShrink: 0 меняет это. Вам может понадобиться использовать minWidth а также minHeight с этим вместо этого.

2. Причина, по которой он растягивается, заключается в том, что нечего сказать иначе. Ваш контейнер имеет значение по умолчанию alignItems: 'stretch' перезаписано alignItems: 'center' что сокращает его содержание.

Посмотрите пример кода на Snack: https://snack.expo.io/B1VdUma1M

Есть действительно хорошая чит-таблица flexbox / игровая площадка, которая показывает поведение по адресу: https://yoksel.github.io/flex-cheatsheet/

Имейте в виду, что реализация React Native немного отличается.