better place for dismiss all button

Summary:
This pr makes a little bit simpler to dismiss all warnings (1 click instead of 2)
Sometimes you don't want to use `YellowBox.ignoreWarnings` to remember.

RNTester sceenshot:

<img width="322" alt="screen shot 2018-05-30 at 09 51 25" src="https://user-images.githubusercontent.com/1488195/40701475-1142506a-63ef-11e8-8fc9-ea1696d9cb65.png">
Or RNTester -> Native Animation Example -> Force JS Stalls (in the end of the list) also cause warning to test.

[GENERAL][ENHANCEMENT][YellowBox] - Move `Dismiss All` yellow box button to another place which makes a little bit simpler to dismiss warnings.
Closes #19501

Differential Revision: D8243823

Pulled By: hramos

fbshipit-source-id: 31887469cddb4adfd7b889ae0c29a3bf41e87b7b

Author: skv-headless

Libraries/ReactNative/YellowBox.js

@@ -247,7 +247,6 @@ const WarningInspector = ({
   warning,
   stacktraceVisible,
   onDismiss,
-  onDismissAll,
   onMinimize,
   toggleStacktrace,
 }) => {
@@ -301,13 +300,6 @@ const WarningInspector = ({
             underlayColor="transparent">
             <Text style={styles.inspectorButtonText}>Dismiss</Text>
           </TouchableHighlight>
-          <TouchableHighlight
-            activeOpacity={0.5}
-            onPress={onDismissAll}
-            style={styles.inspectorButton}
-            underlayColor="transparent">
-            <Text style={styles.inspectorButtonText}>Dismiss All</Text>
-          </TouchableHighlight>
         </View>
       </SafeAreaView>
     </View>
@@ -392,6 +384,8 @@ class YellowBox extends React.Component<
     }
     const ScrollView = require('ScrollView');
     const View = require('View');
+    const Text = require('Text');
+    const TouchableHighlight = require('TouchableHighlight');
 
     const {inspecting, stacktraceVisible} = this.state;
     const inspector =
@@ -401,7 +395,6 @@ class YellowBox extends React.Component<
           warning={inspecting}
           stacktraceVisible={stacktraceVisible}
           onDismiss={() => this.dismissWarning(inspecting)}
-          onDismissAll={() => this.dismissWarning(null)}
           onMinimize={() => this.setState({inspecting: null})}
           toggleStacktrace={() =>
             this.setState({stacktraceVisible: !stacktraceVisible})
@@ -431,6 +424,13 @@ class YellowBox extends React.Component<
     ];
     return (
       <View style={inspector ? styles.fullScreen : listStyle}>
+        {!inspector && (
+          <TouchableHighlight
+            style={styles.dismissAllContainer}
+            onPress={() => this.dismissWarning(null)}>
+            <Text style={styles.dismissAll}>Dismiss All</Text>
+          </TouchableHighlight>
+        )}
         <ScrollView style={listStyle} scrollsToTop={false}>
           {rows}
         </ScrollView>
@@ -535,6 +535,19 @@ const styles = StyleSheet.create({
     marginLeft: 15,
     marginRight: 15,
   },
+  dismissAllContainer: {
+    height: 20,
+    justifyContent: 'center',
+    marginTop: -30,
+    marginRight: 5,
+    backgroundColor: backgroundColor(0.95),
+    alignSelf: 'flex-end',
+    paddingHorizontal: 10,
+    borderRadius: 10,
+  },
+  dismissAll: {
+    color: 'white',
+  },
 });
 
 module.exports = YellowBox;