In v0.68.0, padding is being applied when using margin style property

[developerantoniosousa]

Description

In v0.68.0, padding is being applied when using margin style property

Version

0.68.0

Output of npx react-native info

System:
OS: macOS 12.3.1
CPU: (8) arm64 Apple M1
Memory: 101.94 MB / 8.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.18.1 - ~/.nvm/versions/node/v14.18.1/bin/node
Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.1/bin/yarn
npm: 6.14.15 - ~/.nvm/versions/node/v14.18.1/bin/npm
Watchman: 2021.11.01.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.2 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK: Not Found
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7784292
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
Languages:
Java: 11.0.14.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.68.0 => 0.68.0
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Steps to reproduce

1. Create a new component
2. Put the following content in it
3. Use this component somewhere
4. Look at the result. Instead of margin being applied, padding is taking place.

Snack, code example, screenshot, or link to a repository

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  StatusBar,
  Platform,
  TouchableOpacity,
} from 'react-native';

export function Home() {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Add</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: Platform.OS === 'ios' ? 70 : 30,
    paddingHorizontal: 30,
    backgroundColor: '#121015',
  },
  button: {
    backgroundColor: '#e67e22',
    padding: 15,
    borderRadius: 7,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 17,
    fontWeight: 'bold',
    marginTop: 20,
  },
});

[developerantoniosousa]

Actually, it was my mistake, I applied the margin to the wrong element. The following code is working well.

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  StatusBar,
  Platform,
  TouchableOpacity,
} from 'react-native';

export function Home() {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      <TouchableOpacity style={styles.button}>
        <Text style={styles.buttonText}>Add</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingVertical: Platform.OS === 'ios' ? 70 : 30,
    paddingHorizontal: 30,
    backgroundColor: '#121015',
  },
  button: {
    backgroundColor: '#e67e22',
    padding: 15,
    borderRadius: 7,
    alignItems: 'center',
    marginTop: 20,
  },
  buttonText: {
    color: '#fff',
    fontSize: 17,
    fontWeight: 'bold',
  },
});