__tests__/activity/components/__snapshots__/Actions.js.snap

@@ -144,6 +144,7 @@ exports[`Activity component renders correctly 1`] = `
           },
         }
       }
+      testID=""
     />
     <RemindAction
       entity={

__tests__/activity/components/__snapshots__/Activity.js.snap

@@ -14,6 +14,7 @@ exports[`Activity component renders correctly 1`] = `
       },
     ]
   }
+  testID="ActivityView"
 >
   <Pinned
     entity={
@@ -217,6 +218,7 @@ exports[`Activity component renders correctly 1`] = `
             }
           }
           onTranslate={[Function]}
+          testID=""
           toggleEdit={[Function]}
         />
       </View>

__tests__/activity/components/__snapshots__/RemindOwnerBlock.js.snap

@@ -13,12 +13,9 @@ exports[`Remind owner component renders correctly 1`] = `
     }
   }
 >
-  <Icon
+  <Themed.Icon
     color="rgb(70, 144, 214)"
     name="repeat"
-    raised={false}
-    reverse={false}
-    reverseColor="white"
     size={16}
     style={
       Object {
@@ -26,7 +23,6 @@ exports[`Remind owner component renders correctly 1`] = `
         "marginRight": 8,
       }
     }
-    underlayColor="white"
   />
   <TouchableOpacity
     activeOpacity={0.2}

__tests__/auth/ForgotPassword.js

 import 'react-native';
 import React from 'react';
 import { shallow } from 'enzyme';
+import { Button } from 'react-native-elements';
 
 import ForgotPassword from '../../src/auth/ForgotPassword';
 import authService from '../../src/auth/AuthService';
-
 jest.mock('../../src/auth/AuthService');
 
 // Note: test renderer must be required after react-native.
@@ -37,7 +37,7 @@ describe('ForgotPassword component', () => {
     });
 
     // press send
-    await render.find('Button').at(1).simulate('press');
+    await render.find(Button).at(1).simulate('press');
 
     // expect auth service login to be called once
     expect(authService.forgot).toBeCalled();
@@ -57,7 +57,7 @@ describe('ForgotPassword component', () => {
     const render = wrapper.dive();
 
     // press go back
-    await render.find('Button').at(0).simulate('press');
+    await render.find(Button).at(0).simulate('press');
 
     // expect onLogin to be called once
     expect(mockFn).toBeCalled();

__tests__/auth/LoginForm.js

@@ -2,6 +2,7 @@ import 'react-native';
 import React from 'react';
 import { Text, TouchableOpacity } from "react-native";
 import { shallow } from 'enzyme';
+import { Button } from 'react-native-elements';
 
 import LoginForm from '../../src/auth/LoginForm';
 import authService from '../../src/auth/AuthService';
@@ -41,7 +42,7 @@ describe('LoginForm component', () => {
     });
 
     // press login
-    await render.find('Button').at(1).simulate('press');
+    await render.find(Button).at(1).simulate('press');
 
     // check state
     expect(wrapper.state().password).toEqual('data');

__tests__/auth/RegisterForm.js

@@ -2,6 +2,7 @@ import 'react-native';
 import React from 'react';
 import { Alert } from "react-native";
 import { shallow } from 'enzyme';
+import { Button, CheckBox } from 'react-native-elements';
 
 import RegisterForm from '../../src/auth/RegisterForm';
 import authService from '../../src/auth/AuthService';
@@ -45,7 +46,7 @@ describe('RegisterForm component', () => {
     let inputs = render.find('TextInput');
 
     // should have 4 inputs
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(4);
 
     // simulate user input
     inputs.at(0).simulate('changeText', 'myFancyUsername');
@@ -53,7 +54,7 @@ describe('RegisterForm component', () => {
     inputs.at(2).simulate('changeText', 'somepassword');
 
     // simulate press checkbox
-    await render.find('CheckBox').at(1).simulate('press');
+    await render.find(CheckBox).at(1).simulate('press');
 
     // update component (password confirmation is shown after the password field is set)
     await wrapper.update();
@@ -65,7 +66,7 @@ describe('RegisterForm component', () => {
     inputs.at(3).simulate('changeText', 'somepassword');
 
     // simulate press register
-    await render.find('Button').at(1).simulate('press');
+    await render.find(Button).at(1).simulate('press');
 
     // expect auth service register to be called once
     expect(authService.register).toBeCalled();
@@ -83,8 +84,7 @@ describe('RegisterForm component', () => {
     // find the text inputs
     let inputs = render.find('TextInput');
 
-    // should have 4 inputs
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(4);
 
     // simulate user input
     inputs.at(0).simulate('changeText', 'myFancyUsername');
@@ -100,7 +100,7 @@ describe('RegisterForm component', () => {
     inputs.at(3).simulate('changeText', 'ohNoItIsDifferent');
 
     // simulate press register
-    await render.find('Button').at(1).simulate('press');
+    await render.find(Button).at(1).simulate('press');
 
     // should call alert
     expect(Alert.alert).toBeCalled();
@@ -122,7 +122,7 @@ describe('RegisterForm component', () => {
     let inputs = render.find('TextInput');
 
     // should have 4 inputs
-    expect(inputs.length).toBe(3);
+    expect(inputs.length).toBe(4);
 
     // simulate user input
     inputs.at(0).simulate('changeText', 'myFancyUsername');
@@ -138,7 +138,7 @@ describe('RegisterForm component', () => {
     inputs.at(3).simulate('changeText', 'somepassword');
 
     // simulate press register
-    await render.find('Button').at(1).simulate('press');
+    await render.find(Button).at(1).simulate('press');
 
     // should call alert
     expect(Alert.alert).toBeCalled();

__tests__/auth/RegisterFormNew.js

+import 'react-native';
+import React from 'react';
+import { Alert } from "react-native";
+import { shallow } from 'enzyme';
+
+import RegisterFormNew from '../../src/auth/RegisterFormNew';
+import authService from '../../src/auth/AuthService';
+
+jest.mock('../../src/auth/AuthService');
+jest.mock('../../src/auth/UserStore');
+
+Alert.alert = jest.fn();
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+import UserStore from '../../src/auth/UserStore';
+
+describe('RegisterFormNew component', () => {
+  beforeEach(() => {
+    authService.register.mockClear();
+    Alert.alert.mockClear();
+  });
+
+  it('should renders correctly', () => {
+    const userStore = new UserStore();
+    const registerForm = renderer.create(
+      <RegisterFormNew user={userStore}/>
+    ).toJSON();
+    expect(registerForm).toMatchSnapshot();
+  });
+
+  it('should call auth services register', async () => {
+
+    authService.register.mockResolvedValue();
+
+    const userStore = new UserStore();
+
+    const wrapper = shallow(
+      <RegisterFormNew user={userStore}/>
+    );
+
+    const render = wrapper.dive();
+
+    // find the text inputs
+    let inputs = render.find('TextInput');
+
+    // should have 4 inputs
+    expect(inputs.length).toBe(3);
+
+    // simulate user input
+    inputs.at(0).simulate('changeText', 'myFancyUsername');
+    inputs.at(1).simulate('changeText', 'my@mail.com');
+    inputs.at(2).simulate('changeText', 'somepassword');
+
+    // simulate press checkbox
+    await render.find('CheckBox').at(0).simulate('press');
+
+    // update component (password confirmation is shown after the password field is set)
+    await wrapper.update();
+
+    // update the inputs search
+    inputs = render.find('TextInput');
+
+    // simulate user input for paddword confirmation
+    inputs.at(3).simulate('changeText', 'somepassword');
+
+    // simulate press register
+    await render.find('Button').at(0).simulate('press');
+
+    // expect auth service register to be called once
+    expect(authService.register).toBeCalled();
+  });
+
+  it('should warn the user if the password confirmation is different', async () => {
+    const userStore = new UserStore();
+
+    const wrapper = shallow(
+      <RegisterFormNew user={userStore}/>
+    );
+
+    const render = wrapper.dive();
+
+    // find the text inputs
+    let inputs = render.find('TextInput');
+
+    // should have 4 inputs
+    expect(inputs.length).toBe(3);
+
+    // simulate user input
+    inputs.at(0).simulate('changeText', 'myFancyUsername');
+    inputs.at(1).simulate('changeText', 'my@mail.com');
+    inputs.at(2).simulate('changeText', 'somepassword');
+    // update component (password confirmation is shown after the password field is set)
+    await wrapper.update();
+
+    // update the inputs search
+    inputs = render.find('TextInput');
+
+    // simulate user input for paddword confirmation
+    inputs.at(3).simulate('changeText', 'ohNoItIsDifferent');
+
+    // simulate press register
+    await render.find('Button').at(0).simulate('press');
+
+    // should call alert
+    expect(Alert.alert).toBeCalled();
+
+    // with error message
+    expect(Alert.alert.mock.calls[0][1]).toEqual('You should accept the terms and conditions');
+  });
+
+  it('should warn the user if the terms and conditions are not accepted', async () => {
+    const userStore = new UserStore();
+
+    const wrapper = shallow(
+      <RegisterFormNew user={userStore}/>
+    );
+
+    const render = wrapper.dive();
+
+    // find the text inputs
+    let inputs = render.find('TextInput');
+
+    // should have 4 inputs
+    expect(inputs.length).toBe(3);
+
+    // simulate user input
+    inputs.at(0).simulate('changeText', 'myFancyUsername');
+    inputs.at(1).simulate('changeText', 'my@mail.com');
+    inputs.at(2).simulate('changeText', 'somepassword');
+    // update component (password confirmation is shown after the password field is set)
+    await wrapper.update();
+
+    // update the inputs search
+    inputs = render.find('TextInput');
+
+    // simulate user input for paddword confirmation
+    inputs.at(3).simulate('changeText', 'somepassword');
+
+    // simulate press register
+    await render.find('Button').at(0).simulate('press');
+
+    // should call alert
+    expect(Alert.alert).toBeCalled();
+
+    // with error message
+    expect(Alert.alert.mock.calls[0][1]).toEqual('You should accept the terms and conditions');
+  });
+});

__tests__/auth/RegisterScreenNew.js

+import 'react-native';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import RegisterScreenNew from '../../src/auth/RegisterScreenNew';
+
+jest.mock('../../src/auth/RegisterFormNew', () => 'RegisterFormNew');
+jest.mock('../../src/common/components/VideoBackground', () => 'VideoBackground');
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+describe('RegisterScreenNew component', () => {
+  it('should renders correctly', () => {
+    const loginScreen = renderer.create(
+      <RegisterScreenNew />
+    ).toJSON();
+    expect(loginScreen).toMatchSnapshot();
+  });
+
+  it('should shows register form component', async () => {
+    const wrapper = shallow(
+      <RegisterScreenNew />
+    );
+
+    // find register form
+    const registerForms = wrapper.find('RegisterFormNew');
+
+    // should contain 1 login form
+    expect(registerForms.length).toBe(1);
+  });
+
+  it('should navigate on RegisterFormNew events', async () => {
+
+    const navigation = {
+      dispatch: jest.fn(),
+      navigate: jest.fn(),
+    };
+
+    const wrapper = shallow(
+      <RegisterScreenNew navigation={navigation}/>
+    );
+
+    // find register form
+    const registerForms = wrapper.find('RegisterFormNew');
+
+    // should contain 1 login form
+    expect(registerForms.length).toBe(1);
+
+    // simulate onBack event
+    registerForms.at(0).props().onBack();
+
+    // with a navigation action with route to Login
+    expect(navigation.navigate).toBeCalledWith('Login');
+  });
+});

__tests__/auth/__snapshots__/ForgotPassword.js.snap

@@ -66,23 +66,14 @@ exports[`ForgotPassword component should renders correctly 1`] = `
   >
     <View
       style={
-        Array [
-          Object {
-            "marginLeft": 15,
-            "marginRight": 15,
-          },
-          undefined,
-          Object {
-            "backgroundColor": "transparent",
-            "borderColor": "#FFF",
-            "borderWidth": 1,
-            "marginLeft": 10,
-            "marginRight": 0,
-          },
-          Object {
-            "borderRadius": 4,
-          },
-        ]
+        Object {
+          "backgroundColor": "transparent",
+          "borderColor": "#FFF",
+          "borderRadius": 30,
+          "borderWidth": 1,
+          "marginLeft": 10,
+          "marginRight": 0,
+        }
       }
     >
       <View
@@ -96,75 +87,37 @@ exports[`ForgotPassword component should renders correctly 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
-        style={null}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
       >
         <View
-          pointerEvents="box-only"
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#9E9E9E",
-                "flexDirection": "row",
-                "justifyContent": "center",
-                "padding": 19,
-              },
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              Object {
-                "backgroundColor": "rgba(0,0,0, 0.5)",
-              },
-              Object {
-                "borderRadius": 4,
-              },
-              Object {
-                "padding": 12,
-              },
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-            ]
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "transparent",
+              "borderColor": "#2089dc",
+              "borderRadius": 3,
+              "borderWidth": 0,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "padding": 8,
+            }
           }
         >
           <Text
             style={
-              Array [
-                Object {},
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                Array [
-                  Object {
-                    "color": "white",
-                    "fontSize": 20,
-                  },
-                  undefined,
-                  Object {
-                    "fontSize": 17.5,
-                  },
-                  undefined,
-                  Object {
-                    "fontSize": 16,
-                    "fontWeight": "600",
-                    "letterSpacing": 1.25,
-                  },
-                  undefined,
-                  undefined,
-                  undefined,
-                ],
-              ]
+              Object {
+                "color": "white",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "letterSpacing": 1.25,
+                "paddingBottom": 1,
+                "paddingTop": 2,
+                "textAlign": "center",
+              }
             }
           >
             GO BACK
@@ -174,23 +127,14 @@ exports[`ForgotPassword component should renders correctly 1`] = `
     </View>
     <View
       style={
-        Array [
-          Object {
-            "marginLeft": 15,
-            "marginRight": 15,
-          },
-          undefined,
-          Object {
-            "backgroundColor": "transparent",
-            "borderColor": "#FFF",
-            "borderWidth": 1,
-            "marginLeft": 10,
-            "marginRight": 0,
-          },
-          Object {
-            "borderRadius": 4,
-          },
-        ]
+        Object {
+          "backgroundColor": "transparent",
+          "borderColor": "#FFF",
+          "borderRadius": 30,
+          "borderWidth": 1,
+          "marginLeft": 10,
+          "marginRight": 0,
+        }
       }
     >
       <View
@@ -204,75 +148,37 @@ exports[`ForgotPassword component should renders correctly 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
-        style={null}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
       >
         <View
-          pointerEvents="box-only"
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#9E9E9E",
-                "flexDirection": "row",
-                "justifyContent": "center",
-                "padding": 19,
-              },
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              Object {
-                "backgroundColor": "rgba(0,0,0, 0.5)",
-              },
-              Object {
-                "borderRadius": 4,
-              },
-              Object {
-                "padding": 12,
-              },
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-            ]
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "transparent",
+              "borderColor": "#2089dc",
+              "borderRadius": 3,
+              "borderWidth": 0,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "padding": 8,
+            }
           }
         >
           <Text
             style={
-              Array [
-                Object {},
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                Array [
-                  Object {
-                    "color": "white",
-                    "fontSize": 20,
-                  },
-                  undefined,
-                  Object {
-                    "fontSize": 17.5,
-                  },
-                  undefined,
-                  Object {
-                    "fontSize": 16,
-                    "fontWeight": "600",
-                    "letterSpacing": 1.25,
-                  },
-                  undefined,
-                  undefined,
-                  undefined,
-                ],
-              ]
+              Object {
+                "color": "white",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "letterSpacing": 1.25,
+                "paddingBottom": 1,
+                "paddingTop": 2,
+                "textAlign": "center",
+              }
             }
           >
             CONTINUE

__tests__/auth/__snapshots__/ForgotScreen.js.snap

@@ -134,23 +134,14 @@ exports[`ForgotScreen component should renders correctly 1`] = `
         >
           <View
             style={
-              Array [
-                Object {
-                  "marginLeft": 15,
-                  "marginRight": 15,
-                },
-                undefined,
-                Object {
-                  "backgroundColor": "transparent",
-                  "borderColor": "#FFF",
-                  "borderWidth": 1,
-                  "marginLeft": 10,
-                  "marginRight": 0,
-                },
-                Object {
-                  "borderRadius": 4,
-                },
-              ]
+              Object {
+                "backgroundColor": "transparent",
+                "borderColor": "#FFF",
+                "borderRadius": 30,
+                "borderWidth": 1,
+                "marginLeft": 10,
+                "marginRight": 0,
+              }
             }
           >
             <View
@@ -164,75 +155,37 @@ exports[`ForgotScreen component should renders correctly 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
-              style={null}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
             >
               <View
-                pointerEvents="box-only"
                 style={
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "backgroundColor": "#9E9E9E",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "padding": 19,
-                    },
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    Object {
-                      "backgroundColor": "rgba(0,0,0, 0.5)",
-                    },
-                    Object {
-                      "borderRadius": 4,
-                    },
-                    Object {
-                      "padding": 12,
-                    },
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "borderColor": "#2089dc",
+                    "borderRadius": 3,
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "padding": 8,
+                  }
                 }
               >
                 <Text
                   style={
-                    Array [
-                      Object {},
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      Array [
-                        Object {
-                          "color": "white",
-                          "fontSize": 20,
-                        },
-                        undefined,
-                        Object {
-                          "fontSize": 17.5,
-                        },
-                        undefined,
-                        Object {
-                          "fontSize": 16,
-                          "fontWeight": "600",
-                          "letterSpacing": 1.25,
-                        },
-                        undefined,
-                        undefined,
-                        undefined,
-                      ],
-                    ]
+                    Object {
+                      "color": "white",
+                      "fontSize": 16,
+                      "fontWeight": "600",
+                      "letterSpacing": 1.25,
+                      "paddingBottom": 1,
+                      "paddingTop": 2,
+                      "textAlign": "center",
+                    }
                   }
                 >
                   GO BACK
@@ -242,23 +195,14 @@ exports[`ForgotScreen component should renders correctly 1`] = `
           </View>
           <View
             style={
-              Array [
-                Object {
-                  "marginLeft": 15,
-                  "marginRight": 15,
-                },
-                undefined,
-                Object {
-                  "backgroundColor": "transparent",
-                  "borderColor": "#FFF",
-                  "borderWidth": 1,
-                  "marginLeft": 10,
-                  "marginRight": 0,
-                },
-                Object {
-                  "borderRadius": 4,
-                },
-              ]
+              Object {
+                "backgroundColor": "transparent",
+                "borderColor": "#FFF",
+                "borderRadius": 30,
+                "borderWidth": 1,
+                "marginLeft": 10,
+                "marginRight": 0,
+              }
             }
           >
             <View
@@ -272,75 +216,37 @@ exports[`ForgotScreen component should renders correctly 1`] = `
               onResponderTerminate={[Function]}
               onResponderTerminationRequest={[Function]}
               onStartShouldSetResponder={[Function]}
-              style={null}
+              style={
+                Object {
+                  "opacity": 1,
+                }
+              }
             >
               <View
-                pointerEvents="box-only"
                 style={
-                  Array [
-                    Object {
-                      "alignItems": "center",
-                      "backgroundColor": "#9E9E9E",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "padding": 19,
-                    },
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    Object {
-                      "backgroundColor": "rgba(0,0,0, 0.5)",
-                    },
-                    Object {
-                      "borderRadius": 4,
-                    },
-                    Object {
-                      "padding": 12,
-                    },
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                    undefined,
-                  ]
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "borderColor": "#2089dc",
+                    "borderRadius": 3,
+                    "borderWidth": 0,
+                    "flexDirection": "row",
+                    "justifyContent": "center",
+                    "padding": 8,
+                  }
                 }
               >
                 <Text
                   style={
-                    Array [
-                      Object {},
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      undefined,
-                      Array [
-                        Object {
-                          "color": "white",
-                          "fontSize": 20,
-                        },
-                        undefined,
-                        Object {
-                          "fontSize": 17.5,
-                        },
-                        undefined,
-                        Object {
-                          "fontSize": 16,
-                          "fontWeight": "600",
-                          "letterSpacing": 1.25,
-                        },
-                        undefined,
-                        undefined,
-                        undefined,
-                      ],
-                    ]
+                    Object {
+                      "color": "white",
+                      "fontSize": 16,
+                      "fontWeight": "600",
+                      "letterSpacing": 1.25,
+                      "paddingBottom": 1,
+                      "paddingTop": 2,
+                      "textAlign": "center",
+                    }
                   }
                 >
                   CONTINUE

__tests__/auth/__snapshots__/LoginForm.js.snap

@@ -112,23 +112,14 @@ exports[`LoginForm component should renders correctly 1`] = `
   >
     <View
       style={
-        Array [
-          Object {
-            "marginLeft": 15,
-            "marginRight": 15,
-          },
-          undefined,
-          Object {
-            "backgroundColor": "transparent",
-            "borderColor": "#FFF",
-            "borderWidth": 1,
-            "marginLeft": 10,
-            "marginRight": 0,
-          },
-          Object {
-            "borderRadius": 30,
-          },
-        ]
+        Object {
+          "backgroundColor": "transparent",
+          "borderColor": "#FFF",
+          "borderRadius": 30,
+          "borderWidth": 1,
+          "marginLeft": 10,
+          "marginRight": 0,
+        }
       }
     >
       <View
@@ -142,75 +133,38 @@ exports[`LoginForm component should renders correctly 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
-        style={null}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+        testID="registerButton"
       >
         <View
-          pointerEvents="box-only"
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#9E9E9E",
-                "flexDirection": "row",
-                "justifyContent": "center",
-                "padding": 19,
-              },
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              Object {
-                "backgroundColor": "transparent",
-              },
-              Object {
-                "borderRadius": 30,
-              },
-              Object {
-                "padding": 12,
-              },
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-            ]
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "transparent",
+              "borderColor": "#2089dc",
+              "borderRadius": 3,
+              "borderWidth": 0,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "padding": 8,
+            }
           }
         >
           <Text
             style={
-              Array [
-                Object {},
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                Array [
-                  Object {
-                    "color": "white",
-                    "fontSize": 20,
-                  },
-                  undefined,
-                  Object {
-                    "fontSize": 17.5,
-                  },
-                  undefined,
-                  Object {
-                    "fontSize": 16,
-                    "fontWeight": "600",
-                    "letterSpacing": 1.25,
-                  },
-                  undefined,
-                  undefined,
-                  undefined,
-                ],
-              ]
+              Object {
+                "color": "white",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "letterSpacing": 1.25,
+                "paddingBottom": 1,
+                "paddingTop": 2,
+                "textAlign": "center",
+              }
             }
           >
             CREATE A CHANNEL
@@ -220,23 +174,14 @@ exports[`LoginForm component should renders correctly 1`] = `
     </View>
     <View
       style={
-        Array [
-          Object {
-            "marginLeft": 15,
-            "marginRight": 15,
-          },
-          undefined,
-          Object {
-            "backgroundColor": "transparent",
-            "borderColor": "#FFF",
-            "borderWidth": 1,
-            "marginLeft": 10,
-            "marginRight": 0,
-          },
-          Object {
-            "borderRadius": 30,
-          },
-        ]
+        Object {
+          "backgroundColor": "transparent",
+          "borderColor": "#FFF",
+          "borderRadius": 30,
+          "borderWidth": 1,
+          "marginLeft": 10,
+          "marginRight": 0,
+        }
       }
     >
       <View
@@ -250,76 +195,38 @@ exports[`LoginForm component should renders correctly 1`] = `
         onResponderTerminate={[Function]}
         onResponderTerminationRequest={[Function]}
         onStartShouldSetResponder={[Function]}
-        style={null}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
         testID="loginButton"
       >
         <View
-          pointerEvents="box-only"
           style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "backgroundColor": "#9E9E9E",
-                "flexDirection": "row",
-                "justifyContent": "center",
-                "padding": 19,
-              },
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              Object {
-                "backgroundColor": "transparent",
-              },
-              Object {
-                "borderRadius": 30,
-              },
-              Object {
-                "padding": 12,
-              },
-              undefined,
-              undefined,
-              undefined,
-              undefined,
-              false,
-              false,
-            ]
+            Object {
+              "alignItems": "center",
+              "backgroundColor": "transparent",
+              "borderColor": "#2089dc",
+              "borderRadius": 3,
+              "borderWidth": 0,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "padding": 8,
+            }
           }
         >
           <Text
             style={
-              Array [
-                Object {},
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                Array [
-                  Object {
-                    "color": "white",
-                    "fontSize": 20,
-                  },
-                  undefined,
-                  Object {
-                    "fontSize": 17.5,
-                  },
-                  undefined,
-                  Object {
-                    "fontSize": 16,
-                    "fontWeight": "600",
-                    "letterSpacing": 1.25,
-                  },
-                  undefined,
-                  undefined,
-                  false,
-                ],
-              ]
+              Object {
+                "color": "white",
+                "fontSize": 16,
+                "fontWeight": "600",
+                "letterSpacing": 1.25,
+                "paddingBottom": 1,
+                "paddingTop": 2,
+                "textAlign": "center",
+              }
             }
           >
             LOGIN

__tests__/auth/__snapshots__/RegisterForm.js.snap

@@ -41,6 +41,7 @@ exports[`RegisterForm component should renders correctly 1`] = `
           },
         ]
       }
+      testID="registerUsernameInput"
       underlineColorAndroid="transparent"
       value=""
     />
@@ -70,6 +71,7 @@ exports[`RegisterForm component should renders correctly 1`] = `
           },
         ]
       }
+      testID="registerEmailInput"
       underlineColorAndroid="transparent"
       value=""
     />
@@ -100,6 +102,38 @@ exports[`RegisterForm component should renders correctly 1`] = `
           },
         ]
       }
+      testID="registerPasswordInput"
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <TextInput
+      allowFontScaling={true}
+      autoCapitalize="none"
+      editable={true}
+      onChangeText={[Function]}
+      placeholder="Confirm Password"
+      placeholderTextColor="#444"
+      rejectResponderTermination={true}
+      returnKeyType="done"
+      secureTextEntry={true}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#f8f8f8",
+            "borderRadius": 4,
+            "color": "#444",
+            "fontSize": 16,
+            "fontWeight": "600",
+            "height": 50,
+            "letterSpacing": 2,
+            "padding": 15,
+          },
+          Object {
+            "marginTop": 10,
+          },
+        ]
+      }
+      testID="registerPasswordConfirmInput"
       underlineColorAndroid="transparent"
       value=""
     />
@@ -128,19 +162,15 @@ exports[`RegisterForm component should renders correctly 1`] = `
           "padding": 10,
         }
       }
+      testID="checkbox"
     >
       <View
         style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "flexDirection": "row",
-            },
-            Object {
-              "justifyContent": "flex-end",
-            },
-            false,
-          ]
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+          }
         }
       >
         <Text
@@ -167,7 +197,9 @@ exports[`RegisterForm component should renders correctly 1`] = `
                 "color": "#bfbfbf",
                 "fontSize": 24,
               },
-              undefined,
+              Object {
+                "minWidth": 24,
+              },
               Object {
                 "fontFamily": "FontAwesome",
                 "fontStyle": "normal",
@@ -206,19 +238,15 @@ exports[`RegisterForm component should renders correctly 1`] = `
           "padding": 10,
         }
       }
+      testID="checkbox"
     >
       <View
         style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "flexDirection": "row",
-            },
-            Object {
-              "justifyContent": "flex-end",
-            },
-            false,
-          ]
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "justifyContent": "flex-end",
+          }
         }
       >
         <Text
@@ -250,7 +278,9 @@ exports[`RegisterForm component should renders correctly 1`] = `
                 "color": "#bfbfbf",
                 "fontSize": 24,
               },
-              undefined,
+              Object {
+                "minWidth": 24,
+              },
               Object {
                 "fontFamily": "FontAwesome",
                 "fontStyle": "normal",
@@ -279,23 +309,14 @@ exports[`RegisterForm component should renders correctly 1`] = `
     >
       <View
         style={
-          Array [
-            Object {
-              "marginLeft": 15,
-              "marginRight": 15,
-            },
-            undefined,
-            Object {
-              "backgroundColor": "transparent",
-              "borderColor": "#FFF",
-              "borderWidth": 1,
-              "marginLeft": 10,
-              "marginRight": 0,
-            },
-            Object {
-              "borderRadius": 30,
-            },
-          ]
+          Object {
+            "backgroundColor": "transparent",
+            "borderColor": "#FFF",
+            "borderRadius": 30,
+            "borderWidth": 1,
+            "marginLeft": 10,
+            "marginRight": 0,
+          }
         }
       >
         <View
@@ -309,75 +330,37 @@ exports[`RegisterForm component should renders correctly 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
-          style={null}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
         >
           <View
-            pointerEvents="box-only"
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "backgroundColor": "#9E9E9E",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "padding": 19,
-                },
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                Object {
-                  "backgroundColor": "transparent",
-                },
-                Object {
-                  "borderRadius": 30,
-                },
-                Object {
-                  "padding": 12,
-                },
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                false,
-                false,
-              ]
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "borderColor": "#2089dc",
+                "borderRadius": 3,
+                "borderWidth": 0,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "padding": 8,
+              }
             }
           >
             <Text
               style={
-                Array [
-                  Object {},
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  Array [
-                    Object {
-                      "color": "white",
-                      "fontSize": 20,
-                    },
-                    undefined,
-                    Object {
-                      "fontSize": 17.5,
-                    },
-                    undefined,
-                    Object {
-                      "fontSize": 16,
-                      "fontWeight": "600",
-                      "letterSpacing": 1.25,
-                    },
-                    undefined,
-                    undefined,
-                    false,
-                  ],
-                ]
+                Object {
+                  "color": "white",
+                  "fontSize": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 1.25,
+                  "paddingBottom": 1,
+                  "paddingTop": 2,
+                  "textAlign": "center",
+                }
               }
             >
               GO BACK
@@ -387,23 +370,14 @@ exports[`RegisterForm component should renders correctly 1`] = `
       </View>
       <View
         style={
-          Array [
-            Object {
-              "marginLeft": 15,
-              "marginRight": 15,
-            },
-            undefined,
-            Object {
-              "backgroundColor": "transparent",
-              "borderColor": "#FFF",
-              "borderWidth": 1,
-              "marginLeft": 10,
-              "marginRight": 0,
-            },
-            Object {
-              "borderRadius": 30,
-            },
-          ]
+          Object {
+            "backgroundColor": "transparent",
+            "borderColor": "#FFF",
+            "borderRadius": 30,
+            "borderWidth": 1,
+            "marginLeft": 10,
+            "marginRight": 0,
+          }
         }
       >
         <View
@@ -417,75 +391,38 @@ exports[`RegisterForm component should renders correctly 1`] = `
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
-          style={null}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
+          testID="registerCreateButton"
         >
           <View
-            pointerEvents="box-only"
             style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "backgroundColor": "#9E9E9E",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "padding": 19,
-                },
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                Object {
-                  "backgroundColor": "transparent",
-                },
-                Object {
-                  "borderRadius": 30,
-                },
-                Object {
-                  "padding": 12,
-                },
-                undefined,
-                undefined,
-                undefined,
-                undefined,
-                false,
-                false,
-              ]
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "transparent",
+                "borderColor": "#2089dc",
+                "borderRadius": 3,
+                "borderWidth": 0,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "padding": 8,
+              }
             }
           >
             <Text
               style={
-                Array [
-                  Object {},
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  undefined,
-                  Array [
-                    Object {
-                      "color": "white",
-                      "fontSize": 20,
-                    },
-                    undefined,
-                    Object {
-                      "fontSize": 17.5,
-                    },
-                    undefined,
-                    Object {
-                      "fontSize": 16,
-                      "fontWeight": "600",
-                      "letterSpacing": 1.25,
-                    },
-                    undefined,
-                    undefined,
-                    false,
-                  ],
-                ]
+                Object {
+                  "color": "white",
+                  "fontSize": 16,
+                  "fontWeight": "600",
+                  "letterSpacing": 1.25,
+                  "paddingBottom": 1,
+                  "paddingTop": 2,
+                  "textAlign": "center",
+                }
               }
             >
               CREATE A CHANNEL

__tests__/auth/__snapshots__/RegisterFormNew.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RegisterFormNew component should renders correctly 1`] = `
+<RCTScrollView>
+  <View>
+    <View>
+      <Text
+        style={
+          Object {
+            "color": "#4A4A4A",
+            "fontFamily": "Roboto",
+            "fontSize": 36,
+            "fontWeight": "bold",
+            "lineHeight": 37,
+            "paddingTop": 25,
+            "textAlign": "center",
+          }
+        }
+      >
+        Join the Minds Revolution
+      </Text>
+    </View>
+    <View>
+      <Text
+        style={
+          Object {
+            "color": "#F00",
+            "paddingLeft": 4,
+            "paddingTop": 4,
+            "textAlign": "center",
+          }
+        }
+      />
+    </View>
+    <TextInput
+      allowFontScaling={true}
+      autoCapitalize="none"
+      editable={true}
+      onChangeText={[Function]}
+      placeholder="Username"
+      placeholderTextColor="#444"
+      rejectResponderTermination={true}
+      returnKeyType="done"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#D8D8D8",
+            "borderRadius": 2,
+            "borderWidth": 1,
+            "color": "#4A4A4A",
+            "fontFamily": "Roboto",
+            "fontSize": 16,
+            "height": 40,
+            "lineHeight": 21,
+            "marginLeft": 20,
+            "marginRight": 20,
+            "padding": 10,
+          },
+        ]
+      }
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <TextInput
+      allowFontScaling={true}
+      autoCapitalize="none"
+      editable={true}
+      onChangeText={[Function]}
+      placeholder="Email"
+      placeholderTextColor="#444"
+      rejectResponderTermination={true}
+      returnKeyType="done"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#D8D8D8",
+            "borderRadius": 2,
+            "borderWidth": 1,
+            "color": "#4A4A4A",
+            "fontFamily": "Roboto",
+            "fontSize": 16,
+            "height": 40,
+            "lineHeight": 21,
+            "marginLeft": 20,
+            "marginRight": 20,
+            "padding": 10,
+          },
+          Object {
+            "marginTop": 10,
+          },
+        ]
+      }
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <TextInput
+      allowFontScaling={true}
+      autoCapitalize="none"
+      editable={true}
+      onChangeText={[Function]}
+      placeholder="Password"
+      placeholderTextColor="#444"
+      rejectResponderTermination={true}
+      returnKeyType="done"
+      secureTextEntry={true}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFFFFF",
+            "borderColor": "#D8D8D8",
+            "borderRadius": 2,
+            "borderWidth": 1,
+            "color": "#4A4A4A",
+            "fontFamily": "Roboto",
+            "fontSize": 16,
+            "height": 40,
+            "lineHeight": 21,
+            "marginLeft": 20,
+            "marginRight": 20,
+            "padding": 10,
+          },
+          Object {
+            "marginTop": 10,
+          },
+        ]
+      }
+      underlineColorAndroid="transparent"
+      value=""
+    />
+    <View
+      accessible={true}
+      focusable={true}
+      isTVSelectable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignSelf": "flex-start",
+          "backgroundColor": "transparent",
+          "borderColor": "#ededed",
+          "borderRadius": 3,
+          "borderWidth": 0,
+          "margin": 5,
+          "marginLeft": 10,
+          "marginRight": 10,
+          "marginTop": 15,
+          "opacity": 1,
+          "padding": 10,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+            },
+            Object {
+              "justifyContent": "flex-end",
+            },
+            false,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            Array [
+              Object {
+                "color": "#bfbfbf",
+                "fontSize": 24,
+              },
+              undefined,
+              Object {
+                "fontFamily": "FontAwesome",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              Object {},
+            ]
+          }
+        >
+          
+        </Text>
+        <Text
+          style={
+            Object {
+              "color": "#4A4A4A",
+              "paddingLeft": 8,
+            }
+          }
+        >
+          I have read and accept the
+           
+          <Text
+            onPress={[Function]}
+            style={
+              Object {
+                "color": "#0091FF",
+              }
+            }
+          >
+            terms of use
+          </Text>
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "center",
+          },
+          Object {
+            "marginTop": 10,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "marginLeft": 15,
+              "marginRight": 15,
+            },
+            undefined,
+            Object {
+              "backgroundColor": "transparent",
+              "borderColor": "#FFF",
+              "borderWidth": 1,
+              "marginLeft": 10,
+              "marginRight": 0,
+            },
+            Object {
+              "borderRadius": 2,
+            },
+          ]
+        }
+      >
+        <View
+          accessible={true}
+          focusable={true}
+          isTVSelectable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={null}
+        >
+          <View
+            pointerEvents="box-only"
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "backgroundColor": "#9E9E9E",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "padding": 19,
+                },
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                Object {
+                  "backgroundColor": "#5DBAC0",
+                },
+                Object {
+                  "borderRadius": 2,
+                },
+                Object {
+                  "padding": 12,
+                },
+                undefined,
+                undefined,
+                undefined,
+                undefined,
+                false,
+                false,
+              ]
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {},
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  undefined,
+                  Array [
+                    Object {
+                      "color": "white",
+                      "fontSize": 20,
+                    },
+                    undefined,
+                    Object {
+                      "fontSize": 17.5,
+                    },
+                    undefined,
+                    Object {
+                      "fontSize": 16,
+                      "fontWeight": "600",
+                      "letterSpacing": 1.25,
+                    },
+                    undefined,
+                    undefined,
+                    false,
+                  ],
+                ]
+              }
+            >
+              CREATE A CHANNEL
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;

__tests__/auth/__snapshots__/RegisterScreenNew.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RegisterScreenNew component should renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      Object {
+        "padding": 10,
+      },
+      Object {
+        "zIndex": 15,
+      },
+    ]
+  }
+>
+  <Image
+    source={
+      Object {
+        "testUri": "../../../src/assets/logos/bulb.png",
+      }
+    }
+    style={
+      Object {
+        "height": 45,
+        "marginLeft": 15,
+        "marginTop": 15,
+        "width": 26.25,
+      }
+    }
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+          "borderRightColor": "transparent",
+          "borderRightWidth": 100,
+          "borderStyle": "solid",
+          "borderTopColor": "red",
+          "borderTopWidth": 100,
+          "height": 0,
+          "width": 0,
+        },
+        Object {
+          "borderTopColor": "#FED12F",
+          "position": "absolute",
+          "right": 5,
+          "top": -80,
+          "transform": Array [
+            Object {
+              "rotate": "90deg",
+            },
+            Object {
+              "skewY": "60deg",
+            },
+            Object {
+              "scaleX": 4,
+            },
+            Object {
+              "scaleY": 8,
+            },
+          ],
+          "zIndex": -10,
+        },
+      ]
+    }
+  />
+  <View
+    style={
+      Object {
+        "flex": 1,
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFF",
+            "elevation": 11,
+            "height": "78.78%",
+            "left": 20,
+            "position": "absolute",
+            "shadowColor": "#000",
+            "shadowOffset": Object {
+              "height": 5,
+              "width": 5,
+            },
+            "shadowOpacity": 0.8,
+            "shadowRadius": 6.68,
+            "top": 60,
+            "transform": Array [
+              Object {
+                "rotate": "-1deg",
+              },
+            ],
+            "width": "87.5%",
+            "zIndex": -5,
+          },
+          Object {},
+        ]
+      }
+    />
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#FFF",
+            "elevation": 11,
+            "height": "78.78%",
+            "left": 20,
+            "position": "absolute",
+            "shadowColor": "#000",
+            "shadowOffset": Object {
+              "height": 5,
+              "width": 5,
+            },
+            "shadowOpacity": 0.8,
+            "shadowRadius": 6.68,
+            "top": 60,
+            "transform": Array [
+              Object {
+                "rotate": "-1deg",
+              },
+            ],
+            "width": "87.5%",
+            "zIndex": -5,
+          },
+          Object {
+            "top": 55,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "opacity": 0,
+            "transform": Array [
+              Object {
+                "scale": 0.3,
+              },
+            ],
+          }
+        }
+      >
+        <View>
+          <RegisterFormNew
+            onBack={[Function]}
+            onRegister={[Function]}
+          />
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

__tests__/blogs/__snapshots__/BlogCard.js.snap

@@ -115,45 +115,159 @@ exports[`blog card component should renders correctly 1`] = `
         <View
           height={24}
           style={
-            Array [
-              Object {
-                "backgroundColor": "transparent",
-                "height": 24,
-                "paddingBottom": 10,
-                "paddingRight": 10,
-                "paddingTop": 10,
-                "width": 24,
-              },
-              Object {
-                "borderRadius": 12,
+            Object {
+              "backgroundColor": "transparent",
+              "borderRadius": 17,
+              "height": 34,
+              "width": 34,
+            }
+          }
+          theme={
+            Object {
+              "colors": Object {
+                "disabled": "hsl(208, 8%, 90%)",
+                "divider": "#bcbbc1",
+                "error": "#ff190c",
+                "grey0": "#393e42",
+                "grey1": "#43484d",
+                "grey2": "#5e6977",
+                "grey3": "#86939e",
+                "grey4": "#bdc6cf",
+                "grey5": "#e1e8ee",
+                "greyOutline": "#bbb",
+                "platform": Object {
+                  "android": Object {
+                    "error": "#f44336",
+                    "primary": "#2196f3",
+                    "secondary": "#9C27B0",
+                    "success": "#4caf50",
+                    "warning": "#ffeb3b",
+                  },
+                  "ios": Object {
+                    "error": "#ff3b30",
+                    "primary": "#007aff",
+                    "secondary": "#5856d6",
+                    "success": "#4cd964",
+                    "warning": "#ffcc00",
+                  },
+                },
+                "primary": "#2089dc",
+                "searchBg": "#303337",
+                "secondary": "#8F0CE8",
+                "success": "#52c41a",
+                "warning": "#faad14",
               },
-              undefined,
-            ]
+            }
           }
           width={24}
         >
           <View
+            accessibilityIgnoresInvertColors={true}
             style={
-              Array [
+              Object {
+                "backgroundColor": "#bdbdbd",
+                "borderRadius": 17,
+                "flex": 1,
+                "overflow": "hidden",
+                "position": "relative",
+              }
+            }
+          >
+            <Image
+              onLoad={[Function]}
+              style={
+                Array [
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  Object {
+                    "height": null,
+                    "width": null,
+                  },
+                ]
+              }
+              testID="RNE__Image"
+              theme={
+                Object {
+                  "colors": Object {
+                    "disabled": "hsl(208, 8%, 90%)",
+                    "divider": "#bcbbc1",
+                    "error": "#ff190c",
+                    "grey0": "#393e42",
+                    "grey1": "#43484d",
+                    "grey2": "#5e6977",
+                    "grey3": "#86939e",
+                    "grey4": "#bdc6cf",
+                    "grey5": "#e1e8ee",
+                    "greyOutline": "#bbb",
+                    "platform": Object {
+                      "android": Object {
+                        "error": "#f44336",
+                        "primary": "#2196f3",
+                        "secondary": "#9C27B0",
+                        "success": "#4caf50",
+                        "warning": "#ffeb3b",
+                      },
+                      "ios": Object {
+                        "error": "#ff3b30",
+                        "primary": "#007aff",
+                        "secondary": "#5856d6",
+                        "success": "#4cd964",
+                        "warning": "#ffcc00",
+                      },
+                    },
+                    "primary": "#2089dc",
+                    "searchBg": "#303337",
+                    "secondary": "#8F0CE8",
+                    "success": "#52c41a",
+                    "warning": "#faad14",
+                  },
+                }
+              }
+            />
+            <View
+              accessibilityElementsHidden={false}
+              importantForAccessibility="yes"
+              pointerEvents="auto"
+              style={
                 Object {
-                  "alignItems": "center",
-                  "alignSelf": "stretch",
-                  "backgroundColor": "rgba(0,0,0,0.2)",
                   "bottom": 0,
-                  "flex": 1,
-                  "justifyContent": "center",
                   "left": 0,
+                  "opacity": 1,
                   "position": "absolute",
                   "right": 0,
                   "top": 0,
-                },
+                }
+              }
+            >
+              <View
+                style={
+                  Object {
+                    "alignItems": "center",
+                    "backgroundColor": "transparent",
+                    "flex": 1,
+                    "height": null,
+                    "justifyContent": "center",
+                    "width": null,
+                  }
+                }
+                testID="RNE__Image__placeholder"
+              />
+            </View>
+            <View
+              style={
                 Object {
-                  "borderRadius": 12,
-                },
-                undefined,
-              ]
-            }
-          />
+                  "flex": 1,
+                  "height": null,
+                  "width": null,
+                }
+              }
+            />
+          </View>
         </View>
         <Text
           numberOfLines={1}

__tests__/blogs/__snapshots__/BlogsViewScreen.js.snap

@@ -851,14 +851,10 @@ exports[`blog view screen component should renders correctly 1`] = `
             }
           }
         >
-          <Icon
+          <Themed.Icon
             color="#b0bec5"
             name="public"
-            raised={false}
-            reverse={false}
-            reverseColor="white"
             size={18}
-            underlayColor="white"
           />
           <Text
             style={
@@ -880,15 +876,11 @@ exports[`blog view screen component should renders correctly 1`] = `
           >
             Attribution-NonCommerical CC BY-NC
           </Text>
-          <Icon
+          <Themed.Icon
             color="#4690D6"
             name="share"
             onPress={[Function]}
-            raised={false}
-            reverse={false}
-            reverseColor="white"
             size={20}
-            underlayColor="white"
           />
         </View>
         <ForwardRef(_SafeAreaView)
@@ -900,15 +892,12 @@ exports[`blog view screen component should renders correctly 1`] = `
             }
           }
         >
-          <Icon
+          <Themed.Icon
             color="#4690D6"
             name="arrow-back"
             onPress={[Function]}
             raised={true}
-            reverse={false}
-            reverseColor="white"
             size={22}
-            underlayColor="white"
           />
         </ForwardRef(_SafeAreaView)>
       </View>

__tests__/boost/__snapshots__/BoostActionBar.js.snap

@@ -25,12 +25,9 @@ exports[`Boost action bar component renders correctly 1`] = `
       }
     }
   >
-    <Icon
+    <Themed.Icon
       color="rgb(96, 125, 139)"
       name="bank"
-      raised={false}
-      reverse={false}
-      reverseColor="white"
       size={20}
       style={
         Object {
@@ -38,7 +35,6 @@ exports[`Boost action bar component renders correctly 1`] = `
         }
       }
       type="material-community"
-      underlayColor="white"
     />
     <Text
       style={

__tests__/capture/__snapshots__/CapturePoster.js.snap

@@ -7,6 +7,7 @@ exports[`cature poster component should renders correctly 1`] = `
       "flex": 1,
     }
   }
+  testID="capturePosterView"
 >
   <View
     style={

__tests__/capture/__snapshots__/CapturePosterFlags.js.snap

@@ -936,6 +936,7 @@ exports[`cature poster flags component should renders correctly for props false
                     "width": "100%",
                   }
                 }
+                testID="tagInput"
                 underlineColorAndroid="transparent"
                 value=""
               />
@@ -2104,6 +2105,7 @@ exports[`cature poster flags component should renders correctly for props true 1
                     "width": "100%",
                   }
                 }
+                testID="tagInput"
                 underlineColorAndroid="transparent"
                 value=""
               />

__tests__/channel/__snapshots__/ChannelActions.js.snap

@@ -40,6 +40,7 @@ exports[`channel actions component should renders correctly 1`] = `
         "padding": 4,
       }
     }
+    testID="MoreButton"
   >
     <Text
       style={