Fix YellowBox in 0.62 (#28457)

Author: rickhanlonii

Libraries/YellowBox/UI/YellowBoxImageSource.js

@@ -17,7 +17,6 @@ const SafeAreaView = require('../../Components/SafeAreaView/SafeAreaView');
 const StyleSheet = require('../../StyleSheet/StyleSheet');
 const Text = require('../../Text/Text');
 const View = require('../../Components/View/View');
-const YellowBoxImageSource = require('./YellowBoxImageSource');
 const YellowBoxPressable = require('./YellowBoxPressable');
 const YellowBoxStyle = require('./YellowBoxStyle');
 
@@ -43,15 +42,15 @@ const YellowBoxInspectorHeader = (props: Props): React.Node => {
       <View style={styles.header}>
         <YellowBoxInspectorHeaderButton
           disabled={props.warnings[prevIndex] == null}
-          image={YellowBoxImageSource.chevronLeft}
+          image={require('../../LogBox/UI/LogBoxImages/chevron-left.png')}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.headerTitle}>
           <Text style={styles.headerTitleText}>{titleText}</Text>
         </View>
         <YellowBoxInspectorHeaderButton
           disabled={props.warnings[nextIndex] == null}
-          image={YellowBoxImageSource.chevronRight}
+          image={require('../../LogBox/UI/LogBoxImages/chevron-right.png')}
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
@@ -74,10 +73,7 @@ const YellowBoxInspectorHeaderButton = (
     onPress={props.disabled ? null : props.onPress}
     style={styles.headerButton}>
     {props.disabled ? null : (
-      <Image
-        source={{height: 16, uri: props.image, width: 16}}
-        style={styles.headerButtonImage}
-      />
+      <Image source={props.image} style={styles.headerButtonImage} />
     )}
   </YellowBoxPressable>
 );
@@ -99,6 +95,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   headerButtonImage: {
+    height: 14,
+    width: 8,
     tintColor: YellowBoxStyle.getTextColor(1),
   },
   headerTitle: {

Libraries/YellowBox/UI/YellowBoxInspectorHeader.js

@@ -15,7 +15,6 @@ const Easing = require('../../Animated/src/Easing');
 const React = require('react');
 const StyleSheet = require('../../StyleSheet/StyleSheet');
 const Text = require('../../Text/Text');
-const YellowBoxImageSource = require('./YellowBoxImageSource');
 const YellowBoxPressable = require('./YellowBoxPressable');
 const YellowBoxStyle = require('./YellowBoxStyle');
 
@@ -41,15 +40,13 @@ class YellowBoxInspectorSourceMapStatus extends React.Component<Props, State> {
 
   render(): React.Node {
     let image;
+
     switch (this.props.status) {
-      case 'COMPLETE':
-        image = YellowBoxImageSource.check;
-        break;
       case 'FAILED':
-        image = YellowBoxImageSource.alertTriangle;
+        image = require('../../LogBox/UI/LogBoxImages/alert-triangle.png');
         break;
       case 'PENDING':
-        image = YellowBoxImageSource.loader;
+        image = require('../../LogBox/UI/LogBoxImages/loader.png');
         break;
     }
 
@@ -66,7 +63,7 @@ class YellowBoxInspectorSourceMapStatus extends React.Component<Props, State> {
           this.props.status === 'PENDING' ? styles.pending : null,
         )}>
         <Animated.Image
-          source={{height: 16, uri: image, width: 16}}
+          source={image}
           style={StyleSheet.compose(
             styles.image,
             this.state.rotate == null
@@ -142,6 +139,8 @@ const styles = StyleSheet.create({
     backgroundColor: YellowBoxStyle.getTextColor(0.6),
   },
   image: {
+    height: 14,
+    width: 16,
     marginEnd: 4,
     tintColor: YellowBoxStyle.getBackgroundColor(1),
   },