From bedfd24bfa9e1e7cbb69cd60e250162b2fb8fd7e Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sun, 3 Jun 2018 16:17:04 +0200
Subject: [PATCH] refactor: remove extra view wrapper from portal

---
 src/components/Portal/PortalHost.js           |  39 +-
 .../__snapshots__/Portal.test.js.snap         |  18 +-
 .../__snapshots__/Snackbar.test.js.snap       | 816 +++++++++---------
 3 files changed, 400 insertions(+), 473 deletions(-)

diff --git a/src/components/Portal/PortalHost.js b/src/components/Portal/PortalHost.js
index 479859a..8b4f4f0 100644
--- a/src/components/Portal/PortalHost.js
+++ b/src/components/Portal/PortalHost.js
@@ -1,13 +1,11 @@
 /* @flow */
 
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
 import PortalManager from './PortalManager';
 import createReactContext, { type Context } from 'create-react-context';
 
 type Props = {
   children: React.Node,
-  style?: any,
 };
 
 type Operation =
@@ -95,33 +93,20 @@ export default class PortalHost extends React.Component<Props> {
 
   render() {
     return (
-      <View
-        pointerEvents="box-none"
-        {...this.props}
-        style={[styles.container, this.props.style]}
+      <PortalContext.Provider
+        value={{
+          mount: this._mount,
+          update: this._update,
+          unmount: this._unmount,
+        }}
       >
-        <PortalContext.Provider
-          value={{
-            mount: this._mount,
-            update: this._update,
-            unmount: this._unmount,
+        {this.props.children}
+        <PortalManager
+          ref={c => {
+            this._manager = c;
           }}
-        >
-          {this.props.children}
-      
-          <PortalManager
-            ref={c => {
-              this._manager = c;
-            }}
-          />
-        </PortalContext.Provider>
-      </View>
+        />
+      </PortalContext.Provider>
     );
   }
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
diff --git a/src/components/__tests__/__snapshots__/Portal.test.js.snap b/src/components/__tests__/__snapshots__/Portal.test.js.snap
index 6970257..90ffcd0 100644
--- a/src/components/__tests__/__snapshots__/Portal.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Portal.test.js.snap
@@ -1,24 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders portal with siblings 1`] = `
-<View
-  pointerEvents="box-none"
-  style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      undefined,
-    ]
-  }
->
+Array [
   <Text
     accessible={true}
     allowFontScaling={true}
     ellipsizeMode="tail"
   >
     Outside content
-  </Text>
+  </Text>,
   <View
     pointerEvents="box-none"
     style={
@@ -38,6 +28,6 @@ exports[`renders portal with siblings 1`] = `
     >
       Portal content
     </Text>
-  </View>
-</View>
+  </View>,
+]
 `;
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
index 60f8836..d4e4857 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap
@@ -4,119 +4,107 @@ exports[`renders not visible snackbar with content 1`] = `
 <View
   pointerEvents="box-none"
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    Object {
+      "bottom": 0,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
   }
 >
-  <View
-    pointerEvents="box-none"
+  <RCTSafeAreaView
     style={
       Object {
         "bottom": 0,
-        "left": 0,
         "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "width": "100%",
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
         Object {
-          "bottom": 0,
-          "position": "absolute",
-          "width": "100%",
+          "opacity": 0,
+          "transform": Array [
+            Object {
+              "scale": 1,
+            },
+          ],
         }
       }
     >
       <View
         style={
-          Object {
-            "opacity": 0,
-            "transform": Array [
-              Object {
-                "scale": 1,
-              },
-            ],
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#323232",
+              "borderRadius": 4,
+              "elevation": 6,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "margin": 8,
+            },
+            Object {
+              "borderRadius": 4,
+            },
+            undefined,
+          ]
         }
       >
-        <View
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#323232",
-                "borderRadius": 4,
-                "elevation": 6,
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "margin": 8,
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
               },
-              Object {
-                "borderRadius": 4,
-              },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
-            style={
               Array [
                 Object {
-                  "color": "#000000",
-                  "fontFamily": "Helvetica Neue",
+                  "color": "#ffffff",
+                  "flex": 1,
+                  "flexWrap": "wrap",
+                  "marginLeft": 16,
+                  "marginVertical": 14,
                 },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                    "flex": 1,
-                    "flexWrap": "wrap",
-                    "marginLeft": 16,
-                    "marginVertical": 14,
-                  },
-                  Object {
-                    "marginRight": 16,
-                  },
-                ],
-              ]
+                Object {
+                  "marginRight": 16,
+                },
+              ],
+            ]
+          }
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#03dac4",
+                "background": "#f6f6f6",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#B00020",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#6200ee",
+                "surface": "#ffffff",
+                "text": "#000000",
+              },
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 4,
             }
-            theme={
-              Object {
-                "colors": Object {
-                  "accent": "#03dac4",
-                  "background": "#f6f6f6",
-                  "disabled": "rgba(0, 0, 0, 0.26)",
-                  "error": "#B00020",
-                  "placeholder": "rgba(0, 0, 0, 0.38)",
-                  "primary": "#6200ee",
-                  "surface": "#ffffff",
-                  "text": "#000000",
-                },
-                "dark": false,
-                "fonts": Object {
-                  "light": "HelveticaNeue-Light",
-                  "medium": "HelveticaNeue-Medium",
-                  "regular": "Helvetica Neue",
-                  "thin": "HelveticaNeue-Thin",
-                },
-                "roundness": 4,
-              }
-            }
-          >
-            Snackbar content
-          </Text>
-        </View>
+          }
+        >
+          Snackbar content
+        </Text>
       </View>
-    </RCTSafeAreaView>
-  </View>
+    </View>
+  </RCTSafeAreaView>
 </View>
 `;
 
@@ -124,125 +112,113 @@ exports[`renders snackbar with Text as a child 1`] = `
 <View
   pointerEvents="box-none"
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    Object {
+      "bottom": 0,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
   }
 >
-  <View
-    pointerEvents="box-none"
+  <RCTSafeAreaView
     style={
       Object {
         "bottom": 0,
-        "left": 0,
         "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "width": "100%",
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
         Object {
-          "bottom": 0,
-          "position": "absolute",
-          "width": "100%",
+          "opacity": 0,
+          "transform": Array [
+            Object {
+              "scale": 0.9,
+            },
+          ],
         }
       }
     >
       <View
         style={
-          Object {
-            "opacity": 0,
-            "transform": Array [
-              Object {
-                "scale": 0.9,
-              },
-            ],
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#323232",
+              "borderRadius": 4,
+              "elevation": 6,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "margin": 8,
+            },
+            Object {
+              "borderRadius": 4,
+            },
+            undefined,
+          ]
         }
       >
-        <View
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#323232",
-                "borderRadius": 4,
-                "elevation": 6,
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "margin": 8,
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
               },
-              Object {
-                "borderRadius": 4,
-              },
-              undefined,
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "flex": 1,
+                  "flexWrap": "wrap",
+                  "marginLeft": 16,
+                  "marginVertical": 14,
+                },
+                Object {
+                  "marginRight": 16,
+                },
+              ],
             ]
           }
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#03dac4",
+                "background": "#f6f6f6",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#B00020",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#6200ee",
+                "surface": "#ffffff",
+                "text": "#000000",
+              },
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 4,
+            }
+          }
         >
           <Text
             accessible={true}
             allowFontScaling={true}
             ellipsizeMode="tail"
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontFamily": "Helvetica Neue",
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                    "flex": 1,
-                    "flexWrap": "wrap",
-                    "marginLeft": 16,
-                    "marginVertical": 14,
-                  },
-                  Object {
-                    "marginRight": 16,
-                  },
-                ],
-              ]
-            }
-            theme={
-              Object {
-                "colors": Object {
-                  "accent": "#03dac4",
-                  "background": "#f6f6f6",
-                  "disabled": "rgba(0, 0, 0, 0.26)",
-                  "error": "#B00020",
-                  "placeholder": "rgba(0, 0, 0, 0.38)",
-                  "primary": "#6200ee",
-                  "surface": "#ffffff",
-                  "text": "#000000",
-                },
-                "dark": false,
-                "fonts": Object {
-                  "light": "HelveticaNeue-Light",
-                  "medium": "HelveticaNeue-Medium",
-                  "regular": "Helvetica Neue",
-                  "thin": "HelveticaNeue-Thin",
-                },
-                "roundness": 4,
-              }
-            }
           >
-            <Text
-              accessible={true}
-              allowFontScaling={true}
-              ellipsizeMode="tail"
-            >
-              Snackbar content
-            </Text>
+            Snackbar content
           </Text>
-        </View>
+        </Text>
       </View>
-    </RCTSafeAreaView>
-  </View>
+    </View>
+  </RCTSafeAreaView>
 </View>
 `;
 
@@ -250,226 +226,214 @@ exports[`renders snackbar with action button 1`] = `
 <View
   pointerEvents="box-none"
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    Object {
+      "bottom": 0,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
   }
 >
-  <View
-    pointerEvents="box-none"
+  <RCTSafeAreaView
     style={
       Object {
         "bottom": 0,
-        "left": 0,
         "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "width": "100%",
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
         Object {
-          "bottom": 0,
-          "position": "absolute",
-          "width": "100%",
+          "opacity": 0,
+          "transform": Array [
+            Object {
+              "scale": 0.9,
+            },
+          ],
         }
       }
     >
       <View
         style={
-          Object {
-            "opacity": 0,
-            "transform": Array [
-              Object {
-                "scale": 0.9,
-              },
-            ],
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#323232",
+              "borderRadius": 4,
+              "elevation": 6,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "margin": 8,
+            },
+            Object {
+              "borderRadius": 4,
+            },
+            undefined,
+          ]
         }
       >
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "flex": 1,
+                  "flexWrap": "wrap",
+                  "marginLeft": 16,
+                  "marginVertical": 14,
+                },
+                Object {
+                  "marginRight": 0,
+                },
+              ],
+            ]
+          }
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#03dac4",
+                "background": "#f6f6f6",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#B00020",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#6200ee",
+                "surface": "#ffffff",
+                "text": "#000000",
+              },
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 4,
+            }
+          }
+        >
+          Snackbar content
+        </Text>
         <View
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#323232",
-                "borderRadius": 4,
-                "elevation": 6,
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "margin": 8,
+                "backgroundColor": "#ffffff",
               },
               Object {
-                "borderRadius": 4,
+                "backgroundColor": "#ffffff",
+              },
+              0,
+              Object {
+                "backgroundColor": "transparent",
+                "borderColor": "transparent",
+                "borderRadius": 4,
+                "borderStyle": "solid",
+                "borderWidth": 0.5,
+                "elevation": 0,
+                "marginHorizontal": 8,
+                "marginVertical": 6,
+                "minWidth": 64,
               },
-              undefined,
             ]
           }
         >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
-            style={
-              Array [
-                Object {
-                  "color": "#000000",
-                  "fontFamily": "Helvetica Neue",
-                },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                    "flex": 1,
-                    "flexWrap": "wrap",
-                    "marginLeft": 16,
-                    "marginVertical": 14,
-                  },
-                  Object {
-                    "marginRight": 0,
-                  },
-                ],
-              ]
-            }
-            theme={
-              Object {
-                "colors": Object {
-                  "accent": "#03dac4",
-                  "background": "#f6f6f6",
-                  "disabled": "rgba(0, 0, 0, 0.26)",
-                  "error": "#B00020",
-                  "placeholder": "rgba(0, 0, 0, 0.38)",
-                  "primary": "#6200ee",
-                  "surface": "#ffffff",
-                  "text": "#000000",
-                },
-                "dark": false,
-                "fonts": Object {
-                  "light": "HelveticaNeue-Light",
-                  "medium": "HelveticaNeue-Medium",
-                  "regular": "Helvetica Neue",
-                  "thin": "HelveticaNeue-Thin",
-                },
-                "roundness": 4,
-              }
-            }
-          >
-            Snackbar content
-          </Text>
           <View
+            accessible={true}
+            isTVSelectable={true}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              Array [
-                Object {
-                  "backgroundColor": "#ffffff",
-                },
-                Object {
-                  "backgroundColor": "#ffffff",
-                },
-                0,
-                Object {
-                  "backgroundColor": "transparent",
-                  "borderColor": "transparent",
-                  "borderRadius": 4,
-                  "borderStyle": "solid",
-                  "borderWidth": 0.5,
-                  "elevation": 0,
-                  "marginHorizontal": 8,
-                  "marginVertical": 6,
-                  "minWidth": 64,
-                },
-              ]
+              Object {
+                "borderRadius": 4,
+              }
             }
           >
             <View
-              accessible={true}
-              isTVSelectable={true}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "borderRadius": 4,
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
                 }
               }
             >
-              <View
+              <Text
+                accessible={true}
+                allowFontScaling={true}
+                ellipsizeMode="tail"
+                numberOfLines={1}
                 style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                      "fontFamily": "Helvetica Neue",
+                    },
+                    Array [
+                      Object {
+                        "letterSpacing": 1,
+                        "marginHorizontal": 16,
+                        "marginVertical": 9,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "marginHorizontal": 8,
+                      },
+                      Object {
+                        "color": "#03dac4",
+                        "fontFamily": "HelveticaNeue-Medium",
+                      },
+                      Object {
+                        "fontFamily": "HelveticaNeue-Medium",
+                      },
+                    ],
+                  ]
+                }
+                theme={
                   Object {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "center",
+                    "colors": Object {
+                      "accent": "#03dac4",
+                      "background": "#f6f6f6",
+                      "disabled": "rgba(0, 0, 0, 0.26)",
+                      "error": "#B00020",
+                      "placeholder": "rgba(0, 0, 0, 0.38)",
+                      "primary": "#6200ee",
+                      "surface": "#ffffff",
+                      "text": "#000000",
+                    },
+                    "dark": false,
+                    "fonts": Object {
+                      "light": "HelveticaNeue-Light",
+                      "medium": "HelveticaNeue-Medium",
+                      "regular": "Helvetica Neue",
+                      "thin": "HelveticaNeue-Thin",
+                    },
+                    "roundness": 4,
                   }
                 }
               >
-                <Text
-                  accessible={true}
-                  allowFontScaling={true}
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
-                  style={
-                    Array [
-                      Object {
-                        "color": "#000000",
-                        "fontFamily": "Helvetica Neue",
-                      },
-                      Array [
-                        Object {
-                          "letterSpacing": 1,
-                          "marginHorizontal": 16,
-                          "marginVertical": 9,
-                          "textAlign": "center",
-                        },
-                        Object {
-                          "marginHorizontal": 8,
-                        },
-                        Object {
-                          "color": "#03dac4",
-                          "fontFamily": "HelveticaNeue-Medium",
-                        },
-                        Object {
-                          "fontFamily": "HelveticaNeue-Medium",
-                        },
-                      ],
-                    ]
-                  }
-                  theme={
-                    Object {
-                      "colors": Object {
-                        "accent": "#03dac4",
-                        "background": "#f6f6f6",
-                        "disabled": "rgba(0, 0, 0, 0.26)",
-                        "error": "#B00020",
-                        "placeholder": "rgba(0, 0, 0, 0.38)",
-                        "primary": "#6200ee",
-                        "surface": "#ffffff",
-                        "text": "#000000",
-                      },
-                      "dark": false,
-                      "fonts": Object {
-                        "light": "HelveticaNeue-Light",
-                        "medium": "HelveticaNeue-Medium",
-                        "regular": "Helvetica Neue",
-                        "thin": "HelveticaNeue-Thin",
-                      },
-                      "roundness": 4,
-                    }
-                  }
-                >
-                  UNDO
-                </Text>
-              </View>
+                UNDO
+              </Text>
             </View>
           </View>
         </View>
       </View>
-    </RCTSafeAreaView>
-  </View>
+    </View>
+  </RCTSafeAreaView>
 </View>
 `;
 
@@ -477,118 +441,106 @@ exports[`renders snackbar with content 1`] = `
 <View
   pointerEvents="box-none"
   style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      undefined,
-    ]
+    Object {
+      "bottom": 0,
+      "left": 0,
+      "position": "absolute",
+      "right": 0,
+      "top": 0,
+    }
   }
 >
-  <View
-    pointerEvents="box-none"
+  <RCTSafeAreaView
     style={
       Object {
         "bottom": 0,
-        "left": 0,
         "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "width": "100%",
       }
     }
   >
-    <RCTSafeAreaView
+    <View
       style={
         Object {
-          "bottom": 0,
-          "position": "absolute",
-          "width": "100%",
+          "opacity": 0,
+          "transform": Array [
+            Object {
+              "scale": 0.9,
+            },
+          ],
         }
       }
     >
       <View
         style={
-          Object {
-            "opacity": 0,
-            "transform": Array [
-              Object {
-                "scale": 0.9,
-              },
-            ],
-          }
+          Array [
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "#323232",
+              "borderRadius": 4,
+              "elevation": 6,
+              "flexDirection": "row",
+              "justifyContent": "space-between",
+              "margin": 8,
+            },
+            Object {
+              "borderRadius": 4,
+            },
+            undefined,
+          ]
         }
       >
-        <View
+        <Text
+          accessible={true}
+          allowFontScaling={true}
+          ellipsizeMode="tail"
           style={
             Array [
               Object {
-                "alignItems": "center",
-                "backgroundColor": "#323232",
-                "borderRadius": 4,
-                "elevation": 6,
-                "flexDirection": "row",
-                "justifyContent": "space-between",
-                "margin": 8,
+                "color": "#000000",
+                "fontFamily": "Helvetica Neue",
               },
-              Object {
-                "borderRadius": 4,
-              },
-              undefined,
-            ]
-          }
-        >
-          <Text
-            accessible={true}
-            allowFontScaling={true}
-            ellipsizeMode="tail"
-            style={
               Array [
                 Object {
-                  "color": "#000000",
-                  "fontFamily": "Helvetica Neue",
+                  "color": "#ffffff",
+                  "flex": 1,
+                  "flexWrap": "wrap",
+                  "marginLeft": 16,
+                  "marginVertical": 14,
                 },
-                Array [
-                  Object {
-                    "color": "#ffffff",
-                    "flex": 1,
-                    "flexWrap": "wrap",
-                    "marginLeft": 16,
-                    "marginVertical": 14,
-                  },
-                  Object {
-                    "marginRight": 16,
-                  },
-                ],
-              ]
+                Object {
+                  "marginRight": 16,
+                },
+              ],
+            ]
+          }
+          theme={
+            Object {
+              "colors": Object {
+                "accent": "#03dac4",
+                "background": "#f6f6f6",
+                "disabled": "rgba(0, 0, 0, 0.26)",
+                "error": "#B00020",
+                "placeholder": "rgba(0, 0, 0, 0.38)",
+                "primary": "#6200ee",
+                "surface": "#ffffff",
+                "text": "#000000",
+              },
+              "dark": false,
+              "fonts": Object {
+                "light": "HelveticaNeue-Light",
+                "medium": "HelveticaNeue-Medium",
+                "regular": "Helvetica Neue",
+                "thin": "HelveticaNeue-Thin",
+              },
+              "roundness": 4,
             }
-            theme={
-              Object {
-                "colors": Object {
-                  "accent": "#03dac4",
-                  "background": "#f6f6f6",
-                  "disabled": "rgba(0, 0, 0, 0.26)",
-                  "error": "#B00020",
-                  "placeholder": "rgba(0, 0, 0, 0.38)",
-                  "primary": "#6200ee",
-                  "surface": "#ffffff",
-                  "text": "#000000",
-                },
-                "dark": false,
-                "fonts": Object {
-                  "light": "HelveticaNeue-Light",
-                  "medium": "HelveticaNeue-Medium",
-                  "regular": "Helvetica Neue",
-                  "thin": "HelveticaNeue-Thin",
-                },
-                "roundness": 4,
-              }
-            }
-          >
-            Snackbar content
-          </Text>
-        </View>
+          }
+        >
+          Snackbar content
+        </Text>
       </View>
-    </RCTSafeAreaView>
-  </View>
+    </View>
+  </RCTSafeAreaView>
 </View>
 `;