2 Child views and one have Issue with AlignItems, the style also contains Row direction and wrapped-CodePudding

I have a strange issue with react native when checking on codesandbox.io( Different images but here is a picture of the desired outcome on the simulator(similar to codesandbox) :

Thanks in advance!

CodePudding user response：

Make these changes in your div2 style it will align your content to center

  div2: {
    minWidth: "50%",
    minHeight: "100%",
    width: "50%",
    height: "100%",
    maxWidth: "50%",
    maxHeight: "100%",
    padding: "1%",
    backgroundColor: "#58f",
    justifyContent:'space-evenly'
  },

then give above styling to div2 and change div2 View like this

Edit:

<View style={styles.div2}>
    <Text>Some very very very very very very very very long text</Text>
    <View style={{ flexDirection: 'row', justifyContent: "space-evenly" }}>
        <Image
          accessibilityLabel="React logo"
          source={{ uri: logoUri }}
          resizeMode="contain"
          style={styles.logo}
        />
        <Image
          accessibilityLabel="React logo"
          source={{ uri: logoUri }}
          resizeMode="contain"
          style={styles.logo}
        />
    </View>
    <Text>Some very very very very very very very very long text</Text>
</View>

CodePudding user response：

Can you also add justifyContent: "center" to the styles for div2? That should work.