React Native flexShrink default is 1, but it seems to be 0

Question

According to the Docs, default value for flexShrink in RN is 1. But, given the code below, I have to explicitly set it to 1 to make it work, it seems to be 0 by default. The expected behaviour is that all the inner containers should shrink in width, so that all of them fit in the screen, by default. but it does not behave like that, unless I uncomment the lines. Thanks for your time

<View
      style={{
        flexDirection: "row",
      }}
    >
      <View
        style={{
          backgroundColor: "green",
          width: 100,
          height: 200,
          // flexShrink: 1,
        }}
      />
      <View
        style={{
          backgroundColor: "red",
          width: 100,
          height: 200,
          // flexShrink: 1,
        }}
      />
      <View
        style={{
          backgroundColor: "blue",
          width: 100,
          height: 200,
          // flexShrink: 1,
        }}
      />
      <View
        style={{
          backgroundColor: "maroon",
          width: 130,
          height: 100,
          // flexShrink: 1,
        }}
      />
    </View>

Answer 1

It looks like the the documentation has been corrected by now.

Now it says:

flexShrink accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1)

I found the change log of doc here:

https://github.com/facebook/react-native-website/commit/2007c56fd09262cdb6803a2193a65fe555ef8344

Latest doc here:

https://reactnative.dev/docs/flexbox

Posted on 12/31/2021