microsoft · Jul 15, 2021 · Jul 1, 2021 · Jul 2, 2021 · Jul 2, 2021 · Jul 2, 2021
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Integrate June 9 Nightly RN Build",
+  "packageName": "@office-iss/react-native-win32",
+  "email": "ngerlem@microsoft.com",
+  "dependentChangeType": "patch"
+}
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Integrate June 9 Nightly RN Build",
+  "packageName": "@react-native-windows/virtualized-list",
+  "email": "ngerlem@microsoft.com",
+  "dependentChangeType": "patch"
+}
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Integrate June 9 Nightly RN Build",
+  "packageName": "node-rnw-rpc",
+  "email": "ngerlem@microsoft.com",
+  "dependentChangeType": "patch"
+}
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Integrate June 9 Nightly RN Build",
+  "packageName": "react-native-windows",
+  "email": "ngerlem@microsoft.com",
+  "dependentChangeType": "patch"
+}
@@ -5,7 +5,7 @@
   "excludePatterns": [
     "src/js/examples-win32/**"
   ],
-  "baseVersion": "0.0.0-0d32aef3a",
+  "baseVersion": "0.0.0-386dbd943",
   "overrides": [
     {
       "type": "patch",
@@ -24,7 +24,7 @@
       "type": "patch",
       "file": "src/js/components/RNTesterExampleFilter.win32.js",
       "baseFile": "packages/rn-tester/js/components/RNTesterExampleFilter.js",
-      "baseHash": "e0c08f622a9d7d12e2115ec16698c8612572a8e1"
+      "baseHash": "c803794564e567e92c5df76d9d8af65863b7c39d"
     },
     {
       "type": "copy",
@@ -37,7 +37,7 @@
       "type": "derived",
       "file": "src/js/utils/RNTesterList.win32.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.android.js",
-      "baseHash": "94f48ba9b8613e1e04177ea43f4f1d411bc3cd0b"
+      "baseHash": "dd52a34f77f0cbfe08cbd11610cd71edc1ecd96f"
     },
     {
       "type": "patch",

@@ -16,7 +16,7 @@
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.0.0-canary.100",
     "react": "17.0.2",
-    "react-native": "0.0.0-0d32aef3a"
+    "react-native": "0.0.0-386dbd943"
   },
   "devDependencies": {
     "@office-iss/react-native-win32": "^0.0.0-canary.100",
@@ -26,7 +26,7 @@
     "@types/node": "^14.14.22",
     "eslint": "7.12.0",
     "just-scripts": "^1.3.3",
-    "react-native": "0.0.0-0d32aef3a",
+    "react-native": "0.0.0-386dbd943",
     "react-native-platform-override": "^1.4.17",
     "typescript": "^3.8.3"
   }

@@ -106,7 +106,11 @@ class RNTesterExampleFilter extends React.Component<Props, State> {
       <RNTesterThemeContext.Consumer>
         {theme => {
           return (
-            <View style={[styles.searchRow, {backgroundColor: '#F3F8FF'}]}>
+            <View
+              style={[
+                styles.searchRow,
+                {backgroundColor: theme.BackgroundColor},
+              ]}>
               <View style={styles.textInputStyle}>
                 <Image
                   source={require('../assets/search-icon.png')}

@@ -101,9 +101,15 @@ const ComponentExamples: Array<RNTesterExample> = [
     key: 'SectionListExample',
     category: 'ListView',
     module: require('../examples/SectionList/SectionListExample'),
+  },
+  {
+    key: 'SwipeableCardExample',
+    category: 'UI',
+    module: require('../examples/SwipeableCardExample/SwipeableCardExample'),
   }*/,
   {
     key: 'SwitchExample',
+    category: 'UI',
     module: require('../examples/Switch/SwitchExample'),
   },
   {
@@ -161,12 +167,12 @@ const APIExamples: Array<RNTesterExample> = [
   {
     key: 'AnimatedExample',
     category: 'UI',
-    module: require('../examples/Animated/AnimatedExample'),
+    module: require('../examples/Animated/AnimatedExample').default,
   },
   {
     key: 'Animation - GratuitousAnimation',
     category: 'UI',
-    module: require('../examples/Animated/AnimatedGratuitousApp/AnExApp'),
+    module: require('../examples/AnimatedGratuitousApp/AnExApp'),
   },
   {
     key: 'AppearanceExample',

@@ -6,7 +6,7 @@
   "excludePatterns": [
     "**/__snapshots__/**"
   ],
-  "baseVersion": "0.0.0-0d32aef3a",
+  "baseVersion": "0.0.0-386dbd943",
   "overrides": [
     {
       "type": "derived",
@@ -18,7 +18,7 @@
       "type": "derived",
       "file": "src/index.win32.js",
       "baseFile": "index.js",
-      "baseHash": "ef954129bcecf1cba9f786bd2a32327adfb735a5"
+      "baseHash": "c7e80678448dd6d518b6ed47594775207b285610"
     },
     {
       "type": "patch",
@@ -290,7 +290,7 @@
       "baseFile": "Libraries/Inspector/InspectorOverlay.js",
       "baseHash": "b11d03daa2e3f828a350667f543b2cda4fa65dbf"
     },
-     {
+    {
       "type": "copy",
       "file": "src/Libraries/Lists/__tests__/FillRateHelper-test.js",
       "baseFile": "Libraries/Lists/__tests__/FillRateHelper-test.js",

@@ -70,14 +70,14 @@
     "just-scripts": "^1.3.3",
     "prettier": "1.19.1",
     "react": "17.0.2",
-    "react-native": "0.0.0-0d32aef3a",
+    "react-native": "0.0.0-386dbd943",
     "react-native-platform-override": "^1.4.17",
     "react-shallow-renderer": "16.14.1",
     "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "react": "17.0.2",
-    "react-native": "0.0.0-0d32aef3a"
+    "react-native": "0.0.0-386dbd943"
   },
   "beachball": {
     "defaultNpmTag": "canary",

@@ -157,7 +157,8 @@ module.exports = {
     return require('./Libraries/Components/TextInput/InputAccessoryView');
   },
   get KeyboardAvoidingView(): KeyboardAvoidingView {
-    return require('./Libraries/Components/Keyboard/KeyboardAvoidingView');
+    return require('./Libraries/Components/Keyboard/KeyboardAvoidingView')
+      .default;
   },
   get MaskedViewIOS(): MaskedViewIOS {
     warnOnce(

@@ -5,7 +5,7 @@
   "excludePatterns": [
     "src/js/examples-win/**"
   ],
-  "baseVersion": "0.0.0-0d32aef3a",
+  "baseVersion": "0.0.0-386dbd943",
   "overrides": [
     {
       "type": "patch",
@@ -18,7 +18,7 @@
       "type": "patch",
       "file": "src/js/examples/Pressable/PressableExample.windows.js",
       "baseFile": "packages/rn-tester/js/examples/Pressable/PressableExample.js",
-      "baseHash": "cc2fb739dffedec67c3c8032e8f87d4edfd0aede",
+      "baseHash": "57c01049a8acb59a8e90dbc29aad297fb1a4d887",
       "issue": 6240
     },
     {
@@ -45,7 +45,7 @@
       "type": "derived",
       "file": "src/js/utils/RNTesterList.windows.js",
       "baseFile": "packages/rn-tester/js/utils/RNTesterList.android.js",
-      "baseHash": "94f48ba9b8613e1e04177ea43f4f1d411bc3cd0b"
+      "baseHash": "dd52a34f77f0cbfe08cbd11610cd71edc1ecd96f"
     }
   ]
 }
@@ -15,7 +15,7 @@
   },
   "peerDependencies": {
     "react": "17.0.2",
-    "react-native": "0.0.0-0d32aef3a",
+    "react-native": "0.0.0-386dbd943",
     "react-native-windows": "^0.0.0-canary.342"
   },
   "devDependencies": {
@@ -25,7 +25,7 @@
     "@types/node": "^14.14.22",
     "eslint": "7.12.0",
     "just-scripts": "^1.3.3",
-    "react-native": "0.0.0-0d32aef3a",
+    "react-native": "0.0.0-386dbd943",
     "react-native-platform-override": "^1.4.17",
     "react-native-windows": "^0.0.0-canary.342",
     "typescript": "^3.8.3"

@@ -11,6 +11,7 @@
 import * as React from 'react';
 import {
   Animated,
+  Image,
   Pressable,
   StyleSheet,
   Text,
@@ -458,6 +459,10 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     color: 'blue',
   },
+  image: {
+    height: 100,
+    width: 100,
+  },
 });
 
 exports.displayName = (undefined: ?string);
@@ -573,6 +578,22 @@ exports.examples = [
               </Text>
             </View>
           </Pressable>
+
+          <View style={{alignItems: 'center'}}>
+            <Pressable
+              android_ripple={{
+                borderless: false,
+                foreground: true,
+              }}>
+              <Image
+                source={{
+                  uri: 'https://www.facebook.com/ads/pics/successstories.png',
+                }}
+                style={styles.image}
+              />
+            </Pressable>
+            <Text>use foreground</Text>
+          </View>
         </View>
       );
     },

@@ -150,6 +150,11 @@ const ComponentExamples: Array<RNTesterExample> = [
     category: 'ListView',
     module: require('../examples/SectionList/SectionListExample'),
   },
+  {
+    key: 'SwipeableCardExample',
+    category: 'UI',
+    module: require('../examples/SwipeableCardExample/SwipeableCardExample'),
+  },
   {
     key: 'SwitchExample',
     category: 'UI',
@@ -236,12 +241,12 @@ const APIExamples: Array<RNTesterExample> = [
   {
     key: 'AnimatedExample',
     category: 'UI',
-    module: require('../examples/Animated/AnimatedExample'),
+    module: require('../examples/Animated/AnimatedExample').default,
   },
   {
     key: 'Animation - GratuitousAnimation',
     category: 'UI',
-    module: require('../examples/Animated/AnimatedGratuitousApp/AnExApp'),
+    module: require('../examples/AnimatedGratuitousApp/AnExApp'),
   },
   {
     key: 'AppearanceExample',

@@ -3,7 +3,7 @@
     ".flowconfig",
     "src/**"
   ],
-  "baseVersion": "0.0.0-0d32aef3a",
+  "baseVersion": "0.0.0-386dbd943",
   "overrides": [
     {
       "type": "derived",

@@ -25,12 +25,12 @@
     "just-scripts": "^1.3.3",
     "prettier": "1.19.1",
     "react": "17.0.2",
-    "react-native": "0.0.0-0d32aef3a",
+    "react-native": "0.0.0-386dbd943",
     "react-native-platform-override": "^1.4.17"
   },
   "peerDependencies": {
     "react": "17.0.2",
-    "react-native": "0.0.0-0d32aef3a"
+    "react-native": "0.0.0-386dbd943"
   },
   "beachball": {
     "defaultNpmTag": "canary",

@@ -1,11 +1,11 @@
 {
-  "baseVersion": "0.0.0-0d32aef3a",
+  "baseVersion": "0.0.0-386dbd943",
   "overrides": [
     {
       "type": "copy",
       "file": "package.json",
       "baseFile": "repo-config/package.json",
-      "baseHash": "2f3490ab342cd4e7f637a3516589cf1fe2a3a734"
+      "baseHash": "822d8785377375b502d2a1d40128ec9281a38d40"
     }
   ]
 }
@@ -11,10 +11,13 @@
   "dependencies": {
     "@babel/core": "^7.14.0",
     "@babel/generator": "^7.14.0",
+    "@babel/template": "^7.0.0",
+    "@babel/types": "^7.0.0",
     "@react-native-community/eslint-plugin": "*",
     "@reactions/component": "^2.0.2",
     "async": "^2.4.0",
     "babel-eslint": "^10.1.0",
+    "babel-preset-fbjs": "^3.4.0",
     "clang-format": "^1.2.4",
     "connect": "^3.6.5",
     "coveralls": "^3.0.2",
@@ -37,6 +40,7 @@
     "jest": "^26.6.3",
     "jest-junit": "^10.0.0",
     "jscodeshift": "^0.11.0",
+    "metro-transform-plugins": "^0.66.0",
     "mkdirp": "^0.5.1",
     "prettier": "1.19.1",
     "react": "17.0.2",

@@ -10,6 +10,7 @@
 
 import * as React from 'react';
 import {StyleSheet, View, Text} from 'react-native';
+import {RNTesterThemeContext} from './RNTesterTheme';
 
 type Props = $ReadOnly<{|
   children?: React.Node,
@@ -22,9 +23,11 @@ type Props = $ReadOnly<{|
 
 export default function ExamplePage(props: Props): React.Node {
   const description = props.description ?? '';
+  const theme = React.useContext(RNTesterThemeContext);
   return (
     <>
-      <View style={styles.titleView}>
+      <View
+        style={[styles.titleView, {backgroundColor: theme.BackgroundColor}]}>
         <Text style={styles.title}>{props.title}</Text>
         <Text style={styles.description}>{description}</Text>
       </View>
@@ -35,7 +38,6 @@ export default function ExamplePage(props: Props): React.Node {
 
 const styles = StyleSheet.create({
   titleView: {
-    backgroundColor: '#F3F8FF',
     paddingHorizontal: 25,
     paddingTop: 4,
     paddingBottom: 8,