From 03ff504a863d00a0334d3eaa7b6a58d262dd7f57 Mon Sep 17 00:00:00 2001
From: hyochan <dooboolab@gmail.com>
Date: Thu, 6 Feb 2020 15:16:58 +0900
Subject: [PATCH] Upgrade navigation to v5

---
 .ncurc.json                                   |    2 -
 package.json                                  |    4 +-
 .../AuthStackNavigator.test.tsx.snap          | 1246 ++++++-------
 .../RootStackNavigator.test.tsx.snap          | 1542 +++++++++--------
 yarn.lock                                     |   41 +-
 5 files changed, 1423 insertions(+), 1412 deletions(-)

diff --git a/.ncurc.json b/.ncurc.json
index b33630b46..d55ae91fe 100644
--- a/.ncurc.json
+++ b/.ncurc.json
@@ -8,8 +8,6 @@
     "react-native-screens",
     "react-native-safe-area-context",
     "react-native-gesture-handler",
-    "@react-navigation/material-top-tabs",
-    "@react-navigation/stack",
     "react-native-svg",
     "react-native-webview",
     "react-native-svg",
diff --git a/package.json b/package.json
index de9b19e49..ad09ff762 100644
--- a/package.json
+++ b/package.json
@@ -30,9 +30,9 @@
     "@expo/vector-icons": "^10.0.6",
     "@react-native-community/masked-view": "0.1.5",
     "@react-navigation/core": "^5.0.0",
-    "@react-navigation/material-top-tabs": "^5.0.0-alpha.35",
+    "@react-navigation/material-top-tabs": "^5.0.0",
     "@react-navigation/native": "^5.0.0",
-    "@react-navigation/stack": "^5.0.0-alpha.63",
+    "@react-navigation/stack": "^5.0.0",
     "apollo-boost": "^0.4.7",
     "apollo-link": "^1.2.13",
     "apollo-link-context": "^1.0.19",
diff --git a/src/components/navigation/__tests__/__snapshots__/AuthStackNavigator.test.tsx.snap b/src/components/navigation/__tests__/__snapshots__/AuthStackNavigator.test.tsx.snap
index 239da9c0c..81fbb1b85 100644
--- a/src/components/navigation/__tests__/__snapshots__/AuthStackNavigator.test.tsx.snap
+++ b/src/components/navigation/__tests__/__snapshots__/AuthStackNavigator.test.tsx.snap
@@ -10,264 +10,198 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
     }
   }
 >
-  <RNCSafeAreaView
+  <View
     style={
       Object {
         "flex": 1,
       }
     }
   >
-    <View
-      collapsable={true}
-      removeClippedSubviews={false}
+    <RNCSafeAreaView
       style={
-        Array [
-          Object {
-            "flex": 1,
-            "overflow": "hidden",
-          },
-          Object {
-            "overflow": "hidden",
-          },
-        ]
+        Object {
+          "flex": 1,
+        }
       }
     >
       <View
-        pointerEvents="box-none"
+        collapsable={true}
+        removeClippedSubviews={false}
         style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "overflow": "hidden",
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": Array [
-              Object {
-                "translateY": 0,
-              },
-            ],
-          }
+          Array [
+            Object {
+              "flex": 1,
+              "overflow": "hidden",
+            },
+            Object {
+              "overflow": "hidden",
+            },
+          ]
         }
       >
         <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
           pointerEvents="box-none"
           style={
             Object {
               "bottom": 0,
               "left": 0,
+              "overflow": "hidden",
               "position": "absolute",
               "right": 0,
               "top": 0,
-            }
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 0.01,
-                  "restSpeedThreshold": 0.01,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 0.01,
-                  "restSpeedThreshold": 0.01,
-                  "stiffness": 1000,
+              "transform": Array [
+                Object {
+                  "translateY": 0,
                 },
-              },
+              ],
             }
           }
         >
           <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
             pointerEvents="box-none"
             style={
               Object {
-                "flex": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 0.01,
+                    "restSpeedThreshold": 0.01,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 0.01,
+                    "restSpeedThreshold": 0.01,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": 0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "backgroundColor": "#fff",
-                    "bottom": 0,
-                    "left": 0,
-                    "position": "absolute",
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": 1,
-                      "width": -1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                    "width": 3,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": 0,
+                      },
                       Object {
-                        "backgroundColor": "rgb(242, 242, 242)",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="none"
                   style={
                     Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
+                      "backgroundColor": "#fff",
+                      "bottom": 0,
+                      "left": 0,
+                      "position": "absolute",
+                      "shadowColor": "#000",
+                      "shadowOffset": Object {
+                        "height": 1,
+                        "width": -1,
+                      },
+                      "shadowOpacity": 0.3,
+                      "shadowRadius": 5,
+                      "top": 0,
+                      "width": 3,
                     }
                   }
+                />
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "rgb(242, 242, 242)",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
-                    <SafeAreaView
+                    <View
                       style={
-                        Array [
-                          Object {
-                            "backgroundColor": "#ffffff",
-                            "flexBasis": 0,
-                            "flexGrow": 1,
-                            "flexShrink": 1,
-                            "justifyContent": "center",
-                          },
-                        ]
+                        Object {
+                          "flex": 1,
+                        }
                       }
                     >
-                      <ScrollView
+                      <SafeAreaView
                         style={
-                          Object {
-                            "alignSelf": "stretch",
-                          }
+                          Array [
+                            Object {
+                              "backgroundColor": "#ffffff",
+                              "flexBasis": 0,
+                              "flexGrow": 1,
+                              "flexShrink": 1,
+                              "justifyContent": "center",
+                            },
+                          ]
                         }
                       >
-                        <View
+                        <ScrollView
                           style={
-                            Array [
-                              Object {
-                                "marginBottom": 40,
-                                "marginLeft": 40,
-                                "marginRight": 40,
-                                "marginTop": 40,
-                              },
-                            ]
+                            Object {
+                              "alignSelf": "stretch",
+                            }
                           }
                         >
                           <View
                             style={
                               Array [
                                 Object {
-                                  "marginBottom": 72,
-                                  "marginTop": 44,
-                                },
-                              ]
-                            }
-                          >
-                            <TouchableOpacity
-                              activeOpacity={0.2}
-                              style={
-                                Object {
-                                  "alignItems": "center",
-                                  "width": 60,
-                                }
-                              }
-                              testID="theme-test"
-                            >
-                              <Image
-                                source={
-                                  Object {
-                                    "canInstrument": true,
-                                    "createTransformer": [Function],
-                                    "getCacheKey": [Function],
-                                    "process": [Function],
-                                  }
-                                }
-                                style={
-                                  Array [
-                                    Object {
-                                      "height": 60,
-                                      "width": 60,
-                                    },
-                                  ]
-                                }
-                              />
-                              <View
-                                style={
-                                  Object {
-                                    "height": 12,
-                                  }
-                                }
-                              />
-                              <Text
-                                style={
-                                  Array [
-                                    Object {
-                                      "color": "#151A25",
-                                      "fontSize": 20,
-                                      "fontWeight": "bold",
-                                    },
-                                  ]
-                                }
-                              >
-                                Hello
-                              </Text>
-                            </TouchableOpacity>
-                          </View>
-                          <View
-                            style={
-                              Array [
-                                Object {
-                                  "alignSelf": "stretch",
-                                  "flexDirection": "column",
-                                },
-                                Object {
-                                  "marginBottom": 20,
+                                  "marginBottom": 40,
+                                  "marginLeft": 40,
+                                  "marginRight": 40,
+                                  "marginTop": 40,
                                 },
                               ]
                             }
@@ -276,194 +210,90 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
                               style={
                                 Array [
                                   Object {
-                                    "alignItems": "center",
-                                    "flexDirection": "row",
-                                    "justifyContent": "space-between",
-                                    "width": "100%",
-                                  },
-                                  Object {
-                                    "borderBottomWidth": 0.6,
-                                    "borderColor": "#2E2E2E",
+                                    "marginBottom": 72,
+                                    "marginTop": 44,
                                   },
-                                  undefined,
-                                  null,
                                 ]
                               }
                             >
-                              <Text
+                              <TouchableOpacity
+                                activeOpacity={0.2}
                                 style={
-                                  Array [
-                                    Object {
-                                      "color": "#b9b9c4",
-                                      "fontSize": 14,
-                                      "fontWeight": "bold",
-                                    },
-                                    undefined,
-                                    null,
-                                    Object {
-                                      "width": 110,
-                                    },
-                                  ]
+                                  Object {
+                                    "alignItems": "center",
+                                    "width": 60,
+                                  }
                                 }
+                                testID="theme-test"
                               >
-                                Email
-                              </Text>
-                              <TextInput
-                                allowFontScaling={true}
-                                autoCapitalize="none"
-                                placeholder="hello@example.com"
-                                placeholderTextColor="#676c7a"
-                                rejectResponderTermination={true}
-                                style={
-                                  Array [
-                                    Object {
-                                      "color": "#2c374e",
-                                      "flexBasis": 0,
-                                      "flexGrow": 1,
-                                      "flexShrink": 1,
-                                      "fontSize": 14,
-                                      "fontWeight": "bold",
-                                      "height": "100%",
-                                      "paddingBottom": 16,
-                                      "paddingTop": 16,
-                                    },
+                                <Image
+                                  source={
                                     Object {
-                                      "color": "#151A25",
-                                    },
+                                      "canInstrument": true,
+                                      "createTransformer": [Function],
+                                      "getCacheKey": [Function],
+                                      "process": [Function],
+                                    }
+                                  }
+                                  style={
+                                    Array [
+                                      Object {
+                                        "height": 60,
+                                        "width": 60,
+                                      },
+                                    ]
+                                  }
+                                />
+                                <View
+                                  style={
                                     Object {
-                                      "textAlign": "right",
-                                    },
-                                  ]
-                                }
-                                testID="input-email"
-                                underlineColorAndroid="transparent"
-                                value=""
-                              />
+                                      "height": 12,
+                                    }
+                                  }
+                                />
+                                <Text
+                                  style={
+                                    Array [
+                                      Object {
+                                        "color": "#151A25",
+                                        "fontSize": 20,
+                                        "fontWeight": "bold",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Hello
+                                </Text>
+                              </TouchableOpacity>
                             </View>
-                          </View>
-                          <View
-                            style={
-                              Array [
-                                Object {
-                                  "alignSelf": "stretch",
-                                  "flexDirection": "column",
-                                },
-                                Object {
-                                  "marginBottom": 20,
-                                },
-                              ]
-                            }
-                          >
                             <View
                               style={
                                 Array [
                                   Object {
-                                    "alignItems": "center",
-                                    "flexDirection": "row",
-                                    "justifyContent": "space-between",
-                                    "width": "100%",
+                                    "alignSelf": "stretch",
+                                    "flexDirection": "column",
                                   },
                                   Object {
-                                    "borderBottomWidth": 0.6,
-                                    "borderColor": "#2E2E2E",
+                                    "marginBottom": 20,
                                   },
-                                  undefined,
-                                  null,
                                 ]
                               }
-                            >
-                              <Text
-                                style={
-                                  Array [
-                                    Object {
-                                      "color": "#b9b9c4",
-                                      "fontSize": 14,
-                                      "fontWeight": "bold",
-                                    },
-                                    undefined,
-                                    null,
-                                    Object {
-                                      "width": 110,
-                                    },
-                                  ]
-                                }
-                              >
-                                Password
-                              </Text>
-                              <TextInput
-                                allowFontScaling={true}
-                                autoCapitalize="none"
-                                placeholder="******"
-                                placeholderTextColor="#676c7a"
-                                rejectResponderTermination={true}
-                                secureTextEntry={true}
-                                style={
-                                  Array [
-                                    Object {
-                                      "color": "#2c374e",
-                                      "flexBasis": 0,
-                                      "flexGrow": 1,
-                                      "flexShrink": 1,
-                                      "fontSize": 14,
-                                      "fontWeight": "bold",
-                                      "height": "100%",
-                                      "paddingBottom": 16,
-                                      "paddingTop": 16,
-                                    },
-                                    Object {
-                                      "color": "#151A25",
-                                    },
-                                    Object {
-                                      "textAlign": "right",
-                                    },
-                                  ]
-                                }
-                                testID="input-password"
-                                underlineColorAndroid="transparent"
-                                value=""
-                              />
-                            </View>
-                          </View>
-                          <View
-                            style={
-                              Array [
-                                Object {
-                                  "flexDirection": "row",
-                                  "marginTop": 12,
-                                  "width": "100%",
-                                },
-                              ]
-                            }
-                          >
-                            <TouchableOpacity
-                              activeOpacity={0.2}
-                              style={
-                                Object {
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 52,
-                                  "justifyContent": "center",
-                                }
-                              }
-                              testID="btn-sign-up"
                             >
                               <View
                                 style={
                                   Array [
                                     Object {
                                       "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "borderColor": "blue",
                                       "flexDirection": "row",
-                                      "height": 52,
-                                      "justifyContent": "center",
+                                      "justifyContent": "space-between",
+                                      "width": "100%",
                                     },
                                     Object {
-                                      "backgroundColor": "#ffffff",
-                                      "borderColor": "#1E6EFA",
-                                      "borderWidth": 1,
-                                      "width": "100%",
+                                      "borderBottomWidth": 0.6,
+                                      "borderColor": "#2E2E2E",
                                     },
+                                    undefined,
+                                    null,
                                   ]
                                 }
                               >
@@ -471,52 +301,81 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
                                   style={
                                     Array [
                                       Object {
-                                        "color": "#069ccd",
-                                        "fontSize": 16,
-                                      },
-                                      Object {
-                                        "color": "#1E6EFA",
+                                        "color": "#b9b9c4",
                                         "fontSize": 14,
                                         "fontWeight": "bold",
                                       },
+                                      undefined,
+                                      null,
+                                      Object {
+                                        "width": 110,
+                                      },
                                     ]
                                   }
                                 >
-                                  Sign Up
+                                  Email
                                 </Text>
+                                <TextInput
+                                  allowFontScaling={true}
+                                  autoCapitalize="none"
+                                  placeholder="hello@example.com"
+                                  placeholderTextColor="#676c7a"
+                                  rejectResponderTermination={true}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "color": "#2c374e",
+                                        "flexBasis": 0,
+                                        "flexGrow": 1,
+                                        "flexShrink": 1,
+                                        "fontSize": 14,
+                                        "fontWeight": "bold",
+                                        "height": "100%",
+                                        "paddingBottom": 16,
+                                        "paddingTop": 16,
+                                      },
+                                      Object {
+                                        "color": "#151A25",
+                                      },
+                                      Object {
+                                        "textAlign": "right",
+                                      },
+                                    ]
+                                  }
+                                  testID="input-email"
+                                  underlineColorAndroid="transparent"
+                                  value=""
+                                />
                               </View>
-                            </TouchableOpacity>
+                            </View>
                             <View
                               style={
-                                Object {
-                                  "width": 20,
-                                }
-                              }
-                            />
-                            <TouchableOpacity
-                              activeOpacity={0.2}
-                              style={
-                                Object {
-                                  "backgroundColor": "#1E6EFA",
-                                  "flex": 1,
-                                  "flexDirection": "row",
-                                  "height": 52,
-                                  "justifyContent": "center",
-                                }
+                                Array [
+                                  Object {
+                                    "alignSelf": "stretch",
+                                    "flexDirection": "column",
+                                  },
+                                  Object {
+                                    "marginBottom": 20,
+                                  },
+                                ]
                               }
-                              testID="btn-sign-in"
                             >
                               <View
                                 style={
                                   Array [
                                     Object {
                                       "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "borderColor": "blue",
                                       "flexDirection": "row",
-                                      "height": 52,
-                                      "justifyContent": "center",
+                                      "justifyContent": "space-between",
+                                      "width": "100%",
+                                    },
+                                    Object {
+                                      "borderBottomWidth": 0.6,
+                                      "borderColor": "#2E2E2E",
                                     },
+                                    undefined,
+                                    null,
                                   ]
                                 }
                               >
@@ -524,311 +383,460 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
                                   style={
                                     Array [
                                       Object {
-                                        "color": "#069ccd",
-                                        "fontSize": 16,
-                                      },
-                                      Object {
-                                        "color": "#ffffff",
+                                        "color": "#b9b9c4",
                                         "fontSize": 14,
                                         "fontWeight": "bold",
                                       },
+                                      undefined,
+                                      null,
+                                      Object {
+                                        "width": 110,
+                                      },
                                     ]
                                   }
                                 >
-                                  Login
+                                  Password
                                 </Text>
+                                <TextInput
+                                  allowFontScaling={true}
+                                  autoCapitalize="none"
+                                  placeholder="******"
+                                  placeholderTextColor="#676c7a"
+                                  rejectResponderTermination={true}
+                                  secureTextEntry={true}
+                                  style={
+                                    Array [
+                                      Object {
+                                        "color": "#2c374e",
+                                        "flexBasis": 0,
+                                        "flexGrow": 1,
+                                        "flexShrink": 1,
+                                        "fontSize": 14,
+                                        "fontWeight": "bold",
+                                        "height": "100%",
+                                        "paddingBottom": 16,
+                                        "paddingTop": 16,
+                                      },
+                                      Object {
+                                        "color": "#151A25",
+                                      },
+                                      Object {
+                                        "textAlign": "right",
+                                      },
+                                    ]
+                                  }
+                                  testID="input-password"
+                                  underlineColorAndroid="transparent"
+                                  value=""
+                                />
                               </View>
-                            </TouchableOpacity>
-                          </View>
-                          <TouchableOpacity
-                            activeOpacity={0.2}
-                            style={
-                              Array [
-                                Object {
-                                  "alignSelf": "center",
-                                  "marginBottom": 44,
-                                  "paddingBottom": 20,
-                                  "paddingLeft": 20,
-                                  "paddingRight": 20,
-                                  "paddingTop": 20,
-                                },
-                              ]
-                            }
-                            testID="btn-find-pw"
-                          >
-                            <Text
+                            </View>
+                            <View
                               style={
                                 Array [
                                   Object {
-                                    "color": "#1E6EFA",
-                                    "textDecorationLine": "underline",
+                                    "flexDirection": "row",
+                                    "marginTop": 12,
+                                    "width": "100%",
                                   },
                                 ]
                               }
                             >
-                              Forgot password?
-                            </Text>
-                          </TouchableOpacity>
-                          <View
-                            style={
-                              Array [
-                                Object {
-                                  "marginBottom": 24,
-                                },
-                              ]
-                            }
-                          >
-                            <TouchableOpacity
-                              activeOpacity={0.2}
-                              testID="btn-apple"
-                            >
-                              <View
+                              <TouchableOpacity
+                                activeOpacity={0.2}
                                 style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "borderColor": "blue",
-                                      "flexDirection": "row",
-                                      "height": 52,
-                                      "justifyContent": "center",
-                                    },
-                                    Object {
-                                      "backgroundColor": "#ffffff",
-                                      "borderColor": "#151E22",
-                                      "borderWidth": 1,
-                                      "height": 48,
-                                      "marginBottom": 6,
-                                      "width": "100%",
-                                    },
-                                  ]
+                                  Object {
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 52,
+                                    "justifyContent": "center",
+                                  }
                                 }
+                                testID="btn-sign-up"
                               >
                                 <View
-                                  style={
-                                    Object {
-                                      "marginRight": 6,
-                                    }
-                                  }
-                                >
-                                  <SvgMock
-                                    fill="#151E22"
-                                    width={24}
-                                  />
-                                </View>
-                                <Text
                                   style={
                                     Array [
                                       Object {
-                                        "color": "#069ccd",
-                                        "fontSize": 16,
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "borderColor": "blue",
+                                        "flexDirection": "row",
+                                        "height": 52,
+                                        "justifyContent": "center",
                                       },
                                       Object {
-                                        "color": "#151E22",
-                                        "fontWeight": "700",
+                                        "backgroundColor": "#ffffff",
+                                        "borderColor": "#1E6EFA",
+                                        "borderWidth": 1,
+                                        "width": "100%",
                                       },
                                     ]
                                   }
                                 >
-                                  Sign in with Apple
-                                </Text>
-                              </View>
-                            </TouchableOpacity>
-                            <TouchableOpacity
-                              activeOpacity={0.2}
-                              testID="btn-facebook"
-                            >
+                                  <Text
+                                    style={
+                                      Array [
+                                        Object {
+                                          "color": "#069ccd",
+                                          "fontSize": 16,
+                                        },
+                                        Object {
+                                          "color": "#1E6EFA",
+                                          "fontSize": 14,
+                                          "fontWeight": "bold",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Sign Up
+                                  </Text>
+                                </View>
+                              </TouchableOpacity>
                               <View
                                 style={
-                                  Array [
-                                    Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "borderColor": "blue",
-                                      "flexDirection": "row",
-                                      "height": 52,
-                                      "justifyContent": "center",
-                                    },
-                                    Object {
-                                      "backgroundColor": "#345997",
-                                      "borderColor": "#345997",
-                                      "borderWidth": 1,
-                                      "height": 48,
-                                      "marginBottom": 6,
-                                      "width": "100%",
-                                    },
-                                  ]
+                                  Object {
+                                    "width": 20,
+                                  }
+                                }
+                              />
+                              <TouchableOpacity
+                                activeOpacity={0.2}
+                                style={
+                                  Object {
+                                    "backgroundColor": "#1E6EFA",
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "height": 52,
+                                    "justifyContent": "center",
+                                  }
                                 }
+                                testID="btn-sign-in"
                               >
                                 <View
-                                  style={
-                                    Object {
-                                      "marginRight": 6,
-                                    }
-                                  }
-                                >
-                                  <SvgMock
-                                    fill="#ffffff"
-                                    width={24}
-                                  />
-                                </View>
-                                <Text
                                   style={
                                     Array [
                                       Object {
-                                        "color": "#069ccd",
-                                        "fontSize": 16,
-                                      },
-                                      Object {
-                                        "color": "#ffffff",
-                                        "fontWeight": "700",
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "borderColor": "blue",
+                                        "flexDirection": "row",
+                                        "height": 52,
+                                        "justifyContent": "center",
                                       },
                                     ]
                                   }
                                 >
-                                  Sign in with Facebook
-                                </Text>
-                              </View>
-                            </TouchableOpacity>
+                                  <Text
+                                    style={
+                                      Array [
+                                        Object {
+                                          "color": "#069ccd",
+                                          "fontSize": 16,
+                                        },
+                                        Object {
+                                          "color": "#ffffff",
+                                          "fontSize": 14,
+                                          "fontWeight": "bold",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Login
+                                  </Text>
+                                </View>
+                              </TouchableOpacity>
+                            </View>
                             <TouchableOpacity
                               activeOpacity={0.2}
-                              testID="btn-google"
+                              style={
+                                Array [
+                                  Object {
+                                    "alignSelf": "center",
+                                    "marginBottom": 44,
+                                    "paddingBottom": 20,
+                                    "paddingLeft": 20,
+                                    "paddingRight": 20,
+                                    "paddingTop": 20,
+                                  },
+                                ]
+                              }
+                              testID="btn-find-pw"
                             >
-                              <View
+                              <Text
                                 style={
                                   Array [
                                     Object {
-                                      "alignItems": "center",
-                                      "alignSelf": "center",
-                                      "borderColor": "blue",
-                                      "flexDirection": "row",
-                                      "height": 52,
-                                      "justifyContent": "center",
-                                    },
-                                    Object {
-                                      "backgroundColor": "#E04238",
-                                      "borderColor": "#E04238",
-                                      "borderWidth": 1,
-                                      "height": 48,
-                                      "width": "100%",
+                                      "color": "#1E6EFA",
+                                      "textDecorationLine": "underline",
                                     },
                                   ]
                                 }
+                              >
+                                Forgot password?
+                              </Text>
+                            </TouchableOpacity>
+                            <View
+                              style={
+                                Array [
+                                  Object {
+                                    "marginBottom": 24,
+                                  },
+                                ]
+                              }
+                            >
+                              <TouchableOpacity
+                                activeOpacity={0.2}
+                                testID="btn-apple"
                               >
                                 <View
                                   style={
-                                    Object {
-                                      "marginRight": 6,
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "borderColor": "blue",
+                                        "flexDirection": "row",
+                                        "height": 52,
+                                        "justifyContent": "center",
+                                      },
+                                      Object {
+                                        "backgroundColor": "#ffffff",
+                                        "borderColor": "#151E22",
+                                        "borderWidth": 1,
+                                        "height": 48,
+                                        "marginBottom": 6,
+                                        "width": "100%",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  <View
+                                    style={
+                                      Object {
+                                        "marginRight": 6,
+                                      }
+                                    }
+                                  >
+                                    <SvgMock
+                                      fill="#151E22"
+                                      width={24}
+                                    />
+                                  </View>
+                                  <Text
+                                    style={
+                                      Array [
+                                        Object {
+                                          "color": "#069ccd",
+                                          "fontSize": 16,
+                                        },
+                                        Object {
+                                          "color": "#151E22",
+                                          "fontWeight": "700",
+                                        },
+                                      ]
                                     }
+                                  >
+                                    Sign in with Apple
+                                  </Text>
+                                </View>
+                              </TouchableOpacity>
+                              <TouchableOpacity
+                                activeOpacity={0.2}
+                                testID="btn-facebook"
+                              >
+                                <View
+                                  style={
+                                    Array [
+                                      Object {
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "borderColor": "blue",
+                                        "flexDirection": "row",
+                                        "height": 52,
+                                        "justifyContent": "center",
+                                      },
+                                      Object {
+                                        "backgroundColor": "#345997",
+                                        "borderColor": "#345997",
+                                        "borderWidth": 1,
+                                        "height": 48,
+                                        "marginBottom": 6,
+                                        "width": "100%",
+                                      },
+                                    ]
                                   }
                                 >
-                                  <SvgMock
-                                    fill="#ffffff"
-                                    width={24}
-                                  />
+                                  <View
+                                    style={
+                                      Object {
+                                        "marginRight": 6,
+                                      }
+                                    }
+                                  >
+                                    <SvgMock
+                                      fill="#ffffff"
+                                      width={24}
+                                    />
+                                  </View>
+                                  <Text
+                                    style={
+                                      Array [
+                                        Object {
+                                          "color": "#069ccd",
+                                          "fontSize": 16,
+                                        },
+                                        Object {
+                                          "color": "#ffffff",
+                                          "fontWeight": "700",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Sign in with Facebook
+                                  </Text>
                                 </View>
-                                <Text
+                              </TouchableOpacity>
+                              <TouchableOpacity
+                                activeOpacity={0.2}
+                                testID="btn-google"
+                              >
+                                <View
                                   style={
                                     Array [
                                       Object {
-                                        "color": "#069ccd",
-                                        "fontSize": 16,
+                                        "alignItems": "center",
+                                        "alignSelf": "center",
+                                        "borderColor": "blue",
+                                        "flexDirection": "row",
+                                        "height": 52,
+                                        "justifyContent": "center",
                                       },
                                       Object {
-                                        "color": "#ffffff",
-                                        "fontWeight": "700",
+                                        "backgroundColor": "#E04238",
+                                        "borderColor": "#E04238",
+                                        "borderWidth": 1,
+                                        "height": 48,
+                                        "width": "100%",
                                       },
                                     ]
                                   }
                                 >
-                                  Sign in with Google
-                                </Text>
-                              </View>
-                            </TouchableOpacity>
-                          </View>
-                          <View
-                            style={
-                              Array [
-                                Object {
-                                  "flexDirection": "row",
-                                  "flexWrap": "wrap",
-                                  "justifyContent": "center",
-                                  "paddingBottom": 40,
-                                  "paddingLeft": 0,
-                                  "paddingRight": 0,
-                                  "paddingTop": 0,
-                                },
-                              ]
-                            }
-                          >
-                            <Text
-                              style={
-                                Array [
-                                  Object {
-                                    "color": "#777",
-                                    "lineHeight": 22,
-                                  },
-                                ]
-                              }
-                            >
-                              We consider that you agree with 
-                            </Text>
-                            <Text
-                              style={
-                                Array [
-                                  Object {
-                                    "color": "#1E6EFA",
-                                    "lineHeight": 22,
-                                    "textDecorationLine": "underline",
-                                  },
-                                ]
-                              }
-                              testID="btn-terms"
-                            >
-                              Terms for Agreement
-                            </Text>
-                            <Text
-                              style={
-                                Array [
-                                  Object {
-                                    "color": "#777",
-                                    "lineHeight": 22,
-                                  },
-                                ]
-                              }
-                            >
-                               and 
-                            </Text>
-                            <Text
-                              style={
-                                Array [
-                                  Object {
-                                    "color": "#1E6EFA",
-                                    "lineHeight": 22,
-                                    "textDecorationLine": "underline",
-                                  },
-                                ]
-                              }
-                              testID="btn-privacy"
-                            >
-                              Privacy Policy
-                            </Text>
-                            <Text
+                                  <View
+                                    style={
+                                      Object {
+                                        "marginRight": 6,
+                                      }
+                                    }
+                                  >
+                                    <SvgMock
+                                      fill="#ffffff"
+                                      width={24}
+                                    />
+                                  </View>
+                                  <Text
+                                    style={
+                                      Array [
+                                        Object {
+                                          "color": "#069ccd",
+                                          "fontSize": 16,
+                                        },
+                                        Object {
+                                          "color": "#ffffff",
+                                          "fontWeight": "700",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    Sign in with Google
+                                  </Text>
+                                </View>
+                              </TouchableOpacity>
+                            </View>
+                            <View
                               style={
                                 Array [
                                   Object {
-                                    "color": "#777",
-                                    "lineHeight": 22,
+                                    "flexDirection": "row",
+                                    "flexWrap": "wrap",
+                                    "justifyContent": "center",
+                                    "paddingBottom": 40,
+                                    "paddingLeft": 0,
+                                    "paddingRight": 0,
+                                    "paddingTop": 0,
                                   },
                                 ]
                               }
                             >
-                               by going onto next step.
-                            </Text>
+                              <Text
+                                style={
+                                  Array [
+                                    Object {
+                                      "color": "#777",
+                                      "lineHeight": 22,
+                                    },
+                                  ]
+                                }
+                              >
+                                We consider that you agree with 
+                              </Text>
+                              <Text
+                                style={
+                                  Array [
+                                    Object {
+                                      "color": "#1E6EFA",
+                                      "lineHeight": 22,
+                                      "textDecorationLine": "underline",
+                                    },
+                                  ]
+                                }
+                                testID="btn-terms"
+                              >
+                                Terms for Agreement
+                              </Text>
+                              <Text
+                                style={
+                                  Array [
+                                    Object {
+                                      "color": "#777",
+                                      "lineHeight": 22,
+                                    },
+                                  ]
+                                }
+                              >
+                                 and 
+                              </Text>
+                              <Text
+                                style={
+                                  Array [
+                                    Object {
+                                      "color": "#1E6EFA",
+                                      "lineHeight": 22,
+                                      "textDecorationLine": "underline",
+                                    },
+                                  ]
+                                }
+                                testID="btn-privacy"
+                              >
+                                Privacy Policy
+                              </Text>
+                              <Text
+                                style={
+                                  Array [
+                                    Object {
+                                      "color": "#777",
+                                      "lineHeight": 22,
+                                    },
+                                  ]
+                                }
+                              >
+                                 by going onto next step.
+                              </Text>
+                            </View>
                           </View>
-                        </View>
-                      </ScrollView>
-                    </SafeAreaView>
+                        </ScrollView>
+                      </SafeAreaView>
+                    </View>
                   </View>
                 </View>
               </View>
@@ -836,21 +844,7 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
           </View>
         </View>
       </View>
-    </View>
-    <View
-      pointerEvents="box-none"
-      style={
-        Object {
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
         pointerEvents="box-none"
         style={
           Object {
@@ -860,8 +854,22 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
             "top": 0,
           }
         }
-      />
-    </View>
-  </RNCSafeAreaView>
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          pointerEvents="box-none"
+          style={
+            Object {
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
+    </RNCSafeAreaView>
+  </View>
 </View>
 `;
diff --git a/src/components/navigation/__tests__/__snapshots__/RootStackNavigator.test.tsx.snap b/src/components/navigation/__tests__/__snapshots__/RootStackNavigator.test.tsx.snap
index 26058c836..42bf6bb2b 100644
--- a/src/components/navigation/__tests__/__snapshots__/RootStackNavigator.test.tsx.snap
+++ b/src/components/navigation/__tests__/__snapshots__/RootStackNavigator.test.tsx.snap
@@ -10,1007 +10,1023 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
     }
   }
 >
-  <RNCSafeAreaView
+  <View
     style={
       Object {
         "flex": 1,
       }
     }
   >
-    <View
-      collapsable={true}
-      removeClippedSubviews={false}
+    <RNCSafeAreaView
       style={
-        Array [
-          Object {
-            "flex": 1,
-            "overflow": "hidden",
-          },
-          Object {
-            "overflow": "hidden",
-          },
-        ]
+        Object {
+          "flex": 1,
+        }
       }
     >
       <View
-        pointerEvents="box-none"
+        collapsable={true}
+        removeClippedSubviews={false}
         style={
-          Object {
-            "bottom": 0,
-            "left": 0,
-            "overflow": "hidden",
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-            "transform": Array [
-              Object {
-                "translateY": 0,
-              },
-            ],
-          }
+          Array [
+            Object {
+              "flex": 1,
+              "overflow": "hidden",
+            },
+            Object {
+              "overflow": "hidden",
+            },
+          ]
         }
       >
         <View
-          accessibilityElementsHidden={false}
-          closing={false}
-          gestureVelocityImpact={0.3}
-          importantForAccessibility="auto"
           pointerEvents="box-none"
           style={
             Object {
               "bottom": 0,
               "left": 0,
+              "overflow": "hidden",
               "position": "absolute",
               "right": 0,
               "top": 0,
-            }
-          }
-          transitionSpec={
-            Object {
-              "close": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 0.01,
-                  "restSpeedThreshold": 0.01,
-                  "stiffness": 1000,
-                },
-              },
-              "open": Object {
-                "animation": "spring",
-                "config": Object {
-                  "damping": 500,
-                  "mass": 3,
-                  "overshootClamping": true,
-                  "restDisplacementThreshold": 0.01,
-                  "restSpeedThreshold": 0.01,
-                  "stiffness": 1000,
+              "transform": Array [
+                Object {
+                  "translateY": 0,
                 },
-              },
+              ],
             }
           }
         >
           <View
+            accessibilityElementsHidden={false}
+            closing={false}
+            gestureVelocityImpact={0.3}
+            importantForAccessibility="auto"
             pointerEvents="box-none"
             style={
               Object {
-                "flex": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              }
+            }
+            transitionSpec={
+              Object {
+                "close": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 0.01,
+                    "restSpeedThreshold": 0.01,
+                    "stiffness": 1000,
+                  },
+                },
+                "open": Object {
+                  "animation": "spring",
+                  "config": Object {
+                    "damping": 500,
+                    "mass": 3,
+                    "overshootClamping": true,
+                    "restDisplacementThreshold": 0.01,
+                    "restSpeedThreshold": 0.01,
+                    "stiffness": 1000,
+                  },
+                },
               }
             }
           >
             <View
-              collapsable={false}
+              pointerEvents="box-none"
               style={
                 Object {
                   "flex": 1,
-                  "transform": Array [
-                    Object {
-                      "translateX": -0,
-                    },
-                    Object {
-                      "translateX": 0,
-                    },
-                  ],
                 }
               }
             >
               <View
-                pointerEvents="none"
+                collapsable={false}
                 style={
                   Object {
-                    "backgroundColor": "#fff",
-                    "height": 3,
-                    "left": 0,
-                    "position": "absolute",
-                    "right": 0,
-                    "shadowColor": "#000",
-                    "shadowOffset": Object {
-                      "height": -1,
-                      "width": 1,
-                    },
-                    "shadowOpacity": 0.3,
-                    "shadowRadius": 5,
-                    "top": 0,
-                  }
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "flex": 1,
-                      "overflow": "hidden",
-                    },
-                    Array [
+                    "flex": 1,
+                    "transform": Array [
+                      Object {
+                        "translateX": -0,
+                      },
                       Object {
-                        "backgroundColor": "rgb(242, 242, 242)",
+                        "translateX": 0,
                       },
-                      undefined,
                     ],
-                  ]
+                  }
                 }
               >
                 <View
+                  pointerEvents="none"
                   style={
                     Object {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
+                      "backgroundColor": "#fff",
+                      "bottom": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "shadowColor": "#000",
+                      "shadowOffset": Object {
+                        "height": 1,
+                        "width": -1,
+                      },
+                      "shadowOpacity": 0.3,
+                      "shadowRadius": 5,
+                      "top": 0,
+                      "width": 3,
                     }
                   }
+                />
+                <View
+                  style={
+                    Array [
+                      Object {
+                        "flex": 1,
+                        "overflow": "hidden",
+                      },
+                      Array [
+                        Object {
+                          "backgroundColor": "rgb(242, 242, 242)",
+                        },
+                        undefined,
+                      ],
+                    ]
+                  }
                 >
                   <View
                     style={
                       Object {
                         "flex": 1,
+                        "flexDirection": "column-reverse",
                       }
                     }
                   >
                     <View
-                      collapsable={true}
-                      removeClippedSubviews={false}
                       style={
-                        Array [
-                          Object {
-                            "flex": 1,
-                            "overflow": "hidden",
-                          },
-                          Object {
-                            "overflow": "hidden",
-                          },
-                        ]
+                        Object {
+                          "flex": 1,
+                        }
                       }
                     >
                       <View
-                        pointerEvents="box-none"
                         style={
                           Object {
-                            "bottom": 0,
-                            "left": 0,
-                            "overflow": "hidden",
-                            "position": "absolute",
-                            "right": 0,
-                            "top": 0,
-                            "transform": Array [
-                              Object {
-                                "translateY": 0,
-                              },
-                            ],
+                            "flex": 1,
                           }
                         }
                       >
                         <View
-                          accessibilityElementsHidden={false}
-                          closing={false}
-                          gestureVelocityImpact={0.3}
-                          importantForAccessibility="auto"
-                          pointerEvents="box-none"
+                          collapsable={true}
+                          removeClippedSubviews={false}
                           style={
-                            Object {
-                              "bottom": 0,
-                              "left": 0,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0,
-                            }
-                          }
-                          transitionSpec={
-                            Object {
-                              "close": Object {
-                                "animation": "spring",
-                                "config": Object {
-                                  "damping": 500,
-                                  "mass": 3,
-                                  "overshootClamping": true,
-                                  "restDisplacementThreshold": 0.01,
-                                  "restSpeedThreshold": 0.01,
-                                  "stiffness": 1000,
-                                },
+                            Array [
+                              Object {
+                                "flex": 1,
+                                "overflow": "hidden",
                               },
-                              "open": Object {
-                                "animation": "spring",
-                                "config": Object {
-                                  "damping": 500,
-                                  "mass": 3,
-                                  "overshootClamping": true,
-                                  "restDisplacementThreshold": 0.01,
-                                  "restSpeedThreshold": 0.01,
-                                  "stiffness": 1000,
-                                },
+                              Object {
+                                "overflow": "hidden",
                               },
-                            }
+                            ]
                           }
                         >
                           <View
                             pointerEvents="box-none"
                             style={
                               Object {
-                                "flex": 1,
+                                "bottom": 0,
+                                "left": 0,
+                                "overflow": "hidden",
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                                "transform": Array [
+                                  Object {
+                                    "translateY": 0,
+                                  },
+                                ],
                               }
                             }
                           >
                             <View
-                              collapsable={false}
+                              accessibilityElementsHidden={false}
+                              closing={false}
+                              gestureVelocityImpact={0.3}
+                              importantForAccessibility="auto"
+                              pointerEvents="box-none"
                               style={
                                 Object {
-                                  "flex": 1,
-                                  "transform": Array [
-                                    Object {
-                                      "translateX": 0,
+                                  "bottom": 0,
+                                  "left": 0,
+                                  "position": "absolute",
+                                  "right": 0,
+                                  "top": 0,
+                                }
+                              }
+                              transitionSpec={
+                                Object {
+                                  "close": Object {
+                                    "animation": "spring",
+                                    "config": Object {
+                                      "damping": 500,
+                                      "mass": 3,
+                                      "overshootClamping": true,
+                                      "restDisplacementThreshold": 0.01,
+                                      "restSpeedThreshold": 0.01,
+                                      "stiffness": 1000,
                                     },
-                                    Object {
-                                      "translateX": 0,
+                                  },
+                                  "open": Object {
+                                    "animation": "spring",
+                                    "config": Object {
+                                      "damping": 500,
+                                      "mass": 3,
+                                      "overshootClamping": true,
+                                      "restDisplacementThreshold": 0.01,
+                                      "restSpeedThreshold": 0.01,
+                                      "stiffness": 1000,
                                     },
-                                  ],
+                                  },
                                 }
                               }
                             >
                               <View
-                                pointerEvents="none"
+                                pointerEvents="box-none"
                                 style={
                                   Object {
-                                    "backgroundColor": "#fff",
-                                    "bottom": 0,
-                                    "left": 0,
-                                    "position": "absolute",
-                                    "shadowColor": "#000",
-                                    "shadowOffset": Object {
-                                      "height": 1,
-                                      "width": -1,
-                                    },
-                                    "shadowOpacity": 0.3,
-                                    "shadowRadius": 5,
-                                    "top": 0,
-                                    "width": 3,
+                                    "flex": 1,
                                   }
                                 }
-                              />
-                              <View
-                                style={
-                                  Array [
-                                    Object {
-                                      "flex": 1,
-                                      "overflow": "hidden",
-                                    },
-                                    Array [
-                                      Object {
-                                        "backgroundColor": "rgb(242, 242, 242)",
-                                      },
-                                      undefined,
-                                    ],
-                                  ]
-                                }
                               >
                                 <View
+                                  collapsable={false}
                                   style={
                                     Object {
                                       "flex": 1,
-                                      "flexDirection": "column-reverse",
+                                      "transform": Array [
+                                        Object {
+                                          "translateX": 0,
+                                        },
+                                        Object {
+                                          "translateX": 0,
+                                        },
+                                      ],
                                     }
                                   }
                                 >
                                   <View
+                                    pointerEvents="none"
                                     style={
                                       Object {
-                                        "flex": 1,
+                                        "backgroundColor": "#fff",
+                                        "bottom": 0,
+                                        "left": 0,
+                                        "position": "absolute",
+                                        "shadowColor": "#000",
+                                        "shadowOffset": Object {
+                                          "height": 1,
+                                          "width": -1,
+                                        },
+                                        "shadowOpacity": 0.3,
+                                        "shadowRadius": 5,
+                                        "top": 0,
+                                        "width": 3,
                                       }
                                     }
-                                  >
-                                    <SafeAreaView
-                                      style={
+                                  />
+                                  <View
+                                    style={
+                                      Array [
+                                        Object {
+                                          "flex": 1,
+                                          "overflow": "hidden",
+                                        },
                                         Array [
                                           Object {
-                                            "backgroundColor": "#ffffff",
-                                            "flexBasis": 0,
-                                            "flexGrow": 1,
-                                            "flexShrink": 1,
-                                            "justifyContent": "center",
+                                            "backgroundColor": "rgb(242, 242, 242)",
                                           },
-                                        ]
+                                          undefined,
+                                        ],
+                                      ]
+                                    }
+                                  >
+                                    <View
+                                      style={
+                                        Object {
+                                          "flex": 1,
+                                          "flexDirection": "column-reverse",
+                                        }
                                       }
                                     >
-                                      <ScrollView
+                                      <View
                                         style={
                                           Object {
-                                            "alignSelf": "stretch",
+                                            "flex": 1,
                                           }
                                         }
                                       >
-                                        <View
+                                        <SafeAreaView
                                           style={
                                             Array [
                                               Object {
-                                                "marginBottom": 40,
-                                                "marginLeft": 40,
-                                                "marginRight": 40,
-                                                "marginTop": 40,
+                                                "backgroundColor": "#ffffff",
+                                                "flexBasis": 0,
+                                                "flexGrow": 1,
+                                                "flexShrink": 1,
+                                                "justifyContent": "center",
                                               },
                                             ]
                                           }
                                         >
-                                          <View
-                                            style={
-                                              Array [
-                                                Object {
-                                                  "marginBottom": 72,
-                                                  "marginTop": 44,
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <TouchableOpacity
-                                              activeOpacity={0.2}
-                                              style={
-                                                Object {
-                                                  "alignItems": "center",
-                                                  "width": 60,
-                                                }
-                                              }
-                                              testID="theme-test"
-                                            >
-                                              <Image
-                                                source={
-                                                  Object {
-                                                    "canInstrument": true,
-                                                    "createTransformer": [Function],
-                                                    "getCacheKey": [Function],
-                                                    "process": [Function],
-                                                  }
-                                                }
-                                                style={
-                                                  Array [
-                                                    Object {
-                                                      "height": 60,
-                                                      "width": 60,
-                                                    },
-                                                  ]
-                                                }
-                                              />
-                                              <View
-                                                style={
-                                                  Object {
-                                                    "height": 12,
-                                                  }
-                                                }
-                                              />
-                                              <Text
-                                                style={
-                                                  Array [
-                                                    Object {
-                                                      "color": "#151A25",
-                                                      "fontSize": 20,
-                                                      "fontWeight": "bold",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                Hello
-                                              </Text>
-                                            </TouchableOpacity>
-                                          </View>
-                                          <View
+                                          <ScrollView
                                             style={
-                                              Array [
-                                                Object {
-                                                  "alignSelf": "stretch",
-                                                  "flexDirection": "column",
-                                                },
-                                                Object {
-                                                  "marginBottom": 20,
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <View
-                                              style={
-                                                Array [
-                                                  Object {
-                                                    "alignItems": "center",
-                                                    "flexDirection": "row",
-                                                    "justifyContent": "space-between",
-                                                    "width": "100%",
-                                                  },
-                                                  Object {
-                                                    "borderBottomWidth": 0.6,
-                                                    "borderColor": "#2E2E2E",
-                                                  },
-                                                  undefined,
-                                                  null,
-                                                ]
+                                              Object {
+                                                "alignSelf": "stretch",
                                               }
-                                            >
-                                              <Text
-                                                style={
-                                                  Array [
-                                                    Object {
-                                                      "color": "#b9b9c4",
-                                                      "fontSize": 14,
-                                                      "fontWeight": "bold",
-                                                    },
-                                                    undefined,
-                                                    null,
-                                                    Object {
-                                                      "width": 110,
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                Email
-                                              </Text>
-                                              <TextInput
-                                                allowFontScaling={true}
-                                                autoCapitalize="none"
-                                                placeholder="hello@example.com"
-                                                placeholderTextColor="#676c7a"
-                                                rejectResponderTermination={true}
-                                                style={
-                                                  Array [
-                                                    Object {
-                                                      "color": "#2c374e",
-                                                      "flexBasis": 0,
-                                                      "flexGrow": 1,
-                                                      "flexShrink": 1,
-                                                      "fontSize": 14,
-                                                      "fontWeight": "bold",
-                                                      "height": "100%",
-                                                      "paddingBottom": 16,
-                                                      "paddingTop": 16,
-                                                    },
-                                                    Object {
-                                                      "color": "#151A25",
-                                                    },
-                                                    Object {
-                                                      "textAlign": "right",
-                                                    },
-                                                  ]
-                                                }
-                                                testID="input-email"
-                                                underlineColorAndroid="transparent"
-                                                value=""
-                                              />
-                                            </View>
-                                          </View>
-                                          <View
-                                            style={
-                                              Array [
-                                                Object {
-                                                  "alignSelf": "stretch",
-                                                  "flexDirection": "column",
-                                                },
-                                                Object {
-                                                  "marginBottom": 20,
-                                                },
-                                              ]
                                             }
                                           >
                                             <View
                                               style={
                                                 Array [
                                                   Object {
-                                                    "alignItems": "center",
-                                                    "flexDirection": "row",
-                                                    "justifyContent": "space-between",
-                                                    "width": "100%",
-                                                  },
-                                                  Object {
-                                                    "borderBottomWidth": 0.6,
-                                                    "borderColor": "#2E2E2E",
+                                                    "marginBottom": 40,
+                                                    "marginLeft": 40,
+                                                    "marginRight": 40,
+                                                    "marginTop": 40,
                                                   },
-                                                  undefined,
-                                                  null,
                                                 ]
                                               }
                                             >
-                                              <Text
+                                              <View
                                                 style={
                                                   Array [
                                                     Object {
-                                                      "color": "#b9b9c4",
-                                                      "fontSize": 14,
-                                                      "fontWeight": "bold",
-                                                    },
-                                                    undefined,
-                                                    null,
-                                                    Object {
-                                                      "width": 110,
+                                                      "marginBottom": 72,
+                                                      "marginTop": 44,
                                                     },
                                                   ]
                                                 }
                                               >
-                                                Password
-                                              </Text>
-                                              <TextInput
-                                                allowFontScaling={true}
-                                                autoCapitalize="none"
-                                                placeholder="******"
-                                                placeholderTextColor="#676c7a"
-                                                rejectResponderTermination={true}
-                                                secureTextEntry={true}
-                                                style={
-                                                  Array [
-                                                    Object {
-                                                      "color": "#2c374e",
-                                                      "flexBasis": 0,
-                                                      "flexGrow": 1,
-                                                      "flexShrink": 1,
-                                                      "fontSize": 14,
-                                                      "fontWeight": "bold",
-                                                      "height": "100%",
-                                                      "paddingBottom": 16,
-                                                      "paddingTop": 16,
-                                                    },
-                                                    Object {
-                                                      "color": "#151A25",
-                                                    },
+                                                <TouchableOpacity
+                                                  activeOpacity={0.2}
+                                                  style={
                                                     Object {
-                                                      "textAlign": "right",
-                                                    },
-                                                  ]
-                                                }
-                                                testID="input-password"
-                                                underlineColorAndroid="transparent"
-                                                value=""
-                                              />
-                                            </View>
-                                          </View>
-                                          <View
-                                            style={
-                                              Array [
-                                                Object {
-                                                  "flexDirection": "row",
-                                                  "marginTop": 12,
-                                                  "width": "100%",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <TouchableOpacity
-                                              activeOpacity={0.2}
-                                              style={
-                                                Object {
-                                                  "flex": 1,
-                                                  "flexDirection": "row",
-                                                  "height": 52,
-                                                  "justifyContent": "center",
-                                                }
-                                              }
-                                              testID="btn-sign-up"
-                                            >
+                                                      "alignItems": "center",
+                                                      "width": 60,
+                                                    }
+                                                  }
+                                                  testID="theme-test"
+                                                >
+                                                  <Image
+                                                    source={
+                                                      Object {
+                                                        "canInstrument": true,
+                                                        "createTransformer": [Function],
+                                                        "getCacheKey": [Function],
+                                                        "process": [Function],
+                                                      }
+                                                    }
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "height": 60,
+                                                          "width": 60,
+                                                        },
+                                                      ]
+                                                    }
+                                                  />
+                                                  <View
+                                                    style={
+                                                      Object {
+                                                        "height": 12,
+                                                      }
+                                                    }
+                                                  />
+                                                  <Text
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "color": "#151A25",
+                                                          "fontSize": 20,
+                                                          "fontWeight": "bold",
+                                                        },
+                                                      ]
+                                                    }
+                                                  >
+                                                    Hello
+                                                  </Text>
+                                                </TouchableOpacity>
+                                              </View>
                                               <View
                                                 style={
                                                   Array [
                                                     Object {
-                                                      "alignItems": "center",
-                                                      "alignSelf": "center",
-                                                      "borderColor": "blue",
-                                                      "flexDirection": "row",
-                                                      "height": 52,
-                                                      "justifyContent": "center",
+                                                      "alignSelf": "stretch",
+                                                      "flexDirection": "column",
                                                     },
                                                     Object {
-                                                      "backgroundColor": "#ffffff",
-                                                      "borderColor": "#1E6EFA",
-                                                      "borderWidth": 1,
-                                                      "width": "100%",
+                                                      "marginBottom": 20,
                                                     },
                                                   ]
                                                 }
                                               >
-                                                <Text
+                                                <View
                                                   style={
                                                     Array [
                                                       Object {
-                                                        "color": "#069ccd",
-                                                        "fontSize": 16,
+                                                        "alignItems": "center",
+                                                        "flexDirection": "row",
+                                                        "justifyContent": "space-between",
+                                                        "width": "100%",
                                                       },
                                                       Object {
-                                                        "color": "#1E6EFA",
-                                                        "fontSize": 14,
-                                                        "fontWeight": "bold",
+                                                        "borderBottomWidth": 0.6,
+                                                        "borderColor": "#2E2E2E",
                                                       },
+                                                      undefined,
+                                                      null,
                                                     ]
                                                   }
                                                 >
-                                                  Sign Up
-                                                </Text>
+                                                  <Text
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "color": "#b9b9c4",
+                                                          "fontSize": 14,
+                                                          "fontWeight": "bold",
+                                                        },
+                                                        undefined,
+                                                        null,
+                                                        Object {
+                                                          "width": 110,
+                                                        },
+                                                      ]
+                                                    }
+                                                  >
+                                                    Email
+                                                  </Text>
+                                                  <TextInput
+                                                    allowFontScaling={true}
+                                                    autoCapitalize="none"
+                                                    placeholder="hello@example.com"
+                                                    placeholderTextColor="#676c7a"
+                                                    rejectResponderTermination={true}
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "color": "#2c374e",
+                                                          "flexBasis": 0,
+                                                          "flexGrow": 1,
+                                                          "flexShrink": 1,
+                                                          "fontSize": 14,
+                                                          "fontWeight": "bold",
+                                                          "height": "100%",
+                                                          "paddingBottom": 16,
+                                                          "paddingTop": 16,
+                                                        },
+                                                        Object {
+                                                          "color": "#151A25",
+                                                        },
+                                                        Object {
+                                                          "textAlign": "right",
+                                                        },
+                                                      ]
+                                                    }
+                                                    testID="input-email"
+                                                    underlineColorAndroid="transparent"
+                                                    value=""
+                                                  />
+                                                </View>
                                               </View>
-                                            </TouchableOpacity>
-                                            <View
-                                              style={
-                                                Object {
-                                                  "width": 20,
-                                                }
-                                              }
-                                            />
-                                            <TouchableOpacity
-                                              activeOpacity={0.2}
-                                              style={
-                                                Object {
-                                                  "backgroundColor": "#1E6EFA",
-                                                  "flex": 1,
-                                                  "flexDirection": "row",
-                                                  "height": 52,
-                                                  "justifyContent": "center",
-                                                }
-                                              }
-                                              testID="btn-sign-in"
-                                            >
                                               <View
                                                 style={
                                                   Array [
                                                     Object {
-                                                      "alignItems": "center",
-                                                      "alignSelf": "center",
-                                                      "borderColor": "blue",
-                                                      "flexDirection": "row",
-                                                      "height": 52,
-                                                      "justifyContent": "center",
+                                                      "alignSelf": "stretch",
+                                                      "flexDirection": "column",
+                                                    },
+                                                    Object {
+                                                      "marginBottom": 20,
                                                     },
                                                   ]
                                                 }
                                               >
-                                                <Text
+                                                <View
                                                   style={
                                                     Array [
                                                       Object {
-                                                        "color": "#069ccd",
-                                                        "fontSize": 16,
+                                                        "alignItems": "center",
+                                                        "flexDirection": "row",
+                                                        "justifyContent": "space-between",
+                                                        "width": "100%",
                                                       },
                                                       Object {
-                                                        "color": "#ffffff",
-                                                        "fontSize": 14,
-                                                        "fontWeight": "bold",
+                                                        "borderBottomWidth": 0.6,
+                                                        "borderColor": "#2E2E2E",
                                                       },
+                                                      undefined,
+                                                      null,
                                                     ]
                                                   }
                                                 >
-                                                  Login
-                                                </Text>
+                                                  <Text
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "color": "#b9b9c4",
+                                                          "fontSize": 14,
+                                                          "fontWeight": "bold",
+                                                        },
+                                                        undefined,
+                                                        null,
+                                                        Object {
+                                                          "width": 110,
+                                                        },
+                                                      ]
+                                                    }
+                                                  >
+                                                    Password
+                                                  </Text>
+                                                  <TextInput
+                                                    allowFontScaling={true}
+                                                    autoCapitalize="none"
+                                                    placeholder="******"
+                                                    placeholderTextColor="#676c7a"
+                                                    rejectResponderTermination={true}
+                                                    secureTextEntry={true}
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "color": "#2c374e",
+                                                          "flexBasis": 0,
+                                                          "flexGrow": 1,
+                                                          "flexShrink": 1,
+                                                          "fontSize": 14,
+                                                          "fontWeight": "bold",
+                                                          "height": "100%",
+                                                          "paddingBottom": 16,
+                                                          "paddingTop": 16,
+                                                        },
+                                                        Object {
+                                                          "color": "#151A25",
+                                                        },
+                                                        Object {
+                                                          "textAlign": "right",
+                                                        },
+                                                      ]
+                                                    }
+                                                    testID="input-password"
+                                                    underlineColorAndroid="transparent"
+                                                    value=""
+                                                  />
+                                                </View>
                                               </View>
-                                            </TouchableOpacity>
-                                          </View>
-                                          <TouchableOpacity
-                                            activeOpacity={0.2}
-                                            style={
-                                              Array [
-                                                Object {
-                                                  "alignSelf": "center",
-                                                  "marginBottom": 44,
-                                                  "paddingBottom": 20,
-                                                  "paddingLeft": 20,
-                                                  "paddingRight": 20,
-                                                  "paddingTop": 20,
-                                                },
-                                              ]
-                                            }
-                                            testID="btn-find-pw"
-                                          >
-                                            <Text
-                                              style={
-                                                Array [
-                                                  Object {
-                                                    "color": "#1E6EFA",
-                                                    "textDecorationLine": "underline",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              Forgot password?
-                                            </Text>
-                                          </TouchableOpacity>
-                                          <View
-                                            style={
-                                              Array [
-                                                Object {
-                                                  "marginBottom": 24,
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <TouchableOpacity
-                                              activeOpacity={0.2}
-                                              testID="btn-apple"
-                                            >
                                               <View
                                                 style={
                                                   Array [
                                                     Object {
-                                                      "alignItems": "center",
-                                                      "alignSelf": "center",
-                                                      "borderColor": "blue",
                                                       "flexDirection": "row",
-                                                      "height": 52,
-                                                      "justifyContent": "center",
-                                                    },
-                                                    Object {
-                                                      "backgroundColor": "#ffffff",
-                                                      "borderColor": "#151E22",
-                                                      "borderWidth": 1,
-                                                      "height": 48,
-                                                      "marginBottom": 6,
+                                                      "marginTop": 12,
                                                       "width": "100%",
                                                     },
                                                   ]
                                                 }
                                               >
+                                                <TouchableOpacity
+                                                  activeOpacity={0.2}
+                                                  style={
+                                                    Object {
+                                                      "flex": 1,
+                                                      "flexDirection": "row",
+                                                      "height": 52,
+                                                      "justifyContent": "center",
+                                                    }
+                                                  }
+                                                  testID="btn-sign-up"
+                                                >
+                                                  <View
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "alignItems": "center",
+                                                          "alignSelf": "center",
+                                                          "borderColor": "blue",
+                                                          "flexDirection": "row",
+                                                          "height": 52,
+                                                          "justifyContent": "center",
+                                                        },
+                                                        Object {
+                                                          "backgroundColor": "#ffffff",
+                                                          "borderColor": "#1E6EFA",
+                                                          "borderWidth": 1,
+                                                          "width": "100%",
+                                                        },
+                                                      ]
+                                                    }
+                                                  >
+                                                    <Text
+                                                      style={
+                                                        Array [
+                                                          Object {
+                                                            "color": "#069ccd",
+                                                            "fontSize": 16,
+                                                          },
+                                                          Object {
+                                                            "color": "#1E6EFA",
+                                                            "fontSize": 14,
+                                                            "fontWeight": "bold",
+                                                          },
+                                                        ]
+                                                      }
+                                                    >
+                                                      Sign Up
+                                                    </Text>
+                                                  </View>
+                                                </TouchableOpacity>
                                                 <View
                                                   style={
                                                     Object {
-                                                      "marginRight": 6,
+                                                      "width": 20,
                                                     }
                                                   }
+                                                />
+                                                <TouchableOpacity
+                                                  activeOpacity={0.2}
+                                                  style={
+                                                    Object {
+                                                      "backgroundColor": "#1E6EFA",
+                                                      "flex": 1,
+                                                      "flexDirection": "row",
+                                                      "height": 52,
+                                                      "justifyContent": "center",
+                                                    }
+                                                  }
+                                                  testID="btn-sign-in"
                                                 >
-                                                  <SvgMock
-                                                    fill="#151E22"
-                                                    width={24}
-                                                  />
-                                                </View>
+                                                  <View
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "alignItems": "center",
+                                                          "alignSelf": "center",
+                                                          "borderColor": "blue",
+                                                          "flexDirection": "row",
+                                                          "height": 52,
+                                                          "justifyContent": "center",
+                                                        },
+                                                      ]
+                                                    }
+                                                  >
+                                                    <Text
+                                                      style={
+                                                        Array [
+                                                          Object {
+                                                            "color": "#069ccd",
+                                                            "fontSize": 16,
+                                                          },
+                                                          Object {
+                                                            "color": "#ffffff",
+                                                            "fontSize": 14,
+                                                            "fontWeight": "bold",
+                                                          },
+                                                        ]
+                                                      }
+                                                    >
+                                                      Login
+                                                    </Text>
+                                                  </View>
+                                                </TouchableOpacity>
+                                              </View>
+                                              <TouchableOpacity
+                                                activeOpacity={0.2}
+                                                style={
+                                                  Array [
+                                                    Object {
+                                                      "alignSelf": "center",
+                                                      "marginBottom": 44,
+                                                      "paddingBottom": 20,
+                                                      "paddingLeft": 20,
+                                                      "paddingRight": 20,
+                                                      "paddingTop": 20,
+                                                    },
+                                                  ]
+                                                }
+                                                testID="btn-find-pw"
+                                              >
                                                 <Text
                                                   style={
                                                     Array [
                                                       Object {
-                                                        "color": "#069ccd",
-                                                        "fontSize": 16,
-                                                      },
-                                                      Object {
-                                                        "color": "#151E22",
-                                                        "fontWeight": "700",
+                                                        "color": "#1E6EFA",
+                                                        "textDecorationLine": "underline",
                                                       },
                                                     ]
                                                   }
                                                 >
-                                                  Sign in with Apple
+                                                  Forgot password?
                                                 </Text>
+                                              </TouchableOpacity>
+                                              <View
+                                                style={
+                                                  Array [
+                                                    Object {
+                                                      "marginBottom": 24,
+                                                    },
+                                                  ]
+                                                }
+                                              >
+                                                <TouchableOpacity
+                                                  activeOpacity={0.2}
+                                                  testID="btn-apple"
+                                                >
+                                                  <View
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "alignItems": "center",
+                                                          "alignSelf": "center",
+                                                          "borderColor": "blue",
+                                                          "flexDirection": "row",
+                                                          "height": 52,
+                                                          "justifyContent": "center",
+                                                        },
+                                                        Object {
+                                                          "backgroundColor": "#ffffff",
+                                                          "borderColor": "#151E22",
+                                                          "borderWidth": 1,
+                                                          "height": 48,
+                                                          "marginBottom": 6,
+                                                          "width": "100%",
+                                                        },
+                                                      ]
+                                                    }
+                                                  >
+                                                    <View
+                                                      style={
+                                                        Object {
+                                                          "marginRight": 6,
+                                                        }
+                                                      }
+                                                    >
+                                                      <SvgMock
+                                                        fill="#151E22"
+                                                        width={24}
+                                                      />
+                                                    </View>
+                                                    <Text
+                                                      style={
+                                                        Array [
+                                                          Object {
+                                                            "color": "#069ccd",
+                                                            "fontSize": 16,
+                                                          },
+                                                          Object {
+                                                            "color": "#151E22",
+                                                            "fontWeight": "700",
+                                                          },
+                                                        ]
+                                                      }
+                                                    >
+                                                      Sign in with Apple
+                                                    </Text>
+                                                  </View>
+                                                </TouchableOpacity>
+                                                <TouchableOpacity
+                                                  activeOpacity={0.2}
+                                                  testID="btn-facebook"
+                                                >
+                                                  <View
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "alignItems": "center",
+                                                          "alignSelf": "center",
+                                                          "borderColor": "blue",
+                                                          "flexDirection": "row",
+                                                          "height": 52,
+                                                          "justifyContent": "center",
+                                                        },
+                                                        Object {
+                                                          "backgroundColor": "#345997",
+                                                          "borderColor": "#345997",
+                                                          "borderWidth": 1,
+                                                          "height": 48,
+                                                          "marginBottom": 6,
+                                                          "width": "100%",
+                                                        },
+                                                      ]
+                                                    }
+                                                  >
+                                                    <View
+                                                      style={
+                                                        Object {
+                                                          "marginRight": 6,
+                                                        }
+                                                      }
+                                                    >
+                                                      <SvgMock
+                                                        fill="#ffffff"
+                                                        width={24}
+                                                      />
+                                                    </View>
+                                                    <Text
+                                                      style={
+                                                        Array [
+                                                          Object {
+                                                            "color": "#069ccd",
+                                                            "fontSize": 16,
+                                                          },
+                                                          Object {
+                                                            "color": "#ffffff",
+                                                            "fontWeight": "700",
+                                                          },
+                                                        ]
+                                                      }
+                                                    >
+                                                      Sign in with Facebook
+                                                    </Text>
+                                                  </View>
+                                                </TouchableOpacity>
+                                                <TouchableOpacity
+                                                  activeOpacity={0.2}
+                                                  testID="btn-google"
+                                                >
+                                                  <View
+                                                    style={
+                                                      Array [
+                                                        Object {
+                                                          "alignItems": "center",
+                                                          "alignSelf": "center",
+                                                          "borderColor": "blue",
+                                                          "flexDirection": "row",
+                                                          "height": 52,
+                                                          "justifyContent": "center",
+                                                        },
+                                                        Object {
+                                                          "backgroundColor": "#E04238",
+                                                          "borderColor": "#E04238",
+                                                          "borderWidth": 1,
+                                                          "height": 48,
+                                                          "width": "100%",
+                                                        },
+                                                      ]
+                                                    }
+                                                  >
+                                                    <View
+                                                      style={
+                                                        Object {
+                                                          "marginRight": 6,
+                                                        }
+                                                      }
+                                                    >
+                                                      <SvgMock
+                                                        fill="#ffffff"
+                                                        width={24}
+                                                      />
+                                                    </View>
+                                                    <Text
+                                                      style={
+                                                        Array [
+                                                          Object {
+                                                            "color": "#069ccd",
+                                                            "fontSize": 16,
+                                                          },
+                                                          Object {
+                                                            "color": "#ffffff",
+                                                            "fontWeight": "700",
+                                                          },
+                                                        ]
+                                                      }
+                                                    >
+                                                      Sign in with Google
+                                                    </Text>
+                                                  </View>
+                                                </TouchableOpacity>
                                               </View>
-                                            </TouchableOpacity>
-                                            <TouchableOpacity
-                                              activeOpacity={0.2}
-                                              testID="btn-facebook"
-                                            >
                                               <View
                                                 style={
                                                   Array [
                                                     Object {
-                                                      "alignItems": "center",
-                                                      "alignSelf": "center",
-                                                      "borderColor": "blue",
                                                       "flexDirection": "row",
-                                                      "height": 52,
+                                                      "flexWrap": "wrap",
                                                       "justifyContent": "center",
-                                                    },
-                                                    Object {
-                                                      "backgroundColor": "#345997",
-                                                      "borderColor": "#345997",
-                                                      "borderWidth": 1,
-                                                      "height": 48,
-                                                      "marginBottom": 6,
-                                                      "width": "100%",
+                                                      "paddingBottom": 40,
+                                                      "paddingLeft": 0,
+                                                      "paddingRight": 0,
+                                                      "paddingTop": 0,
                                                     },
                                                   ]
                                                 }
                                               >
-                                                <View
+                                                <Text
                                                   style={
-                                                    Object {
-                                                      "marginRight": 6,
-                                                    }
+                                                    Array [
+                                                      Object {
+                                                        "color": "#777",
+                                                        "lineHeight": 22,
+                                                      },
+                                                    ]
                                                   }
                                                 >
-                                                  <SvgMock
-                                                    fill="#ffffff"
-                                                    width={24}
-                                                  />
-                                                </View>
+                                                  We consider that you agree with 
+                                                </Text>
                                                 <Text
                                                   style={
                                                     Array [
                                                       Object {
-                                                        "color": "#069ccd",
-                                                        "fontSize": 16,
-                                                      },
-                                                      Object {
-                                                        "color": "#ffffff",
-                                                        "fontWeight": "700",
+                                                        "color": "#1E6EFA",
+                                                        "lineHeight": 22,
+                                                        "textDecorationLine": "underline",
                                                       },
                                                     ]
                                                   }
+                                                  testID="btn-terms"
                                                 >
-                                                  Sign in with Facebook
+                                                  Terms for Agreement
                                                 </Text>
-                                              </View>
-                                            </TouchableOpacity>
-                                            <TouchableOpacity
-                                              activeOpacity={0.2}
-                                              testID="btn-google"
-                                            >
-                                              <View
-                                                style={
-                                                  Array [
-                                                    Object {
-                                                      "alignItems": "center",
-                                                      "alignSelf": "center",
-                                                      "borderColor": "blue",
-                                                      "flexDirection": "row",
-                                                      "height": 52,
-                                                      "justifyContent": "center",
-                                                    },
-                                                    Object {
-                                                      "backgroundColor": "#E04238",
-                                                      "borderColor": "#E04238",
-                                                      "borderWidth": 1,
-                                                      "height": 48,
-                                                      "width": "100%",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <View
+                                                <Text
                                                   style={
-                                                    Object {
-                                                      "marginRight": 6,
-                                                    }
+                                                    Array [
+                                                      Object {
+                                                        "color": "#777",
+                                                        "lineHeight": 22,
+                                                      },
+                                                    ]
                                                   }
                                                 >
-                                                  <SvgMock
-                                                    fill="#ffffff"
-                                                    width={24}
-                                                  />
-                                                </View>
+                                                   and 
+                                                </Text>
                                                 <Text
                                                   style={
                                                     Array [
                                                       Object {
-                                                        "color": "#069ccd",
-                                                        "fontSize": 16,
+                                                        "color": "#1E6EFA",
+                                                        "lineHeight": 22,
+                                                        "textDecorationLine": "underline",
                                                       },
+                                                    ]
+                                                  }
+                                                  testID="btn-privacy"
+                                                >
+                                                  Privacy Policy
+                                                </Text>
+                                                <Text
+                                                  style={
+                                                    Array [
                                                       Object {
-                                                        "color": "#ffffff",
-                                                        "fontWeight": "700",
+                                                        "color": "#777",
+                                                        "lineHeight": 22,
                                                       },
                                                     ]
                                                   }
                                                 >
-                                                  Sign in with Google
+                                                   by going onto next step.
                                                 </Text>
                                               </View>
-                                            </TouchableOpacity>
-                                          </View>
-                                          <View
-                                            style={
-                                              Array [
-                                                Object {
-                                                  "flexDirection": "row",
-                                                  "flexWrap": "wrap",
-                                                  "justifyContent": "center",
-                                                  "paddingBottom": 40,
-                                                  "paddingLeft": 0,
-                                                  "paddingRight": 0,
-                                                  "paddingTop": 0,
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <Text
-                                              style={
-                                                Array [
-                                                  Object {
-                                                    "color": "#777",
-                                                    "lineHeight": 22,
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              We consider that you agree with 
-                                            </Text>
-                                            <Text
-                                              style={
-                                                Array [
-                                                  Object {
-                                                    "color": "#1E6EFA",
-                                                    "lineHeight": 22,
-                                                    "textDecorationLine": "underline",
-                                                  },
-                                                ]
-                                              }
-                                              testID="btn-terms"
-                                            >
-                                              Terms for Agreement
-                                            </Text>
-                                            <Text
-                                              style={
-                                                Array [
-                                                  Object {
-                                                    "color": "#777",
-                                                    "lineHeight": 22,
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                               and 
-                                            </Text>
-                                            <Text
-                                              style={
-                                                Array [
-                                                  Object {
-                                                    "color": "#1E6EFA",
-                                                    "lineHeight": 22,
-                                                    "textDecorationLine": "underline",
-                                                  },
-                                                ]
-                                              }
-                                              testID="btn-privacy"
-                                            >
-                                              Privacy Policy
-                                            </Text>
-                                            <Text
-                                              style={
-                                                Array [
-                                                  Object {
-                                                    "color": "#777",
-                                                    "lineHeight": 22,
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                               by going onto next step.
-                                            </Text>
-                                          </View>
-                                        </View>
-                                      </ScrollView>
-                                    </SafeAreaView>
+                                            </View>
+                                          </ScrollView>
+                                        </SafeAreaView>
+                                      </View>
+                                    </View>
                                   </View>
                                 </View>
                               </View>
                             </View>
                           </View>
                         </View>
-                      </View>
-                    </View>
-                    <View
-                      pointerEvents="box-none"
-                      style={
-                        Object {
-                          "left": 0,
-                          "position": "absolute",
-                          "right": 0,
-                          "top": 0,
-                        }
-                      }
-                    >
-                      <View
-                        accessibilityElementsHidden={false}
-                        importantForAccessibility="auto"
-                        pointerEvents="box-none"
-                        style={
-                          Object {
-                            "left": 0,
-                            "position": "absolute",
-                            "right": 0,
-                            "top": 0,
+                        <View
+                          pointerEvents="box-none"
+                          style={
+                            Object {
+                              "left": 0,
+                              "position": "absolute",
+                              "right": 0,
+                              "top": 0,
+                            }
                           }
-                        }
-                      />
+                        >
+                          <View
+                            accessibilityElementsHidden={false}
+                            importantForAccessibility="auto"
+                            pointerEvents="box-none"
+                            style={
+                              Object {
+                                "left": 0,
+                                "position": "absolute",
+                                "right": 0,
+                                "top": 0,
+                              }
+                            }
+                          />
+                        </View>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -1019,21 +1035,7 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
           </View>
         </View>
       </View>
-    </View>
-    <View
-      pointerEvents="box-none"
-      style={
-        Object {
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    >
       <View
-        accessibilityElementsHidden={false}
-        importantForAccessibility="auto"
         pointerEvents="box-none"
         style={
           Object {
@@ -1043,8 +1045,22 @@ exports[`[Stack] navigator should renders without crashing 1`] = `
             "top": 0,
           }
         }
-      />
-    </View>
-  </RNCSafeAreaView>
+      >
+        <View
+          accessibilityElementsHidden={false}
+          importantForAccessibility="auto"
+          pointerEvents="box-none"
+          style={
+            Object {
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        />
+      </View>
+    </RNCSafeAreaView>
+  </View>
 </View>
 `;
diff --git a/yarn.lock b/yarn.lock
index 3c1a9d82c..0f0aa03da 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1706,23 +1706,12 @@
     shortid "^2.2.15"
     use-subscription "^1.3.0"
 
-"@react-navigation/core@^5.0.0-alpha.37":
-  version "5.0.0-alpha.37"
-  resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-5.0.0-alpha.37.tgz#0e91dc2f1d46d646a5d63f882dc3c18a9e74a2cf"
-  integrity sha512-lTk7yx9jqzK3+yRxX+yz8v+1uw9aOaX1LfQFPpgwyJUAjQdZU9qqigSd/qZHtaOSg5XCOacjO+G4Qk9/hNp+Ag==
-  dependencies:
-    escape-string-regexp "^2.0.0"
-    query-string "^6.9.0"
-    react-is "^16.12.0"
-    shortid "^2.2.15"
-    use-subscription "^1.3.0"
-
-"@react-navigation/material-top-tabs@^5.0.0-alpha.35":
-  version "5.0.0-alpha.35"
-  resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.0.0-alpha.35.tgz#4f3ee2c3a5ec2879104cf04c6e7663978c6df2de"
-  integrity sha512-IyWGNrUQjOQXgvcxDvMLymeWCVjZG0WFiIVyDi+Rexfz/PLzc4qu+YU4TVmZ07rMa84NM5MBdLjlw/wzGbSmcA==
+"@react-navigation/material-top-tabs@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.0.0.tgz#71b111d820e15a5db622cce40bcfc65329076d9e"
+  integrity sha512-5tU6R5YAUvK1ENxdGzb9KCuW9scgf56uVo72no66n0WTJPG/QWSTrTWTLkHIGpJT88XJIX8zzAzBxWW5COsH8A==
   dependencies:
-    "@react-navigation/routers" "^5.0.0-alpha.27"
+    "@react-navigation/routers" "^5.0.0"
     color "^3.1.2"
 
 "@react-navigation/native@^5.0.0":
@@ -1732,20 +1721,20 @@
   dependencies:
     "@react-navigation/core" "^5.0.0"
 
-"@react-navigation/routers@^5.0.0-alpha.27":
-  version "5.0.0-alpha.27"
-  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.0.0-alpha.27.tgz#ff2ce1e8d23b0668824da69ae92df0ab8f96bf45"
-  integrity sha512-uTAbElgQh3M6VhAIo/5OspUPgIbaugONKY4tOKS1GSwo3nas9TFbMDiJ9MaWN/Hjke4164hg3QLhEDEo6uev9A==
+"@react-navigation/routers@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/routers/-/routers-5.0.0.tgz#3337dd437bb155581715875ab9eb3e0db14108ef"
+  integrity sha512-FVjYTCASs52bQJO6Y54GpRAVWABiePfPvVFohRmkpXbSFB46CCTRtAndDZPWt1UwWIm0JedWJigD9IXB66KBjw==
   dependencies:
-    "@react-navigation/core" "^5.0.0-alpha.37"
+    "@react-navigation/core" "^5.0.0"
     shortid "^2.2.15"
 
-"@react-navigation/stack@^5.0.0-alpha.63":
-  version "5.0.0-alpha.63"
-  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.0.0-alpha.63.tgz#a1005f0573137c704eeef3ee17158a80bc977d5b"
-  integrity sha512-i9rPFtvda5aUsxakr6+K531AalaF85iksgG9NAdV3UHoOqha/Exh7TCOBBzGe60qgv1PY1X/7gSsbaaXmJGlGQ==
+"@react-navigation/stack@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.0.0.tgz#2f6c3d0de2ff3e5f5773142e8ed237c6c77c8fad"
+  integrity sha512-pOJARONdS0g4q32cB8LOAdTUv+mUNDXgbff9gx/etycFRzon7qtQuyAE7U2+CIBB/NJkqFXG64B2nBYdfEq7rQ==
   dependencies:
-    "@react-navigation/routers" "^5.0.0-alpha.27"
+    "@react-navigation/routers" "^5.0.0"
     color "^3.1.2"
     react-native-iphone-x-helper "^1.2.1"