__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/__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__/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

@@ -841,14 +841,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={
@@ -870,15 +866,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)
@@ -890,15 +882,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__/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__/ChannelScreen.js.snap

@@ -469,15 +469,12 @@ exports[`Channel 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"
     />
   </SafeAreaView>
   <CaptureFab
@@ -964,15 +961,12 @@ exports[`Channel screen component should show closed channel message 1`] = `
       }
     }
   >
-    <Icon
+    <Themed.Icon
       color="#4690D6"
       name="arrow-back"
       onPress={[Function]}
       raised={true}
-      reverse={false}
-      reverseColor="white"
       size={22}
-      underlayColor="white"
     />
   </SafeAreaView>
   <CaptureFab

e2e/helpers/createUser.js

+/**
+ * @author Ben Hayward
+ */
+import fetch from 'node-fetch';
+
+export default async (username, password, email) => {
+  const params = {
+    username: username,
+    password: password,
+    password2: password,
+    email: email,
+    Homepage121118: null,
+    captcha: "",
+    exclusive_promotions: false,
+    tos: true
+  };
+
+  await fetch('https://www.minds.com/api/v1/register', {
+    method: 'POST',
+    body: JSON.stringify(params)
+  })
+    .then(result => result.json())
+    .then(result => {
+      console.log(
+        `new user - ${process.env.newUsername} created: ${JSON.stringify(
+          result.status,
+        )}`,
+      );
+    });
+};
+

e2e/helpers/deleteUser.js

+/**
+ * @author Ben Hayward
+ */
+import fetch from 'node-fetch';
+
+export default async (username, password) => {
+  let params = {
+    grant_type: 'password',
+    client_id: 'mobile',
+    username,
+    password,
+  };
+
+  try {
+    const result = await fetch('https://www.minds.com/api/v2/oauth/token',  {
+      method: 'POST',
+      body: JSON.stringify(params),
+    }).then(res => res.json()); //get the token.
+
+    const result1 = fetch('https://www.minds.com/api/v2/settings/delete',  {
+      method: 'POST',
+      body: JSON.stringify({password}),
+      headers: {Authorization: 'Bearer ' + result.access_token},
+    }).then(res => res.json()); //make the deletion request.
+    console.log('deleting user returned:\n', await result1);
+  } catch (e) {
+    console.log('error deleting user:\n', e);
+  }
+};

e2e/register.spec.js

+import deleteUser from './helpers/deleteUser';
+import sleep from '../src/common/helpers/sleep';
+
+describe('Register Flow', () => {
+  const username = 'e2euser' + ((Math.random() * 0xffffff) << 0).toString(16);
+  const password = process.env.loginPass;
+
+  beforeEach(async () => {
+    await device.launchApp({
+      newInstance: true,
+      permissions: {
+        notifications: 'YES',
+        photos: 'YES',
+      },
+    });
+  });
+
+  afterAll(async () => {
+    await deleteUser(username, password);
+  });
+
+  it('should register correctly', async () => {
+
+    console.log('registering', username);
+
+    // login shoulf be visible
+    await waitFor(element(by.id('usernameInput')))
+      .toBeVisible()
+      .withTimeout(10000);
+
+    await element(by.id('registerButton')).tap();
+
+    // email filed should be visible
+    await waitFor(element(by.id('registerEmailInput')))
+      .toBeVisible()
+      .withTimeout(2000);
+
+    // disable sync to prevent long waits for animations
+    await device.disableSynchronization();
+
+    // accept terms
+    await element(by.id('checkbox')).atIndex(0).tapAtPoint({x:30, y:30});
+
+    // fill the form
+    await element(by.id('registerUsernameInput')).typeText(username);
+    await element(by.id('registerEmailInput')).typeText('mye2e@minds.com');
+    await element(by.id('registerPasswordInput')).typeText(password);
+    await element(by.id('registerPasswordConfirmInput')).typeText(password);
+
+    // press register
+    const registerButton = await element(by.id('registerCreateButton'));
+    await registerButton.tap();
+    await registerButton.tap();
+
+    await device.enableSynchronization();
+
+    // is the onboarding visible?
+    await waitFor(element(by.id('artTestID')))
+      .toBeVisible()
+      .withTimeout(5000);
+
+    // select art hashtag
+    await element(by.id('artTestID')).tap();
+
+    // move to next step
+    await element(by.id('wizardNext')).tap();
+
+    // wait for the suggested users list
+    await waitFor(element(by.id('suggestedUser0SubscriptionButton')))
+      .toBeVisible()
+      .withTimeout(10000);
+
+    // subscribe to the first user of the list
+    await element(by.id('suggestedUser0SubscriptionButton')).tap();
+
+    // move to next step
+    await element(by.id('wizardNext')).tap();
+
+    // wait for the channel setup
+    await waitFor(element(by.id('selectAvatar')))
+      .toBeVisible()
+      .withTimeout(10000);
+
+    // tap the select avatar button
+    await element(by.id('selectAvatar')).tap();
+
+    await sleep(3000);
+
+    // move to next step
+    await element(by.id('wizardNext')).tap();
+
+     // wait for the channel setup
+    await waitFor(element(by.id('RewardsOnboarding')))
+      .toBeVisible()
+      .withTimeout(10000);
+
+    // move to next step
+    await element(by.id('wizardNext')).tap();
+
+    // newsfeed should be visible
+    await waitFor(element(by.id('NewsfeedScreen')))
+      .toBeVisible()
+      .withTimeout(10000);
+  });
+
+});

metro.config.js

@@ -5,6 +5,7 @@
  * @format
  */
 const blacklist = require('metro-config/src/defaults/blacklist');
+const defaultSourceExts = require('metro-config/src/defaults/defaults').sourceExts;
 
 module.exports = {
   resolver: {
@@ -12,6 +13,9 @@ module.exports = {
     blacklistRE: blacklist([
       /ios\/Pods\/JitsiMeetSDK\/Frameworks\/JitsiMeet.framework\/assets\/node_modules\/react-native\/.*/,
     ]),
+    sourceExts: process.env.RN_SRC_EXT
+      ? process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts)
+      : defaultSourceExts,
   },
   transformer: {
     getTransformOptions: async () => ({

package.json

@@ -42,7 +42,7 @@
     "react-native-convert-ph-asset": "^1.0.3",
     "react-native-device-info": "^4.0.1",
     "react-native-device-log": "Minds/react-native-device-log#74f06b09c6656aa228a9a3a474c714d82abf509e",
-    "react-native-elements": "^0.19.1",
+    "react-native-elements": "^1.2.7",
     "react-native-exception-handler": "^2.10.8",
     "react-native-exit-app": "wumke/react-native-exit-app",
     "react-native-fast-image": "^7.0.2",
@@ -109,7 +109,7 @@
     "configurations": {
       "ios.sim.debug": {
         "binaryPath": "ios/build/Build/Products/Debug-iphonesimulator/Minds.app",
-        "build": "xcodebuild -workspace ios/Minds.xcworkspace -scheme Minds -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
+        "build": "RN_SRC_EXT=e2e.js xcodebuild -workspace ios/Minds.xcworkspace -scheme Minds -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build",
         "type": "ios.simulator",
         "device": {
           "type": "iPhone 11"
@@ -117,7 +117,7 @@
       },
       "ios.sim.release": {
         "binaryPath": "ios/build/Build/Products/Release-iphonesimulator/Minds.app",
-        "build": "xcodebuild -workspace ios/Minds.xcworkspace -scheme Minds -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
+        "build": "RN_SRC_EXT=e2e.js xcodebuild -workspace ios/Minds.xcworkspace -scheme Minds -configuration Release -sdk iphonesimulator -derivedDataPath ios/build",
         "type": "ios.simulator",
         "device": {
           "type": "iPhone 11"

src/auth/ForgotPassword.js

@@ -57,22 +57,21 @@ export default class ForgotPassword extends PureComponent {
           <Button
             onPress={() => this.onPressBack()}
             title={i18n.t('goback')}
-            backgroundColor="rgba(0,0,0, 0.5)"
-            borderRadius={4}
-            containerViewStyle={ComponentsStyle.loginButton}
-            textStyle={ComponentsStyle.loginButtonText}
+            type="clear"
+            containerStyle={ComponentsStyle.loginButton}
+            titleStyle={ComponentsStyle.loginButtonText}
           />
           {!this.state.sent && <Button
             onPress={() => this.onContinuePress()}
             title={i18n.t('continue').toUpperCase()}
             backgroundColor="rgba(0,0,0, 0.5)"
             hidde={this.state.sent}
-            borderRadius={4}
             loading={this.state.sending}
             loadingRight={true}
             disable={this.state.sending}
-            containerViewStyle={ComponentsStyle.loginButton}
-            textStyle={ComponentsStyle.loginButtonText}
+            type="clear"
+            containerStyle={ComponentsStyle.loginButton}
+            titleStyle={ComponentsStyle.loginButtonText}
           />}
         </View>
       </KeyboardAvoidingView>

src/auth/LoginForm.js

@@ -111,10 +111,9 @@ export default class LoginForm extends Component {
       <Button
         onPress={() => this.onLoginPress()}
         title={i18n.t('auth.login')}
-        borderRadius={30}
-        backgroundColor="transparent"
-        containerViewStyle={ComponentsStyle.loginButton}
-        textStyle={ComponentsStyle.loginButtonText}
+        type="clear"
+        containerStyle={ComponentsStyle.loginButton}
+        titleStyle={ComponentsStyle.loginButtonText}
         key={1}
         loading={this.state.inProgress}
         loadingRight={true}
@@ -129,11 +128,11 @@ export default class LoginForm extends Component {
         <Button
           onPress={() => this.props.onRegister()}
           title={i18n.t('auth.create')}
-          borderRadius={30}
-          backgroundColor="transparent"
-          containerViewStyle={ComponentsStyle.loginButton}
-          textStyle={ComponentsStyle.loginButtonText}
+          type="clear"
+          containerStyle={ComponentsStyle.loginButton}
+          titleStyle={ComponentsStyle.loginButtonText}
           key={2}
+          testID="registerButton"
         />
       );
     }

src/auth/RegisterForm.js

@@ -27,6 +27,7 @@ import i18n from '../common/services/i18n.service';
 import sessionService from '../common/services/session.service';
 import delay from '../common/helpers/delay';
 import apiService from '../common/services/api.service';
+import { DISABLE_PASSWORD_INPUTS } from '../config/Config';
 
 /**
  * Register Form
@@ -83,6 +84,7 @@ export default class RegisterForm extends Component {
           onChangeText={(value) => this.setState({ username: value })}
           value={this.state.username}
           editable={!this.state.inProgress}
+          testID="registerUsernameInput"
         />
         <TextInput
           style={[ComponentsStyle.loginInput, CommonStyle.marginTop2x]}
@@ -94,11 +96,12 @@ export default class RegisterForm extends Component {
           onChangeText={(value) => this.setState({ email: value })}
           value={this.state.email}
           editable={!this.state.inProgress}
+          testID="registerEmailInput"
         />
         <TextInput
           style={[ComponentsStyle.loginInput, CommonStyle.marginTop2x]}
           placeholder={i18n.t('auth.password')}
-          secureTextEntry={true}
+          secureTextEntry={!DISABLE_PASSWORD_INPUTS} // e2e workaround
           autoCapitalize={'none'}
           returnKeyType={'done'}
           placeholderTextColor="#444"
@@ -106,20 +109,21 @@ export default class RegisterForm extends Component {
           onChangeText={(value) => this.setState({ password: value })}
           value={this.state.password}
           editable={!this.state.inProgress}
+          testID="registerPasswordInput"
+        />
+        <TextInput
+          style={[ComponentsStyle.loginInput, CommonStyle.marginTop2x]}
+          placeholder={i18n.t('auth.confirmpassword')}
+          secureTextEntry={!DISABLE_PASSWORD_INPUTS} // e2e workaround
+          autoCapitalize={'none'}
+          returnKeyType={'done'}
+          placeholderTextColor="#444"
+          underlineColorAndroid='transparent'
+          onChangeText={(value) => this.setState({ confirmPassword: value })}
+          value={this.state.confirmPassword}
+          editable={!this.state.inProgress}
+          testID="registerPasswordConfirmInput"
         />
-        { this.state.password ?
-          <TextInput
-            style={[ComponentsStyle.loginInput, CommonStyle.marginTop2x]}
-            placeholder={i18n.t('auth.confirmpassword')}
-            secureTextEntry={true}
-            autoCapitalize={'none'}
-            returnKeyType={'done'}
-            placeholderTextColor="#444"
-            underlineColorAndroid='transparent'
-            onChangeText={(value) => this.setState({ confirmPassword: value })}
-            value={this.state.confirmPassword}
-            editable={!this.state.inProgress}
-          /> : null }
         <CheckBox
           right
           iconRight
@@ -144,20 +148,19 @@ export default class RegisterForm extends Component {
             <Button
               onPress={() => this.onPressBack()}
               title={i18n.t('goback')}
-              borderRadius={30}
-              backgroundColor="transparent"
-              containerViewStyle={ComponentsStyle.loginButton}
-              textStyle={ComponentsStyle.loginButtonText}
+              type="clear"
+              containerStyle={ComponentsStyle.loginButton}
+              titleStyle={ComponentsStyle.loginButtonText}
               disabled={this.state.inProgress}
               disabledStyle={CommonStyle.backgroundTransparent}
             />
             <Button
               onPress={() => this.onPressRegister()}
               title={i18n.t('auth.create')}
-              backgroundColor="transparent"
-              borderRadius={30}
-              containerViewStyle={ComponentsStyle.loginButton}
-              textStyle={ComponentsStyle.loginButtonText}
+              testID="registerCreateButton"
+              type="clear"
+              containerStyle={ComponentsStyle.loginButton}
+              titleStyle={ComponentsStyle.loginButtonText}
               loading={this.state.inProgress}
               loadingRight={true}
               disabled={this.state.inProgress}

src/auth/ResetPassword.js

@@ -14,7 +14,7 @@ import authService from './AuthService';
 import { CommonStyle as CS } from '../styles/Common';
 import { ComponentsStyle } from '../styles/Components';
 
-import { Button } from 'react-native-elements'
+import { Button } from 'react-native-elements';
 
 import i18n from '../common/services/i18n.service';
 import navigation from '../navigation/NavigationService';
@@ -73,23 +73,23 @@ export default class ResetPassword extends PureComponent {
           <Button
             onPress={this.onPressBack}
             title={i18n.t('goback')}
-            backgroundColor="rgba(0,0,0, 0.5)"
-            borderRadius={30}
-            containerViewStyle={ComponentsStyle.loginButton}
-            textStyle={ComponentsStyle.loginButtonText}
+            type="clear"
+            containerStyle={ComponentsStyle.loginButton}
+            titleStyle={ComponentsStyle.loginButtonText}
           />
-          {!this.state.sent && <Button
-            onPress={() => this.onContinuePress()}
-            title={i18n.t('continue')}
-            backgroundColor="rgba(0,0,0, 0.5)"
-            hidde={this.state.sent}
-            borderRadius={30}
-            loading={this.state.sending}
-            loadingRight={true}
-            disable={this.state.sending || !this.state.password || !this.state.confirmation}
-            containerViewStyle={ComponentsStyle.loginButton}
-            textStyle={ComponentsStyle.loginButtonText}
-          />}
+          {!this.state.sent &&
+            <Button
+              onPress={() => this.onContinuePress()}
+              title={i18n.t('continue')}
+              type="clear"
+              containerStyle={ComponentsStyle.loginButton}
+              titleStyle={ComponentsStyle.loginButtonText}
+              hidde={this.state.sent}
+              loading={this.state.sending}
+              loadingRight={true}
+              disable={this.state.sending || !this.state.password || !this.state.confirmation}
+            />
+          }
         </View>
       </KeyboardAvoidingView>
     );

src/capture/CaptureFab.js

@@ -29,10 +29,11 @@ export default class CaptureFab extends Component {
     return (
       <Icon
         raised
+        reverse
         name="md-create"
         type='ionicon'
-        color='#fff'
-        size={32}
+        color='#4690DF'
+        size={28}
         containerStyle={ settingsStore.leftHanded ? styles.leftSide : styles.rightSide }
         onPress={() => this.navToCapture()}
         testID={this.props.testID}
@@ -45,18 +46,14 @@ export default class CaptureFab extends Component {
 const styles = StyleSheet.create({
   rightSide: {
     position:'absolute',
-    backgroundColor:'#4690DF',
-    width:55,
-    height:55,
+    // backgroundColor:'#4690DF',
     bottom:8,
     zIndex:1000,
     right:8
   },
   leftSide: {
     position:'absolute',
-    backgroundColor:'#4690DF',
-    width:55,
-    height:55,
+    // backgroundColor:'#4690DF',
     bottom:8,
     zIndex:1000,
     left:8

src/capture/CapturePoster.js

@@ -293,7 +293,7 @@ export default class CapturePoster extends Component {
             uri={attachment.uri}
             type={attachment.type}
           />
-          <Icon raised name="md-close" type="ionicon" color='#fff' size={22} containerStyle={styles.deleteAttachment} onPress={() => this.deleteAttachment()} testID="AttachmentDeleteButton" />
+          <Icon raised reverse name="md-close" type="ionicon" color='#4690DF' size={18} containerStyle={styles.deleteAttachment} onPress={() => this.deleteAttachment()} testID="AttachmentDeleteButton" />
         </View>}
         <CaptureTabs onSelectedMedia={this.onAttachedMedia} />
       </React.Fragment>
@@ -372,7 +372,7 @@ export default class CapturePoster extends Component {
       Alert.alert(i18n.t('capture.pleaseTryAgain'));
       return false;
     }
-    
+
     if (
       !attachment.hasAttachment &&
       !text &&
@@ -543,9 +543,6 @@ const styles = StyleSheet.create({
   },
   deleteAttachment: {
     position: 'absolute',
-    backgroundColor:'#4690DF',
-    width:28,
-    height:28,
     right: 8,
     top: 0,
   }

src/channel/ChannelScreen.js

@@ -15,7 +15,7 @@ import {
   inject
 } from 'mobx-react/native'
 
-import { Icon } from 'react-native-elements'
+import { Icon } from 'react-native-elements';
 
 import ChannelHeader from './header/ChannelHeader';
 import Toolbar from './toolbar/Toolbar';

src/common/components/LicensePicker.js

@@ -6,7 +6,6 @@ import {
   Platform
 } from 'react-native';
 import { Icon } from 'react-native-elements'
-import Modal from 'react-native-modal';
 
 import { LICENSES, getLicenseText} from '../services/list-options.service';
 import { CommonStyle } from '../../styles/Common';
@@ -38,7 +37,7 @@ export default class LicensePicker extends PureComponent {
    */
   licenseSelected = (value) => {
     this.toggle(value);
-    this.props.onLicenseSelected(value)
+    this.props.onLicenseSelected(value);
   }
 
   /**

src/common/components/TagInput.js

@@ -100,6 +100,7 @@ export default class TagInput extends Component {
           keyboardType="default"
           onSubmitEditing={this.addTag}
           onEndEditing={this.addTag}
+          testID="tagInput"
         />
       </ViewCmp>
 

src/common/components/TagSelect.js

@@ -75,6 +75,7 @@ export default class TagSelect extends Component {
               key={i}
               onPress={() => this.toogle(tag)}
               onLongPress={() => this.toogleOne(tag)}
+              testID={tag.value + 'TestID'}
             >
             <Text style={[styles.tagText, textStyle, tag.selected ? [CS.colorPrimary, textSelectedStyle] : null]}>#{tag.value}</Text>
           </TouchableOpacity>)}

src/common/components/VideoBackground.e2e.js

+import React, { Component } from 'react';
+
+import {View, StyleSheet} from 'react-native';
+
+/**
+ * Mock video component for e2e (it takes too much cpu power in the simulator)
+ */
+export default class VideoBackground extends Component {
+  render() {
+    return <View style={[styles.container, {backgroundColor: 'black'}]}/>;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+  }
+});
\ No newline at end of file

src/common/components/Wizard.js

@@ -59,13 +59,13 @@ export default class Wizard extends PureComponent<Props, State>  {
       <View style={[CS.rowJustifyCenter, CS.backgroundWhite, CS.padding2x, CS.marginTop4x, CS.marginBottom4x]}>
         {first ?
           <View style={{width:50}}/> :
-          <TouchableOpacity style={[{width:50}, CS.centered]} onPress={this.previous}>
+          <TouchableOpacity style={[{width:50}, CS.centered]} onPress={this.previous} testID="wizardPrevious">
             <Icon size={34} name="keyboard-arrow-left" color={colors.primary}/>
           </TouchableOpacity>}
         <View style={[CS.flexContainer, CS.centered]}>
           <Image source={require('./../../assets/logos/bulb.png')} style={{width:35, height:60}}/>
         </View>
-        <TouchableOpacity style={[{width:50}, CS.centered]} onPress={this.next} disabled={!ready || this.state.waitingNext}>
+        <TouchableOpacity style={[{width:50}, CS.centered]} onPress={this.next} disabled={!ready || this.state.waitingNext} testID="wizardNext">
           {
             this.state.waitingNext ? <ActivityIndicator size="small"/> :
             <Icon size={34} name="keyboard-arrow-right" color={ready ? colors.primary : colors.greyed}/>

src/common/services/image-picker.service.e2e.js

+import CameraRoll from '@react-native-community/cameraroll';
+
+/**
+ * Image picker service e2e mock
+ */
+class ImagePickerService {
+
+  /**
+   * Show image picker selector
+   *
+   * We mock the image picker selector returning the first image of the cameraroll
+   * We can't controll the ios image selector because it runs in a separate process
+   *
+   * @param {string} title
+   * @param {string} type   photo or video
+   */
+  async show(title, type='photo') {
+
+    const params = {
+      first: 30,
+      assetType: 'All',
+    };
+
+    const result = await CameraRoll.getPhotos(params);
+
+    return {
+      uri: result.edges[0].node.image.uri,
+      type: result.edges[0].node.type,
+      fileName: result.edges[0].node.image.filename,
+      duration: result.edges[0].node.image.playableDuration,
+      width: result.edges[0].node.image.width,
+      height: result.edges[0].node.image.height,
+    }
+  }
+}
+
+export default new ImagePickerService();
\ No newline at end of file

src/config/Config.e2e.js

+import {
+  Platform
+} from 'react-native';
+
+import DeviceInfo from 'react-native-device-info';
+
+// export const MINDS_URI = 'https://www.minds.com/';
+// export const MINDS_URI = 'http://dev.minds.io/';
+
+// remember to update deeplink uri on AndroidManifest.xml !!!
+// export const MINDS_URI = 'http://172.16.2.61:8080/';
+export const MINDS_URI = 'https://www.minds.com/';
+export const MINDS_API_URI = 'https://www.minds.com/';
+
+export const NETWORK_TIMEOUT = 5000;
+
+export const CONECTIVITY_CHECK_URI = 'https://www.minds.com/';
+export const CONECTIVITY_CHECK_INTERVAL = 10000;
+
+export const MINDS_URI_SETTINGS = {
+  //basicAuth: 'crypto:ohms',
+};
+
+export const MINDS_MAX_VIDEO_LENGTH = 5; // in minutes
+
+export const SOCKET_URI = 'wss://ha-socket-io-us-east-1.minds.com:3030'
+
+export const MINDS_CDN_URI = 'https://cdn.minds.com/';
+export const MINDS_ASSETS_CDN_URI = 'https://cdn-assets.minds.com/';
+// export const MINDS_CDN_URI = 'http://dev.minds.io/';
+
+export const BLOCKCHAIN_URI = 'https://www.minds.com/api/v2/blockchain/proxy/';
+// export const BLOCKCHAIN_URI = 'http://localhost:9545';
+export const MINDS_LINK_URI = 'https://www.minds.com/';
+export const CODE_PUSH_TOKEN = '';
+
+/**
+ * Plataform dependant or fixed features
+ */
+export const MINDS_FEATURES = {
+  crypto: Platform.OS === 'ios' ? false : true,
+};
+
+/**
+ * Deeplink to screen/params maping
+ */
+export const MINDS_DEEPLINK = [
+  ['groups/profile/:guid/feed', 'GroupView'],
+  ['groups/profile/:guid', 'GroupView'],
+  ['notifications', 'Notifications'],
+  ['groups/:filter', 'GroupsList'],
+  ['newsfeed/:guid', 'Activity'],
+  ['media/:guid', 'Activity'],
+  ['channels/:username', 'Channel'],
+  ['blog/:filter', 'BlogList'],
+  ['blog/view/:guid', 'BlogView'],
+  [':user/blog/:slug', 'BlogView'],
+  [':username', 'Channel'],
+  ['wallet/tokens/:section', 'Wallet'],
+];
+
+export const DISABLE_PASSWORD_INPUTS = true;
+
+// IF TRUE COMMENT THE SMS PERMISSIONS IN ANDROID MANIFEST TOO!!!
+export const GOOGLE_PLAY_STORE = DeviceInfo.getBuildNumber() < 1050000000 && Platform.OS == 'android';

src/config/Config.js

@@ -59,5 +59,7 @@ export const MINDS_DEEPLINK = [
   ['wallet/tokens/:section', 'Wallet'],
 ];
 
+export const DISABLE_PASSWORD_INPUTS = false;
+
 // IF TRUE COMMENT THE SMS PERMISSIONS IN ANDROID MANIFEST TOO!!!
 export const GOOGLE_PLAY_STORE = DeviceInfo.getBuildNumber() < 1050000000 && Platform.OS == 'android';

src/discovery/DiscoveryUser.js

@@ -26,6 +26,29 @@ import SubscriptionButton from '../channel/subscription/SubscriptionButton';
 export default
 @observer
 class DiscoveryUser extends Component {
+  /**
+   * State
+   */
+  state = {
+    guid: null,
+  };
+
+  /**
+   * Derive state from props
+   * @param {object} nextProps
+   * @param {object} prevState
+   */
+  static getDerivedStateFromProps(nextProps, prevState) {
+
+    if (prevState.guid !== nextProps.row.item.guid) {
+      return {
+        guid: nextProps.row.item.guid,
+        source: { uri: MINDS_CDN_URI + 'icon/' + nextProps.row.item.guid + '/medium' }
+      }
+    }
+
+    return null;
+  }
 
   /**
    * Navigate To channel
@@ -40,35 +63,38 @@ class DiscoveryUser extends Component {
     }
   }
 
+  /**
+   * Render right button
+   */
   renderRightButton() {
     const channel = this.props.row.item;
 
     if (channel.isOwner() || this.props.hideButtons || (channel.isOpen() && !channel.can(FLAG_SUBSCRIBE) )) {
       return;
     }
+
+    const testID = (this.props.testID) ? `${this.props.testID}SubscriptionButton` : 'subscriptionButton';
+
     return (
       <SubscriptionButton
         channel={channel}
+        testID={testID}
       />
     )
   }
 
-  getChannel() {
-    return this.props.row.item;
-  }
-
   /**
    * Render
    */
   render() {
-    const item = this.getChannel();
-    const avatarImg = { uri: MINDS_CDN_URI + 'icon/' + item.guid + '/medium' };
+    const {row, ...otherProps} = this.props;
+
     return (
-      <TouchableOpacity style={styles.row} onPress={this._navToChannel}>
-        <Image source={avatarImg} style={styles.avatar} />
+      <TouchableOpacity style={styles.row} onPress={this._navToChannel} {...otherProps}>
+        <Image source={this.state.source} style={styles.avatar} />
         <View style={[CommonStyle.flexContainerCenter]}>
-          <Text style={[styles.body, CommonStyle.fontXL]}>{item.name}</Text>
-          <Text style={[styles.body, CommonStyle.fontS, CommonStyle.colorMedium]}>@{item.username}</Text>
+          <Text style={[styles.body, CommonStyle.fontXL]}>{row.item.name}</Text>
+          <Text style={[styles.body, CommonStyle.fontS, CommonStyle.colorMedium]}>@{row.item.username}</Text>
         </View>
         {this.renderRightButton()}
       </TouchableOpacity>

src/groups/GroupsBar.js

@@ -8,12 +8,11 @@ import {
 } from 'mobx-react/native'
 
 import {
-  FlatList, View, TouchableOpacity, StyleSheet, ActivityIndicator
+  FlatList, View, TouchableOpacity, StyleSheet, ActivityIndicator, Text
 } from 'react-native'
 
 import {CommonStyle as CS} from '../styles/Common';
 import GrousBarItem from './GroupsBarItem';
-import { Text } from 'react-native-elements';
 import i18n from '../common/services/i18n.service';
 
 @inject('groupsBar')

src/onboarding/steps/ChannelSetupStep.js

@@ -127,7 +127,12 @@ export default class ChannelSetupStep extends Component {
         <View style={[CS.padding4x, CS.flexContainer, CS.rowJustifyStart, CS.alignCenter]}>
           <Text style={[CS.fontXXL, CS.colorDark, CS.fontMedium]}>{i18n.t('onboarding.chooseAvatar')}</Text>
           <View style={[CS.rowJustifyEnd, CS.flexContainer]}>
-            <TouchableCustom onPress={this.changeAvatarAction} style={[styles.avatar, CS.marginLeft3x, CS.border, CS.borderGreyed ]} disabled={this.saving}>
+            <TouchableCustom
+              onPress={this.changeAvatarAction}
+              style={[styles.avatar, CS.marginLeft3x, CS.border, CS.borderGreyed ]}
+              disabled={this.saving}
+              testID="selectAvatar"
+            >
               {hasAvatar && <Image source={avatar} style={styles.wrappedAvatar} />}
 
               <View style={[styles.tapOverlayView, hasAvatar ? null : CS.backgroundTransparent]}/>

src/onboarding/steps/RewardsStep.js

@@ -124,7 +124,7 @@ export default class RewardsStep extends Component {
 
     return (
       <View>
-        <View style={[style.cols, style.form]}>
+        <View style={[style.cols, style.form]} testID="RewardsOnboarding">
           <PhoneInput
             disabled={this.state.inProgress}
             style={{ ...stylesheet.col, ...stylesheet.colFirst, ...stylesheet.phoneInput }}

src/onboarding/steps/SuggestedChannelsStep.js

@@ -17,27 +17,37 @@ import i18n from '../../common/services/i18n.service';
 @observer
 export default class SuggestedChannelsStep extends Component {
 
+  /**
+   * Component did mount
+   */
   componentDidMount() {
     this.props.onboarding.suggestedUsers.list.clearList();
     this.props.onboarding.getSuggestedUsers();
   }
 
-  renderUser = (user) => {
+  /**
+   * Render user
+   */
+  renderUser = (user, index) => {
     return <DiscoveryUser
       row={{item: user}}
       key={user.guid}
+      testID={`suggestedUser${index}`}
     />
   }
 
+  /**
+   * Render
+   */
   render() {
     return (
       <View>
-        <View style={[CS.padding4x]}>
+        <View style={[CS.padding4x]} testID="suggestedChannelWizard">
           <Text style={[CS.fontXXL, CS.colorDark, CS.fontMedium]}>{i18n.t('onboarding.suggestedChannels')}</Text>
           <Text style={[CS.fontL, CS.colorDarkGreyed, CS.marginBottom3x]}>{i18n.t('onboarding.suggestedChannelsDescription')}</Text>
         </View>
         {!this.props.onboarding.suggestedUsers.list.loaded && <ActivityIndicator/>}
-        {this.props.onboarding.suggestedUsers.list.entities.map(user => this.renderUser(user))}
+        {this.props.onboarding.suggestedUsers.list.entities.map((user, i) => this.renderUser(user, i))}
       </View>
     );
   }

src/report/ReportScreen.js

@@ -18,10 +18,8 @@ import {
 
 import reportService from './ReportService';
 
-import ModalTopbar from '../topbar/ModalTopbar';
 import colors from '../styles/Colors';
 import { CommonStyle as CS } from '../styles/Common';
-import { ComponentsStyle } from '../styles/Components';
 import i18n from '../common/services/i18n.service';
 
 import mindsService from '../common/services/minds.service';

src/settings/SettingsScreen.js

@@ -20,7 +20,7 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
 
 import authService from './../auth/AuthService';
-import { List, ListItem } from 'react-native-elements';
+import { ListItem } from 'react-native-elements';
 import { FormLabel, FormInput, Button } from 'react-native-elements';
 import settingsService from './SettingsService';
 import settingsStore from './SettingsStore';
@@ -202,7 +202,7 @@ export default class SettingsScreen extends Component {
           items={languages}
         />
         <View style={styles.scrollViewContainer}>
-          <List containerStyle={styles.container}>
+          <View style={styles.container}>
             {
               list.map((l, i) => (
                 <ListItem
@@ -221,7 +221,7 @@ export default class SettingsScreen extends Component {
                 />
               ))
             }
-          </List>
+          </View>
         </View>
       </ScrollView>
     );

src/settings/screens/BillingScreen.js

@@ -12,8 +12,7 @@ import {
 } from 'react-native';
 
 import { List, ListItem } from 'react-native-elements';
-import { FormLabel, FormInput, Button } from 'react-native-elements';
-import settingsService from '../SettingsService';
+import { Button } from 'react-native-elements';
 import i18n from '../../common/services/i18n.service';
 
 export default class BillingScreen extends Component {

src/settings/screens/EmailScreen.js

@@ -9,8 +9,7 @@ import {
   Alert,
 } from 'react-native';
 
-import { List, ListItem } from 'react-native-elements';
-import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';
+import { Input } from 'react-native-elements';
 import settingsService from '../SettingsService';
 import i18n from '../../common/services/i18n.service';
 import validator from '../../common/services/validator.service';
@@ -87,13 +86,16 @@ export default class EmailScreen extends Component {
 
     // validate
     const error = validator.emailMessage(email);
-    const message = error ? <FormValidationMessage>{error}</FormValidationMessage> : null;
 
     return (
-      <View style={[CommonStyle.flexContainer, CommonStyle.backgroundWhite]}>
-        <FormLabel labelStyle={CommonStyle.fieldLabel}>{i18n.t('settings.currentEmail')}</FormLabel>
-        <FormInput onChangeText={this.setEmail} value={email} inputStyle={CommonStyle.fieldTextInput}/>
-        {message}
+      <View style={[CommonStyle.flexContainer, CommonStyle.backgroundWhite, CommonStyle.marginTop2x]}>
+        <Input
+          label={i18n.t('settings.currentEmail')}
+          onChangeText={this.setEmail}
+          value={email}
+          errorMessage={error}
+          leftIcon={{ type: 'font-awesome', name: 'envelope-o' }}
+        />
         <Button
           text={i18n.t('save').toUpperCase()}
           loading={this.state.saving}

src/styles/Components.js

@@ -47,13 +47,15 @@ export const ComponentsStyle = StyleSheet.create({
     marginLeft: 10,
     backgroundColor: 'transparent',
     borderColor: '#FFF',
-    borderWidth: 1
+    borderWidth: 1,
+    borderRadius: 30,
   },
   loginButtonText: {
     // fontFamily: 'Roboto',
     fontSize: 16,
     fontWeight: '600',
-    letterSpacing: 1.25
+    letterSpacing: 1.25,
+    color: 'white',
   },
   registerCheckboxText: {
     color: 'white'

src/tabs/MoreScreen.js

@@ -3,38 +3,38 @@ import React, {
 } from 'react';
 
 import {
-View,
-StyleSheet,
-Text,
-ScrollView,
-BackHandler,
-Linking,
-ImageBackground,
-Alert,
-Platform,
-ToastAndroid,
-TouchableOpacity,
+  View,
+  StyleSheet,
+  Text,
+  ScrollView,
+  BackHandler,
+  Linking,
+  ImageBackground,
+  Alert,
+  Platform,
+  ToastAndroid,
+  TouchableOpacity,
 } from 'react-native';
 
 import {
-inject
+  inject
 } from 'mobx-react/native'
 
 import RNExitApp from 'react-native-exit-app';
 
 import {
-MINDS_URI,
-CODE_PUSH_TOKEN
+  MINDS_URI,
+  CODE_PUSH_TOKEN
 } from '../config/Config';
 
 import {
-StackActions,
-NavigationActions
+  StackActions,
+  NavigationActions
 } from 'react-navigation';
 
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import authService from './../auth/AuthService';
-import { List, ListItem } from 'react-native-elements'
+import { ListItem } from 'react-native-elements'
 import FastImage from 'react-native-fast-image';
 
 import { ComponentsStyle } from '../styles/Components';
@@ -198,7 +198,7 @@ export default class MoreScreen extends Component {
 
   getList(list) {
     return (
-      <List containerStyle={styles.container}>
+      <View style={styles.container}>
         {
           list.map((l, i) => (
             <ListItem
@@ -215,7 +215,7 @@ export default class MoreScreen extends Component {
             />
           ))
         }
-      </List>
+      </View>
     )
   }
 }

src/topbar/ModalTopbar.js

@@ -10,9 +10,6 @@ import {
 
 import { observer, inject } from 'mobx-react/native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { Avatar } from 'react-native-elements';
-
-import { MINDS_CDN_URI } from '../config/Config';
 
 export default class ModalTopbar extends Component {
 

src/wallet/WalletHistoryScreen.js

@@ -5,6 +5,7 @@ import React, {
 import {
   StyleSheet,
   FlatList,
+  Text,
   View
 } from 'react-native';
 
@@ -17,7 +18,6 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 
 import CenteredLoading from '../common/components/CenteredLoading';
-import { Text } from 'react-native-elements';
 import formatDate from '../common/helpers/date';
 /**
  * Notification Screen