Unit testing (#32)

* add testing lib

* remove coverage folder from git

* finished basic test setup

* fix tests typescript and import paths

* add first snapshot

* testing utils

* rename test files; update script flags; ++tests

* testing utils functions

* testing downloadAndResize wip

* remove download test

* specify unwanted coverage paths;
remove update snapshots flag

* fix strings tests

* testing downloadAndResize method

* increasing testing

* fixing snapshots wip

* fixed shell mobile snapshot

* adding snapshots for the screens

* fix onboard snapshot

* fix typescript issues

* fix TabsSelector snapshot

* Account for testing device's locale in ago() tests

* Remove platform detection on regex

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

__tests__/view/screens/Contacts.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Contacts} from '../../../src/view/screens/Contacts'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Contacts', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {},
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<Contacts {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/Home.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Home} from '../../../src/view/screens/Home'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Home', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {},
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<Home {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/Login.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {Login} from '../../../src/view/screens/Login'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Login', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<Login />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/NotFound.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {NotFound} from '../../../src/view/screens/NotFound'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('NotFound', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<NotFound />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/Notifications.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Notifications} from '../../../src/view/screens/Notifications'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Notifications', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {},
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<Notifications {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/Onboard.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import {Onboard} from '../../../src/view/screens/Onboard'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Onboard', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<Onboard />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/PostDownvotedBy.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {PostDownvotedBy} from '../../../src/view/screens/PostDownvotedBy'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('PostDownvotedBy', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+      rkey: '123123123',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<PostDownvotedBy {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/PostRepostedBy.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {PostRepostedBy} from '../../../src/view/screens/PostRepostedBy'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('PostRepostedBy', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+      rkey: '123123123',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<PostRepostedBy {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/PostThread.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {PostThread} from '../../../src/view/screens/PostThread'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('PostThread', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+      rkey: '123123123',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<PostThread {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/PostUpvotedBy.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {PostUpvotedBy} from '../../../src/view/screens/PostUpvotedBy'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('PostUpvotedBy', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+      rkey: '123123123',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<PostUpvotedBy {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/Profile.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import {Profile} from '../../../src/view/screens/Profile'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Profile', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+      user: 'test.user',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<Profile {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/ProfileFollowers.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {ProfileFollowers} from '../../../src/view/screens/ProfileFollowers'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('ProfileFollowers', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<ProfileFollowers {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/ProfileFollows.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {ProfileFollows} from '../../../src/view/screens/ProfileFollows'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('ProfileFollows', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<ProfileFollows {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/ProfileMembers.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {ProfileMembers} from '../../../src/view/screens/ProfileMembers'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('ProfileMembers', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<ProfileMembers {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/Search.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {Search} from '../../../src/view/screens/Search'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Search', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {
+      name: 'test name',
+    },
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<Search {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/Settings.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {Settings} from '../../../src/view/screens/Settings'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Settings', () => {
+  const mockedProps = {
+    navIdx: [0, 0] as [number, number],
+    params: {},
+    visible: true,
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<Settings {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/screens/__snapshots__/Contacts.test.tsx.snap

@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Contacts renders correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+          },
+          Object {
+            "fontSize": 30,
+            "fontWeight": "bold",
+            "paddingHorizontal": 12,
+            "paddingVertical": 6,
+          },
+        ]
+      }
+    >
+      Contacts
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 4,
+          "flexDirection": "row",
+          "marginBottom": 6,
+          "marginHorizontal": 10,
+          "paddingHorizontal": 8,
+          "paddingVertical": 8,
+        }
+      }
+    >
+      <
+        icon="magnifying-glass"
+        size={16}
+        style={
+          Object {
+            "color": "#645454",
+            "marginRight": 8,
+          }
+        }
+      />
+      <TextInput
+        onChangeText={[Function]}
+        placeholder="Search"
+        placeholderTextColor="#968d8d"
+        style={
+          Object {
+            "color": "#000000",
+            "flex": 1,
+          }
+        }
+        value=""
+      />
+    </View>
+  </View>
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#ffffff",
+          "flexDirection": "row",
+          "paddingBottom": 12,
+          "paddingHorizontal": 14,
+          "paddingTop": 8,
+        },
+      ]
+    }
+  >
+    <View
+      collapsable={false}
+      style={
+        Object {
+          "backgroundColor": "#000000",
+          "bottom": 0,
+          "height": 4,
+          "left": 0,
+          "position": "absolute",
+          "width": 0,
+        }
+      }
+    />
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "marginRight": 14,
+          "paddingHorizontal": 10,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 16,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        All
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "marginRight": 14,
+          "paddingHorizontal": 10,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#645454",
+              "fontSize": 16,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Following
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "marginRight": 14,
+          "paddingHorizontal": 10,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#645454",
+              "fontSize": 16,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Scenes
+      </Text>
+    </View>
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/Home.test.tsx.snap

@@ -0,0 +1,594 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Home renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Bluesky
+      </Text>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#968d8d",
+              "fontSize": 18,
+              "marginLeft": 6,
+              "maxWidth": 200,
+            },
+          ]
+        }
+      >
+        Private Beta
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 6,
+          "flexDirection": "row",
+          "margin": 2,
+          "marginBottom": 0,
+          "opacity": 1,
+          "paddingHorizontal": 10,
+          "paddingVertical": 10,
+        }
+      }
+    >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "opacity": 1,
+            "width": 50,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight={50}
+          bbWidth={50}
+          focusable={false}
+          height={50}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              Object {
+                "flex": 0,
+                "height": 50,
+                "width": 50,
+              },
+            ]
+          }
+          vbHeight={100}
+          vbWidth={100}
+          width={50}
+        >
+          <RNSVGGroup>
+            <RNSVGDefs>
+              <RNSVGLinearGradient
+                gradient={
+                  Array [
+                    0,
+                    -1292135,
+                    1,
+                    -2424577,
+                  ]
+                }
+                gradientTransform={null}
+                gradientUnits={0}
+                name="grad"
+                x1="0"
+                x2="1"
+                y1="0"
+                y2="1"
+              />
+            </RNSVGDefs>
+            <RNSVGCircle
+              cx="50"
+              cy="50"
+              fill={
+                Array [
+                  1,
+                  "grad",
+                ]
+              }
+              propList={
+                Array [
+                  "fill",
+                ]
+              }
+              r="50"
+            />
+            <RNSVGText
+              content={null}
+              dx={Array []}
+              dy={Array []}
+              fill={4294967295}
+              font={
+                Object {
+                  "fontSize": "50",
+                  "fontWeight": "bold",
+                  "textAnchor": "middle",
+                }
+              }
+              propList={
+                Array [
+                  "fill",
+                ]
+              }
+              rotate={Array []}
+              x={
+                Array [
+                  "50",
+                ]
+              }
+              y={
+                Array [
+                  "67",
+                ]
+              }
+            >
+              <RNSVGTSpan
+                content="X"
+                dx={Array []}
+                dy={Array []}
+                font={Object {}}
+                rotate={Array []}
+                x={Array []}
+                y={Array []}
+              />
+            </RNSVGText>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "marginLeft": 10,
+          }
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Object {
+                "color": "#968d8d",
+                "fontSize": 17,
+              },
+            ]
+          }
+        >
+          What's up?
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "backgroundColor": "#f8f3f3",
+            "borderRadius": 30,
+            "paddingHorizontal": 14,
+            "paddingVertical": 6,
+          }
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Object {
+                "color": "#645454",
+              },
+            ]
+          }
+        >
+          Post
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/Login.test.tsx.snap

@@ -0,0 +1,371 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Login renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "flex": 2,
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "justifyContent": "center",
+        }
+      }
+    >
+      <RNSVGSvgView
+        bbHeight="100"
+        bbWidth="100"
+        focusable={false}
+        height="100"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 100,
+              "width": 100,
+            },
+          ]
+        }
+        width="100"
+      >
+        <RNSVGGroup>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={null}
+            propList={
+              Array [
+                "fill",
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            r="46"
+            stroke={4294967295}
+            strokeWidth={2}
+          />
+          <RNSVGLine
+            propList={
+              Array [
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            stroke={4294967295}
+            strokeWidth={1}
+            x1="30"
+            x2="30"
+            y1="0"
+            y2="100"
+          />
+          <RNSVGLine
+            propList={
+              Array [
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            stroke={4294967295}
+            strokeWidth={1}
+            x1="74"
+            x2="74"
+            y1="0"
+            y2="100"
+          />
+          <RNSVGLine
+            propList={
+              Array [
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            stroke={4294967295}
+            strokeWidth={1}
+            x1="0"
+            x2="100"
+            y1="22"
+            y2="22"
+          />
+          <RNSVGLine
+            propList={
+              Array [
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            stroke={4294967295}
+            strokeWidth={1}
+            x1="0"
+            x2="100"
+            y1="74"
+            y2="74"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={null}
+            font={
+              Object {
+                "fontSize": "60",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            rotate={Array []}
+            stroke={4294967295}
+            strokeWidth={2}
+            x={
+              Array [
+                "52",
+              ]
+            }
+            y={
+              Array [
+                "70",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="B"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+          },
+          Object {
+            "color": "#ffffff",
+            "fontSize": 68,
+            "fontWeight": "bold",
+            "textAlign": "center",
+          },
+        ]
+      }
+    >
+      Bluesky
+    </Text>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+          },
+          Object {
+            "color": "#ffffff",
+            "fontSize": 18,
+            "textAlign": "center",
+          },
+        ]
+      }
+    >
+      [ private beta ]
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "backgroundColor": "#0085ff",
+          "borderColor": "#ffffff",
+          "borderRadius": 10,
+          "borderWidth": 1,
+          "marginBottom": 20,
+          "marginHorizontal": 20,
+          "opacity": 1,
+          "paddingVertical": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#ffffff",
+              "fontSize": 18,
+              "fontWeight": "bold",
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        Create a new account
+      </Text>
+    </View>
+    <View
+      style={
+        Object {
+          "marginBottom": 20,
+        }
+      }
+    >
+      <RNSVGSvgView
+        bbHeight="1"
+        bbWidth={750}
+        focusable={false}
+        height="1"
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "position": "absolute",
+              "top": 10,
+            },
+            Object {
+              "flex": 0,
+              "height": 1,
+              "width": 750,
+            },
+          ]
+        }
+        width={750}
+      >
+        <RNSVGGroup>
+          <RNSVGLine
+            propList={
+              Array [
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            stroke={4294967295}
+            strokeWidth="1"
+            x1="30"
+            x2={355}
+            y1="0"
+            y2="0"
+          />
+          <RNSVGLine
+            propList={
+              Array [
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            stroke={4294967295}
+            strokeWidth="1"
+            x1={395}
+            x2={720}
+            y1="0"
+            y2="0"
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#ffffff",
+              "fontSize": 16,
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        or
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "backgroundColor": "#0085ff",
+          "borderColor": "#ffffff",
+          "borderRadius": 10,
+          "borderWidth": 1,
+          "marginBottom": 20,
+          "marginHorizontal": 20,
+          "opacity": 1,
+          "paddingVertical": 16,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#ffffff",
+              "fontSize": 18,
+              "fontWeight": "bold",
+              "textAlign": "center",
+            },
+          ]
+        }
+      >
+        Sign in
+      </Text>
+    </View>
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/NotFound.test.tsx.snap

@@ -0,0 +1,431 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotFound renders correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Page not found
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "justifyContent": "center",
+        "paddingTop": 100,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+          },
+          Object {
+            "fontSize": 40,
+            "fontWeight": "bold",
+          },
+        ]
+      }
+    >
+      Page not found
+    </Text>
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "opacity": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {},
+          ]
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#007AFF",
+                "fontSize": 18,
+                "margin": 8,
+                "textAlign": "center",
+              },
+            ]
+          }
+        >
+          Home
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/Notifications.test.tsx.snap

@@ -0,0 +1,378 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Notifications renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Notifications
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  />
+</View>
+`;

__tests__/view/screens/__snapshots__/Onboard.test.tsx.snap

@@ -0,0 +1,388 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Onboard renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#fff",
+      "flex": 1,
+    }
+  }
+>
+  <RCTSafeAreaView
+    emulateUnlessSupported={true}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      onLayout={[Function]}
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "overflow": "hidden",
+          },
+          undefined,
+        ]
+      }
+    >
+      <RNCViewPager
+        collapsable={false}
+        initialPage={0}
+        keyboardDismissMode="on-drag"
+        layout={
+          Object {
+            "height": 0,
+            "width": 750,
+          }
+        }
+        layoutDirection="ltr"
+        onMoveShouldSetResponderCapture={[Function]}
+        onPageScroll={[Function]}
+        onPageScrollStateChanged={[Function]}
+        onPageSelected={[Function]}
+        scrollEnabled={true}
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            accessibilityElementsHidden={false}
+            importantForAccessibility="auto"
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                Object {
+                  "width": 750,
+                },
+                Array [
+                  undefined,
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                ],
+              ]
+            }
+          >
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                  "paddingHorizontal": 16,
+                  "paddingTop": 80,
+                }
+              }
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                    },
+                    Array [
+                      Object {
+                        "fontSize": 42,
+                        "fontWeight": "bold",
+                        "marginBottom": 16,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "fontWeight": "400",
+                      },
+                      Object {
+                        "lineHeight": 60,
+                        "paddingBottom": 50,
+                        "paddingTop": 50,
+                      },
+                    ],
+                  ]
+                }
+              >
+                Welcome to 
+                <Text
+                  style={
+                    Array [
+                      Object {
+                        "color": "#000000",
+                      },
+                      Array [
+                        Object {
+                          "fontWeight": "bold",
+                        },
+                        Object {
+                          "color": "#0085ff",
+                        },
+                        Object {
+                          "fontSize": 56,
+                        },
+                      ],
+                    ]
+                  }
+                >
+                  Bluesky
+                </Text>
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                    },
+                    Array [
+                      Object {
+                        "fontSize": 18,
+                        "marginBottom": 16,
+                        "textAlign": "center",
+                      },
+                      Object {
+                        "fontSize": 24,
+                      },
+                    ],
+                  ]
+                }
+              >
+                Let's do a quick tour through the new features.
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "bottom": 0,
+              "left": 0,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+            }
+          }
+        >
+          <View
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            style={
+              Array [
+                Object {
+                  "flex": 1,
+                  "overflow": "hidden",
+                },
+                Object {
+                  "width": 750,
+                },
+                Array [
+                  undefined,
+                  Object {
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                ],
+              ]
+            }
+          />
+        </View>
+      </RNCViewPager>
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+          }
+        }
+      >
+        <View
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <Text
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 1,
+              }
+            }
+          >
+            °
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "alignItems": "center",
+              "opacity": 1,
+              "padding": 16,
+            }
+          }
+        >
+          <Text
+            collapsable={false}
+            style={
+              Object {
+                "opacity": 0.5,
+              }
+            }
+          >
+            °
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "flexDirection": "row",
+          "paddingBottom": 24,
+          "paddingHorizontal": 32,
+        }
+      }
+    >
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Array [
+                Object {
+                  "color": "#0085ff",
+                },
+                Object {
+                  "fontSize": 18,
+                },
+              ],
+            ]
+          }
+        >
+          Skip
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Array [
+                Object {
+                  "color": "#0085ff",
+                },
+                Object {
+                  "fontSize": 18,
+                },
+              ],
+            ]
+          }
+        >
+          Next
+        </Text>
+      </View>
+    </View>
+  </RCTSafeAreaView>
+</View>
+`;

__tests__/view/screens/__snapshots__/PostDownvotedBy.test.tsx.snap

@@ -0,0 +1,368 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostDownvotedBy renders correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Downvoted by
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View>
+    <ActivityIndicator />
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/PostRepostedBy.test.tsx.snap

@@ -0,0 +1,368 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostRepostedBy renders correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Reposted by
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View>
+    <ActivityIndicator />
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/PostThread.test.tsx.snap

@@ -0,0 +1,437 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostThread renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Post
+      </Text>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#968d8d",
+              "fontSize": 18,
+              "marginLeft": 6,
+              "maxWidth": 200,
+            },
+          ]
+        }
+      >
+        by test name
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <RCTScrollView
+      contentContainerStyle={
+        Object {
+          "paddingBottom": 200,
+        }
+      }
+      data={Array []}
+      getItem={[Function]}
+      getItemCount={[Function]}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onRefresh={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onScrollToIndexFailed={[Function]}
+      refreshControl={
+        <RefreshControlMock
+          onRefresh={[Function]}
+          refreshing={false}
+        />
+      }
+      refreshing={false}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={50}
+      stickyHeaderIndices={Array []}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+      viewabilityConfigCallbackPairs={Array []}
+    >
+      <RCTRefreshControl />
+      <View />
+    </RCTScrollView>
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/PostUpvotedBy.test.tsx.snap

@@ -0,0 +1,368 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PostUpvotedBy renders correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Upvoted by
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View>
+    <ActivityIndicator />
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/Profile.test.tsx.snap

@@ -0,0 +1,513 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Profile renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "flexDirection": "column",
+      "height": "100%",
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        test name
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#e7e9ea",
+            "borderRadius": 6,
+            "height": 120,
+            "overflow": "hidden",
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#e7e9ea",
+            "height": 120,
+            "width": "100%",
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        Object {
+          "backgroundColor": "#ffffff",
+          "borderColor": "#ffffff",
+          "borderRadius": 42,
+          "borderWidth": 2,
+          "height": 84,
+          "left": 10,
+          "position": "absolute",
+          "top": 80,
+          "width": 84,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#e7e9ea",
+              "borderRadius": 6,
+              "height": 80,
+              "overflow": "hidden",
+              "width": 80,
+            },
+            Object {
+              "borderRadius": 40,
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Object {
+              "backgroundColor": "#e7e9ea",
+              "height": 80,
+              "width": 80,
+            }
+          }
+        />
+      </View>
+    </View>
+    <View
+      style={
+        Object {
+          "paddingBottom": 4,
+          "paddingHorizontal": 14,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "marginBottom": 12,
+              "marginLeft": "auto",
+            },
+          ]
+        }
+      >
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#e7e9ea",
+                "borderRadius": 6,
+                "height": 31,
+                "overflow": "hidden",
+                "width": 100,
+              },
+              Object {
+                "borderRadius": 50,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "backgroundColor": "#e7e9ea",
+                "height": 31,
+                "width": 100,
+              }
+            }
+          />
+        </View>
+      </View>
+      <View
+        style={Object {}}
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Object {
+                "fontSize": 28,
+                "fontWeight": "bold",
+              },
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/ProfileFollowers.test.tsx.snap

@@ -0,0 +1,386 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfileFollowers renders correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Followers
+      </Text>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#968d8d",
+              "fontSize": 18,
+              "marginLeft": 6,
+              "maxWidth": 200,
+            },
+          ]
+        }
+      >
+        of test name
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View>
+    <ActivityIndicator />
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/ProfileFollows.test.tsx.snap

@@ -0,0 +1,386 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfileFollows renders correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Followed
+      </Text>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#968d8d",
+              "fontSize": 18,
+              "marginLeft": 6,
+              "maxWidth": 200,
+            },
+          ]
+        }
+      >
+        by test name
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View>
+    <ActivityIndicator />
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/ProfileMembers.test.tsx.snap

@@ -0,0 +1,386 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProfileMembers renders correctly 1`] = `
+<View>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Members
+      </Text>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#968d8d",
+              "fontSize": 18,
+              "marginLeft": 6,
+              "maxWidth": 200,
+            },
+          ]
+        }
+      >
+        of test name
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View>
+    <ActivityIndicator />
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/Search.test.tsx.snap

@@ -0,0 +1,514 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Search renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Search
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingHorizontal": 16,
+        "paddingVertical": 16,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={24}
+      bbWidth={24}
+      color={4290886073}
+      fill="none"
+      focusable={false}
+      height={24}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      stroke="currentColor"
+      strokeWidth={2}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "alignSelf": "center",
+            "color": "#c1b9b9",
+            "marginRight": 10,
+          },
+          Object {
+            "flex": 0,
+            "height": 24,
+            "width": 24,
+          },
+        ]
+      }
+      tintColor={4290886073}
+      vbHeight={24}
+      vbWidth={24}
+      width={24}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          Array [
+            "fill",
+            "stroke",
+            "strokeWidth",
+          ]
+        }
+        stroke={
+          Array [
+            2,
+          ]
+        }
+        strokeWidth={2}
+      >
+        <RNSVGPath
+          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          propList={
+            Array [
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+    <TextInput
+      onChangeText={[Function]}
+      placeholder="Type your query here..."
+      placeholderTextColor="#968d8d"
+      returnKeyType="search"
+      selectTextOnFocus={true}
+      style={
+        Object {
+          "color": "#000000",
+          "flex": 1,
+          "fontSize": 16,
+        }
+      }
+    />
+  </View>
+  <View
+    style={
+      Object {
+        "backgroundColor": "#f8f3f3",
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#f8f3f3",
+            "flex": 1,
+          }
+        }
+      >
+        <RCTScrollView
+          data={Array []}
+          getItem={[Function]}
+          getItemCount={[Function]}
+          keyExtractor={[Function]}
+          onContentSizeChange={[Function]}
+          onLayout={[Function]}
+          onMomentumScrollBegin={[Function]}
+          onMomentumScrollEnd={[Function]}
+          onScroll={[Function]}
+          onScrollBeginDrag={[Function]}
+          onScrollEndDrag={[Function]}
+          removeClippedSubviews={false}
+          renderItem={[Function]}
+          scrollEventThrottle={50}
+          stickyHeaderIndices={Array []}
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+          viewabilityConfigCallbackPairs={Array []}
+        >
+          <View />
+        </RCTScrollView>
+      </View>
+    </View>
+  </View>
+</View>
+`;

__tests__/view/screens/__snapshots__/Settings.test.tsx.snap

@@ -0,0 +1,631 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Settings renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flex": 1,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "flexDirection": "row",
+        "paddingBottom": 6,
+        "paddingHorizontal": 12,
+        "paddingTop": 6,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 30,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "height": 30,
+          "opacity": 1,
+          "width": 40,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={30}
+        bbWidth={30}
+        focusable={false}
+        height={30}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "flex": 0,
+              "height": 30,
+              "width": 30,
+            },
+          ]
+        }
+        vbHeight={100}
+        vbWidth={100}
+        width={30}
+      >
+        <RNSVGGroup>
+          <RNSVGDefs>
+            <RNSVGLinearGradient
+              gradient={
+                Array [
+                  0,
+                  -1292135,
+                  1,
+                  -2424577,
+                ]
+              }
+              gradientTransform={null}
+              gradientUnits={0}
+              name="grad"
+              x1="0"
+              x2="1"
+              y1="0"
+              y2="1"
+            />
+          </RNSVGDefs>
+          <RNSVGCircle
+            cx="50"
+            cy="50"
+            fill={
+              Array [
+                1,
+                "grad",
+              ]
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            r="50"
+          />
+          <RNSVGText
+            content={null}
+            dx={Array []}
+            dy={Array []}
+            fill={4294967295}
+            font={
+              Object {
+                "fontSize": "50",
+                "fontWeight": "bold",
+                "textAnchor": "middle",
+              }
+            }
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+            rotate={Array []}
+            x={
+              Array [
+                "50",
+              ]
+            }
+            y={
+              Array [
+                "67",
+              ]
+            }
+          >
+            <RNSVGTSpan
+              content="X"
+              dx={Array []}
+              dy={Array []}
+              font={Object {}}
+              rotate={Array []}
+              x={Array []}
+              y={Array []}
+            />
+          </RNSVGText>
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      pointerEvents="none"
+      style={
+        Object {
+          "alignItems": "baseline",
+          "flexDirection": "row",
+          "marginRight": "auto",
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+              "fontSize": 21,
+              "fontWeight": "600",
+            },
+          ]
+        }
+      >
+        Settings
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="plus"
+        size={18}
+      />
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={
+        Object {
+          "bottom": 10,
+          "left": 10,
+          "right": 10,
+          "top": 10,
+        }
+      }
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f8f3f3",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <RNSVGSvgView
+        align="xMidYMid"
+        bbHeight={18}
+        bbWidth={18}
+        color={4278190080}
+        fill="none"
+        focusable={false}
+        height={18}
+        meetOrSlice={0}
+        minX={0}
+        minY={0}
+        stroke="currentColor"
+        strokeWidth={3}
+        style={
+          Array [
+            Object {
+              "backgroundColor": "transparent",
+              "borderWidth": 0,
+            },
+            Object {
+              "color": "#000000",
+              "position": "relative",
+              "top": -1,
+            },
+            Object {
+              "flex": 0,
+              "height": 18,
+              "width": 18,
+            },
+          ]
+        }
+        tintColor={4278190080}
+        vbHeight={24}
+        vbWidth={24}
+        width={18}
+      >
+        <RNSVGGroup
+          fill={null}
+          propList={
+            Array [
+              "fill",
+              "stroke",
+              "strokeWidth",
+            ]
+          }
+          stroke={
+            Array [
+              2,
+            ]
+          }
+          strokeWidth={3}
+        >
+          <RNSVGPath
+            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+            propList={
+              Array [
+                "strokeLinecap",
+                "strokeLinejoin",
+              ]
+            }
+            strokeLinecap={1}
+            strokeLinejoin={1}
+          />
+        </RNSVGGroup>
+      </RNSVGSvgView>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 20,
+          "flexDirection": "row",
+          "height": 36,
+          "justifyContent": "center",
+          "marginLeft": 8,
+          "opacity": 1,
+          "width": 36,
+        }
+      }
+    >
+      <
+        icon="signal"
+        size={18}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      />
+      <
+        icon="x"
+        size={12}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "color": "#d1106f",
+            "left": -4,
+            "position": "relative",
+            "top": 6,
+          }
+        }
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginTop": 10,
+        },
+        Object {
+          "paddingLeft": 10,
+        },
+        Object {
+          "paddingRight": 10,
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#000000",
+            },
+          ]
+        }
+      >
+        Signed in as
+      </Text>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      />
+      <View
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "opacity": 1,
+          }
+        }
+      >
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Array [
+                Object {
+                  "color": "#0085ff",
+                },
+                Object {
+                  "fontWeight": "bold",
+                },
+              ],
+            ]
+          }
+        >
+          Sign out
+        </Text>
+      </View>
+    </View>
+    <View
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+    >
+      <View
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderRadius": 4,
+            "flexDirection": "row",
+            "marginVertical": 6,
+            "paddingHorizontal": 10,
+            "paddingVertical": 10,
+          }
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight={40}
+          bbWidth={40}
+          focusable={false}
+          height={40}
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              Object {
+                "flex": 0,
+                "height": 40,
+                "width": 40,
+              },
+            ]
+          }
+          vbHeight={100}
+          vbWidth={100}
+          width={40}
+        >
+          <RNSVGGroup>
+            <RNSVGDefs>
+              <RNSVGLinearGradient
+                gradient={
+                  Array [
+                    0,
+                    -1292135,
+                    1,
+                    -2424577,
+                  ]
+                }
+                gradientTransform={null}
+                gradientUnits={0}
+                name="grad"
+                x1="0"
+                x2="1"
+                y1="0"
+                y2="1"
+              />
+            </RNSVGDefs>
+            <RNSVGCircle
+              cx="50"
+              cy="50"
+              fill={
+                Array [
+                  1,
+                  "grad",
+                ]
+              }
+              propList={
+                Array [
+                  "fill",
+                ]
+              }
+              r="50"
+            />
+            <RNSVGText
+              content={null}
+              dx={Array []}
+              dy={Array []}
+              fill={4294967295}
+              font={
+                Object {
+                  "fontSize": "50",
+                  "fontWeight": "bold",
+                  "textAnchor": "middle",
+                }
+              }
+              propList={
+                Array [
+                  "fill",
+                ]
+              }
+              rotate={Array []}
+              x={
+                Array [
+                  "50",
+                ]
+              }
+              y={
+                Array [
+                  "67",
+                ]
+              }
+            >
+              <RNSVGTSpan
+                content="X"
+                dx={Array []}
+                dy={Array []}
+                font={Object {}}
+                rotate={Array []}
+                x={Array []}
+                y={Array []}
+              />
+            </RNSVGText>
+          </RNSVGGroup>
+        </RNSVGSvgView>
+        <View
+          style={
+            Array [
+              Object {
+                "marginLeft": 10,
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Array [
+                  Object {
+                    "fontSize": 18,
+                  },
+                  Object {
+                    "color": "#000000",
+                  },
+                ],
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Array [
+                  Object {
+                    "color": "#645454",
+                  },
+                ],
+              ]
+            }
+          >
+            @
+            
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

__tests__/view/shell/mobile/Composer.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import {Composer} from '../../../../src/view/shell/mobile/Composer'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Composer', () => {
+  const mockedProps = {
+    active: true,
+    winHeight: 844,
+    replyTo: {
+      author: {avatar: undefined, displayName: 'Alice', handle: 'alice.test'},
+      cid: 'bafyreieucrv36ylxrut4dr4jj264q2jj2vt2vfvhjfchgw3vua4gksvzia',
+      text: 'Captain, maybe we ought to turn on the searchlights now. No… that’s just what they’ll be expecting us to do.',
+      uri: 'at://did:plc:v3xz273ea2dzjpu2szsjzfue/app.bsky.feed.post/3jkcir3fhqv2u',
+    },
+    onPost: jest.fn(),
+    onClose: jest.fn(),
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<Composer {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/shell/mobile/Menu.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {Menu} from '../../../../src/view/shell/mobile/Menu'
+import renderer from 'react-test-renderer'
+// import {render} from '../../../../jest/test-utils'
+
+describe('Menu', () => {
+  const mockedProps = {
+    visible: true,
+    onClose: jest.fn(),
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<Menu {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/shell/mobile/TabsSelector.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {Animated} from 'react-native'
+import renderer from 'react-test-renderer'
+import {TabsSelector} from '../../../../src/view/shell/mobile/TabsSelector'
+// import {render} from '../../../../jest/test-utils'
+
+describe('TabsSelector', () => {
+  const mockedProps = {
+    active: true,
+    tabMenuInterp: new Animated.Value(0),
+    onClose: jest.fn(),
+  }
+  it('renders correctly', () => {
+    const tree = renderer.create(<TabsSelector {...mockedProps} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})

__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap

@@ -0,0 +1,659 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Composer renders correctly 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "backgroundColor": "#fff",
+      "bottom": 0,
+      "paddingTop": 24,
+      "position": "absolute",
+      "top": 0,
+      "transform": Array [
+        Object {
+          "translateY": 844,
+        },
+      ],
+      "width": "100%",
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#fff",
+          "flex": 1,
+          "flexDirection": "column",
+          "height": "100%",
+          "padding": 15,
+          "paddingBottom": 0,
+        },
+        Object {
+          "paddingBottom": 0,
+        },
+      ]
+    }
+  >
+    <RCTSafeAreaView
+      emulateUnlessSupported={true}
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "height": 55,
+            "paddingBottom": 10,
+            "paddingHorizontal": 5,
+          }
+        }
+      >
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Array [
+                  Object {
+                    "color": "#0085ff",
+                  },
+                  Object {
+                    "fontSize": 18,
+                  },
+                ],
+              ]
+            }
+          >
+            Cancel
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+            }
+          }
+        >
+          <BVLinearGradient
+            colors={
+              Array [
+                4292542719,
+                4294901882,
+              ]
+            }
+            endPoint={
+              Object {
+                "x": 1,
+                "y": 1,
+              }
+            }
+            locations={null}
+            startPoint={
+              Object {
+                "x": 0,
+                "y": 0,
+              }
+            }
+            style={
+              Object {
+                "borderRadius": 20,
+                "paddingHorizontal": 20,
+                "paddingVertical": 6,
+              }
+            }
+          >
+            <Text
+              style={
+                Array [
+                  Object {
+                    "color": "#000000",
+                  },
+                  Array [
+                    Object {
+                      "color": "#ffffff",
+                    },
+                    Object {
+                      "fontSize": 16,
+                    },
+                    Object {
+                      "fontWeight": "bold",
+                    },
+                  ],
+                ]
+              }
+            >
+              Reply
+            </Text>
+          </BVLinearGradient>
+        </View>
+      </View>
+      <RCTScrollView
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <View>
+          <View
+            style={
+              Object {
+                "borderTopColor": "#e4e2e2",
+                "borderTopWidth": 1,
+                "flexDirection": "row",
+                "paddingBottom": 16,
+                "paddingTop": 16,
+              }
+            }
+          >
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={50}
+              bbWidth={50}
+              focusable={false}
+              height={50}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  Object {
+                    "flex": 0,
+                    "height": 50,
+                    "width": 50,
+                  },
+                ]
+              }
+              vbHeight={100}
+              vbWidth={100}
+              width={50}
+            >
+              <RNSVGGroup>
+                <RNSVGDefs>
+                  <RNSVGLinearGradient
+                    gradient={
+                      Array [
+                        0,
+                        -16742913,
+                        1,
+                        -14631929,
+                      ]
+                    }
+                    gradientTransform={null}
+                    gradientUnits={0}
+                    name="grad"
+                    x1="0"
+                    x2="1"
+                    y1="0"
+                    y2="1"
+                  />
+                </RNSVGDefs>
+                <RNSVGCircle
+                  cx="50"
+                  cy="50"
+                  fill={
+                    Array [
+                      1,
+                      "grad",
+                    ]
+                  }
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  r="50"
+                />
+                <RNSVGText
+                  content={null}
+                  dx={Array []}
+                  dy={Array []}
+                  fill={4294967295}
+                  font={
+                    Object {
+                      "fontSize": "50",
+                      "fontWeight": "bold",
+                      "textAnchor": "middle",
+                    }
+                  }
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  rotate={Array []}
+                  x={
+                    Array [
+                      "50",
+                    ]
+                  }
+                  y={
+                    Array [
+                      "67",
+                    ]
+                  }
+                >
+                  <RNSVGTSpan
+                    content="A"
+                    dx={Array []}
+                    dy={Array []}
+                    font={Object {}}
+                    rotate={Array []}
+                    x={Array []}
+                    y={Array []}
+                  />
+                </RNSVGText>
+              </RNSVGGroup>
+            </RNSVGSvgView>
+            <View
+              style={
+                Object {
+                  "flex": 1,
+                  "paddingLeft": 13,
+                  "paddingRight": 8,
+                }
+              }
+            >
+              <Text
+                onLongPress={[Function]}
+                onPress={[Function]}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                    },
+                    Array [
+                      Object {
+                        "fontSize": 16,
+                      },
+                      Object {
+                        "fontWeight": "bold",
+                      },
+                      Object {
+                        "color": "#000000",
+                      },
+                    ],
+                  ]
+                }
+              >
+                Alice
+              </Text>
+              <Text
+                numberOfLines={6}
+                style={
+                  Array [
+                    Object {
+                      "color": "#000000",
+                    },
+                    Array [
+                      Object {
+                        "fontSize": 16,
+                      },
+                      Object {
+                        "lineHeight": 20.8,
+                      },
+                      Object {
+                        "color": "#000000",
+                      },
+                    ],
+                  ]
+                }
+              >
+                Captain, maybe we ought to turn on the searchlights now. No… that’s just what they’ll be expecting us to do.
+              </Text>
+            </View>
+          </View>
+          <View
+            style={
+              Array [
+                Object {
+                  "borderTopColor": "#e4e2e2",
+                  "borderTopWidth": 1,
+                  "flexDirection": "row",
+                  "paddingTop": 16,
+                },
+                Object {
+                  "flex": 1,
+                },
+              ]
+            }
+          >
+            <RNSVGSvgView
+              align="xMidYMid"
+              bbHeight={50}
+              bbWidth={50}
+              focusable={false}
+              height={50}
+              meetOrSlice={0}
+              minX={0}
+              minY={0}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  Object {
+                    "flex": 0,
+                    "height": 50,
+                    "width": 50,
+                  },
+                ]
+              }
+              vbHeight={100}
+              vbWidth={100}
+              width={50}
+            >
+              <RNSVGGroup>
+                <RNSVGDefs>
+                  <RNSVGLinearGradient
+                    gradient={
+                      Array [
+                        0,
+                        -1292135,
+                        1,
+                        -2424577,
+                      ]
+                    }
+                    gradientTransform={null}
+                    gradientUnits={0}
+                    name="grad"
+                    x1="0"
+                    x2="1"
+                    y1="0"
+                    y2="1"
+                  />
+                </RNSVGDefs>
+                <RNSVGCircle
+                  cx="50"
+                  cy="50"
+                  fill={
+                    Array [
+                      1,
+                      "grad",
+                    ]
+                  }
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  r="50"
+                />
+                <RNSVGText
+                  content={null}
+                  dx={Array []}
+                  dy={Array []}
+                  fill={4294967295}
+                  font={
+                    Object {
+                      "fontSize": "50",
+                      "fontWeight": "bold",
+                      "textAnchor": "middle",
+                    }
+                  }
+                  propList={
+                    Array [
+                      "fill",
+                    ]
+                  }
+                  rotate={Array []}
+                  x={
+                    Array [
+                      "50",
+                    ]
+                  }
+                  y={
+                    Array [
+                      "67",
+                    ]
+                  }
+                >
+                  <RNSVGTSpan
+                    content="X"
+                    dx={Array []}
+                    dy={Array []}
+                    font={Object {}}
+                    rotate={Array []}
+                    x={Array []}
+                    y={Array []}
+                  />
+                </RNSVGText>
+              </RNSVGGroup>
+            </RNSVGSvgView>
+            <TextInput
+              multiline={true}
+              onChangeText={[Function]}
+              placeholder="Write your reply"
+              placeholderTextColor="#968d8d"
+              scrollEnabled={true}
+              style={
+                Object {
+                  "alignSelf": "flex-start",
+                  "color": "#000000",
+                  "flex": 1,
+                  "fontSize": 18,
+                  "marginLeft": 8,
+                  "padding": 5,
+                }
+              }
+            />
+          </View>
+        </View>
+      </RCTScrollView>
+      <View
+        style={
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "borderTopColor": "#e4e2e2",
+            "borderTopWidth": 1,
+            "flexDirection": "row",
+            "paddingRight": 5,
+            "paddingVertical": 10,
+          }
+        }
+      >
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            Object {
+              "bottom": 10,
+              "left": 10,
+              "right": 10,
+              "top": 10,
+            }
+          }
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "opacity": 1,
+              "paddingLeft": 5,
+            }
+          }
+        >
+          <
+            icon={
+              Array [
+                "far",
+                "image",
+              ]
+            }
+            size={24}
+            style={
+              Object {
+                "color": "#0085ff",
+              }
+            }
+          />
+        </View>
+        <View
+          style={
+            Object {
+              "flex": 1,
+            }
+          }
+        />
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Array [
+                Object {
+                  "marginRight": 10,
+                },
+                Object {
+                  "color": undefined,
+                },
+              ],
+            ]
+          }
+        >
+          256
+        </Text>
+        <View>
+          <View
+            indeterminateAnimationDuration={1000}
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "overflow": "hidden",
+                },
+                undefined,
+              ]
+            }
+          >
+            <RNSVGSvgView
+              bbHeight={30}
+              bbWidth={30}
+              collapsable={false}
+              focusable={false}
+              height={30}
+              style={
+                Array [
+                  Object {
+                    "backgroundColor": "transparent",
+                    "borderWidth": 0,
+                  },
+                  Object {},
+                  Object {
+                    "flex": 0,
+                    "height": 30,
+                    "width": 30,
+                  },
+                ]
+              }
+              width={30}
+            >
+              <RNSVGGroup>
+                <RNSVGPath
+                  d="M15 2.5
+          A12.5 12.5 0 0 1 15 2.5"
+                  propList={
+                    Array [
+                      "stroke",
+                      "strokeWidth",
+                      "strokeLinecap",
+                    ]
+                  }
+                  stroke={4278221567}
+                  strokeLinecap={0}
+                  strokeWidth={3}
+                />
+                <RNSVGPath
+                  d="M15 0.5
+            a14.5 14.5 0 0 1 0 29
+            a14.5 14.5 0 0 1 0 -29"
+                  propList={
+                    Array [
+                      "stroke",
+                      "strokeWidth",
+                      "strokeLinecap",
+                    ]
+                  }
+                  stroke={4293190370}
+                  strokeLinecap={0}
+                  strokeWidth={1}
+                />
+              </RNSVGGroup>
+            </RNSVGSvgView>
+          </View>
+        </View>
+      </View>
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#ffffff",
+            "borderTopColor": "#e4e2e2",
+            "borderTopWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 1334,
+          }
+        }
+      />
+    </RCTSafeAreaView>
+  </View>
+</View>
+`;

__tests__/view/shell/mobile/__snapshots__/Menu.test.tsx.snap

@@ -0,0 +1,837 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Menu renders correctly 1`] = `
+<View
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+        "margin": 10,
+        "marginBottom": 6,
+        "opacity": 1,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={60}
+      bbWidth={60}
+      focusable={false}
+      height={60}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "flex": 0,
+            "height": 60,
+            "width": 60,
+          },
+        ]
+      }
+      vbHeight={100}
+      vbWidth={100}
+      width={60}
+    >
+      <RNSVGGroup>
+        <RNSVGDefs>
+          <RNSVGLinearGradient
+            gradient={
+              Array [
+                0,
+                -1292135,
+                1,
+                -2424577,
+              ]
+            }
+            gradientTransform={null}
+            gradientUnits={0}
+            name="grad"
+            x1="0"
+            x2="1"
+            y1="0"
+            y2="1"
+          />
+        </RNSVGDefs>
+        <RNSVGCircle
+          cx="50"
+          cy="50"
+          fill={
+            Array [
+              1,
+              "grad",
+            ]
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+          r="50"
+        />
+        <RNSVGText
+          content={null}
+          dx={Array []}
+          dy={Array []}
+          fill={4294967295}
+          font={
+            Object {
+              "fontSize": "50",
+              "fontWeight": "bold",
+              "textAnchor": "middle",
+            }
+          }
+          propList={
+            Array [
+              "fill",
+            ]
+          }
+          rotate={Array []}
+          x={
+            Array [
+              "50",
+            ]
+          }
+          y={
+            Array [
+              "67",
+            ]
+          }
+        >
+          <RNSVGTSpan
+            content="X"
+            dx={Array []}
+            dy={Array []}
+            font={Object {}}
+            rotate={Array []}
+            x={Array []}
+            y={Array []}
+          />
+        </RNSVGText>
+      </RNSVGGroup>
+    </RNSVGSvgView>
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#2D2626",
+              "fontSize": 24,
+              "fontWeight": "bold",
+              "marginLeft": 12,
+            },
+          ]
+        }
+      >
+        
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Object {
+              "color": "#423737",
+              "fontSize": 18,
+              "marginLeft": 12,
+            },
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+  </View>
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#f8f3f3",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "margin": 10,
+        "marginBottom": 0,
+        "opacity": 1,
+        "paddingHorizontal": 12,
+        "paddingVertical": 10,
+      }
+    }
+  >
+    <RNSVGSvgView
+      align="xMidYMid"
+      bbHeight={25}
+      bbWidth={25}
+      color={4284765268}
+      fill="none"
+      focusable={false}
+      height={25}
+      meetOrSlice={0}
+      minX={0}
+      minY={0}
+      stroke="currentColor"
+      strokeWidth={2}
+      style={
+        Array [
+          Object {
+            "backgroundColor": "transparent",
+            "borderWidth": 0,
+          },
+          Object {
+            "color": "#645454",
+          },
+          Object {
+            "flex": 0,
+            "height": 25,
+            "width": 25,
+          },
+        ]
+      }
+      tintColor={4284765268}
+      vbHeight={24}
+      vbWidth={24}
+      width={25}
+    >
+      <RNSVGGroup
+        fill={null}
+        propList={
+          Array [
+            "fill",
+            "stroke",
+            "strokeWidth",
+          ]
+        }
+        stroke={
+          Array [
+            2,
+          ]
+        }
+        strokeWidth={2}
+      >
+        <RNSVGPath
+          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+          propList={
+            Array [
+              "strokeLinecap",
+              "strokeLinejoin",
+            ]
+          }
+          strokeLinecap={1}
+          strokeLinejoin={1}
+        />
+      </RNSVGGroup>
+    </RNSVGSvgView>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+          },
+          Object {
+            "color": "#423737",
+            "fontSize": 19,
+            "marginLeft": 8,
+          },
+        ]
+      }
+    >
+      Search
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "paddingBottom": 10,
+        "paddingHorizontal": 10,
+        "paddingTop": 10,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "opacity": 1,
+          "paddingHorizontal": 6,
+          "paddingVertical": 8,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "height": 36,
+              "justifyContent": "center",
+              "marginRight": 12,
+              "width": 36,
+            },
+          ]
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="26"
+          bbWidth="26"
+          color={4282529591}
+          focusable={false}
+          height="26"
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          stroke="currentColor"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              Object {
+                "color": "#423737",
+              },
+              Object {
+                "flex": 0,
+                "height": 26,
+                "width": 26,
+              },
+            ]
+          }
+          tintColor={4282529591}
+          vbHeight={48}
+          vbWidth={48}
+          width="26"
+        >
+          <RNSVGGroup
+            propList={
+              Array [
+                "stroke",
+              ]
+            }
+            stroke={
+              Array [
+                2,
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z"
+              propList={
+                Array [
+                  "strokeWidth",
+                ]
+              }
+              strokeWidth={4}
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Array [
+              Object {
+                "color": "#2D2626",
+                "fontSize": 19,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Home
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "opacity": 1,
+          "paddingHorizontal": 6,
+          "paddingVertical": 8,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "height": 36,
+              "justifyContent": "center",
+              "marginRight": 12,
+              "width": 36,
+            },
+          ]
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="28"
+          bbWidth="28"
+          color={4282529591}
+          fill="none"
+          focusable={false}
+          height="28"
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              Object {
+                "color": "#423737",
+              },
+              Object {
+                "flex": 0,
+                "height": 28,
+                "width": 28,
+              },
+            ]
+          }
+          tintColor={4282529591}
+          vbHeight={24}
+          vbWidth={24}
+          width="28"
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              Array [
+                "fill",
+              ]
+            }
+          >
+            <RNSVGPath
+              d="M0 0h24v24H0z"
+              fill={null}
+              propList={
+                Array [
+                  "fill",
+                ]
+              }
+            />
+            <RNSVGPath
+              d="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z"
+              fill={
+                Array [
+                  2,
+                ]
+              }
+              propList={
+                Array [
+                  "fill",
+                ]
+              }
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Array [
+              Object {
+                "color": "#2D2626",
+                "fontSize": 19,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Notifications
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "paddingBottom": 10,
+        "paddingHorizontal": 10,
+        "paddingTop": 10,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+          },
+          Object {
+            "fontSize": 16,
+            "fontWeight": "bold",
+            "paddingHorizontal": 4,
+            "paddingVertical": 8,
+          },
+        ]
+      }
+    >
+      Scenes
+    </Text>
+  </View>
+  <View
+    style={
+      Object {
+        "borderBottomColor": "#f8f3f3",
+        "borderBottomWidth": 1,
+        "paddingBottom": 10,
+        "paddingHorizontal": 10,
+        "paddingTop": 10,
+      }
+    }
+  >
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "opacity": 1,
+          "paddingHorizontal": 6,
+          "paddingVertical": 8,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "height": 36,
+              "justifyContent": "center",
+              "marginRight": 12,
+              "width": 36,
+            },
+          ]
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="30"
+          bbWidth="30"
+          color={4282529591}
+          fill="none"
+          focusable={false}
+          height="30"
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          stroke="currentColor"
+          strokeWidth={2}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              Object {
+                "color": "#423737",
+              },
+              Object {
+                "flex": 0,
+                "height": 30,
+                "width": 30,
+              },
+            ]
+          }
+          tintColor={4282529591}
+          vbHeight={24}
+          vbWidth={24}
+          width="30"
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              Array [
+                "fill",
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            stroke={
+              Array [
+                2,
+              ]
+            }
+            strokeWidth={2}
+          >
+            <RNSVGPath
+              d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
+              propList={
+                Array [
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Array [
+              Object {
+                "color": "#2D2626",
+                "fontSize": 19,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Create a scene
+      </Text>
+    </View>
+    <View
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "opacity": 1,
+          "paddingHorizontal": 6,
+          "paddingVertical": 8,
+        }
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "height": 36,
+              "justifyContent": "center",
+              "marginRight": 12,
+              "width": 36,
+            },
+          ]
+        }
+      >
+        <RNSVGSvgView
+          align="xMidYMid"
+          bbHeight="30"
+          bbWidth="30"
+          color={4282529591}
+          fill="none"
+          focusable={false}
+          height="30"
+          meetOrSlice={0}
+          minX={0}
+          minY={0}
+          stroke="currentColor"
+          strokeWidth={2}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "borderWidth": 0,
+              },
+              Object {
+                "color": "#423737",
+              },
+              Object {
+                "flex": 0,
+                "height": 30,
+                "width": 30,
+              },
+            ]
+          }
+          tintColor={4282529591}
+          vbHeight={24}
+          vbWidth={24}
+          width="30"
+        >
+          <RNSVGGroup
+            fill={null}
+            propList={
+              Array [
+                "fill",
+                "stroke",
+                "strokeWidth",
+              ]
+            }
+            stroke={
+              Array [
+                2,
+              ]
+            }
+            strokeWidth={2}
+          >
+            <RNSVGPath
+              d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
+              propList={
+                Array [
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+            />
+            <RNSVGPath
+              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+              propList={
+                Array [
+                  "strokeLinecap",
+                  "strokeLinejoin",
+                ]
+              }
+              strokeLinecap={1}
+              strokeLinejoin={1}
+            />
+          </RNSVGGroup>
+        </RNSVGSvgView>
+      </View>
+      <Text
+        numberOfLines={1}
+        style={
+          Array [
+            Object {
+              "color": "#000000",
+            },
+            Array [
+              Object {
+                "color": "#2D2626",
+                "fontSize": 19,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Settings
+      </Text>
+    </View>
+  </View>
+  <View
+    style={
+      Object {
+        "paddingHorizontal": 14,
+        "paddingVertical": 18,
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#000000",
+          },
+          Object {
+            "color": "#968d8d",
+          },
+        ]
+      }
+    >
+      Build version 
+       (
+      )
+    </Text>
+  </View>
+</View>
+`;

__tests__/view/shell/mobile/__snapshots__/TabsSelector.test.tsx.snap

@@ -0,0 +1,651 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TabsSelector renders correctly 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "backgroundColor": "#fff",
+      "borderTopColor": "#e4e2e2",
+      "borderTopWidth": 1,
+      "bottom": 55,
+      "height": 320,
+      "opacity": 1,
+      "position": "absolute",
+      "transform": Array [
+        Object {
+          "translateY": 320,
+        },
+      ],
+      "width": "100%",
+    }
+  }
+>
+  <View
+    onLayout={[Function]}
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "padding": 10,
+          },
+          Object {
+            "borderBottomColor": "#e4e2e2",
+            "borderBottomWidth": 1,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "flexDirection": "row",
+            "paddingTop": 2,
+          }
+        }
+      >
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#f8f3f3",
+                "borderRadius": 4,
+                "flex": 1,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "marginRight": 5,
+                "paddingLeft": 12,
+                "paddingRight": 16,
+                "paddingVertical": 10,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "marginRight": 8,
+              }
+            }
+          >
+            <
+              icon="share"
+              size={16}
+            />
+          </View>
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Object {
+                  "fontSize": 16,
+                  "fontWeight": "500",
+                },
+              ]
+            }
+          >
+            Share
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#f8f3f3",
+                "borderRadius": 4,
+                "flex": 1,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "marginRight": 5,
+                "paddingLeft": 12,
+                "paddingRight": 16,
+                "paddingVertical": 10,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "marginRight": 8,
+              }
+            }
+          >
+            <
+              icon={
+                Array [
+                  "far",
+                  "clone",
+                ]
+              }
+              size={16}
+            />
+          </View>
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Object {
+                  "fontSize": 16,
+                  "fontWeight": "500",
+                },
+              ]
+            }
+          >
+            Clone tab
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "backgroundColor": "#f8f3f3",
+                "borderRadius": 4,
+                "flex": 1,
+                "flexDirection": "row",
+                "justifyContent": "center",
+                "marginRight": 5,
+                "paddingLeft": 12,
+                "paddingRight": 16,
+                "paddingVertical": 10,
+              },
+            ]
+          }
+        >
+          <View
+            style={
+              Object {
+                "marginRight": 8,
+              }
+            }
+          >
+            <
+              icon="plus"
+              size={16}
+            />
+          </View>
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Object {
+                  "fontSize": 16,
+                  "fontWeight": "500",
+                },
+              ]
+            }
+          >
+            New tab
+          </Text>
+        </View>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "padding": 10,
+          },
+          Object {
+            "borderBottomColor": "#e4e2e2",
+            "borderBottomWidth": 1,
+          },
+          Object {
+            "backgroundColor": "#f8f3f3",
+          },
+        ]
+      }
+    >
+      <RCTScrollView
+        style={
+          Object {
+            "height": 240,
+          }
+        }
+      >
+        <View>
+          <View
+            collapsable={false}
+            forwardedRef={[Function]}
+            handlerTag={1}
+            handlerType="PanGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            onLayout={[Function]}
+            style={
+              Object {
+                "overflow": "hidden",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "bottom": 0,
+                  "flexDirection": "row",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": Array [
+                    Object {
+                      "translateX": -10000,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "padding": 2,
+                    },
+                  ]
+                }
+              />
+              <View
+                onLayout={[Function]}
+              />
+            </View>
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "bottom": 0,
+                  "flexDirection": "row-reverse",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": Array [
+                    Object {
+                      "translateX": -10000,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "padding": 2,
+                    },
+                  ]
+                }
+              />
+              <View
+                onLayout={[Function]}
+              />
+            </View>
+            <View
+              collapsable={false}
+              forwardedRef={[Function]}
+              handlerTag={2}
+              handlerType="TapGestureHandler"
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              pointerEvents="auto"
+              style={
+                Object {
+                  "transform": Array [
+                    Object {
+                      "translateX": -0,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 46,
+                    "overflow": "hidden",
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  forwardedRef={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "backgroundColor": "#ffffff",
+                      "borderColor": "#000000",
+                      "borderRadius": 4,
+                      "borderWidth": 1,
+                      "flexDirection": "row",
+                      "height": 42,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "flex": 1,
+                        "flexDirection": "row",
+                        "paddingLeft": 12,
+                        "paddingVertical": 12,
+                      }
+                    }
+                  >
+                    <View
+                      style={Object {}}
+                    >
+                      <
+                        icon="house"
+                        size={20}
+                      />
+                    </View>
+                    <Text
+                      ellipsizeMode="tail"
+                      numberOfLines={1}
+                      style={
+                        Array [
+                          Object {
+                            "color": "#000000",
+                          },
+                          Array [
+                            Object {
+                              "flex": 1,
+                              "fontSize": 16,
+                              "paddingHorizontal": 10,
+                            },
+                            Object {
+                              "fontWeight": "500",
+                            },
+                          ],
+                        ]
+                      }
+                      suppressHighlighting={true}
+                    >
+                      /
+                    </Text>
+                  </View>
+                  <View
+                    accessible={true}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Object {
+                        "paddingRight": 16,
+                        "paddingVertical": 16,
+                      }
+                    }
+                  >
+                    <
+                      icon="x"
+                      size={14}
+                      style={
+                        Object {
+                          "color": "#655",
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+          <View
+            collapsable={false}
+            forwardedRef={[Function]}
+            handlerTag={3}
+            handlerType="PanGestureHandler"
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            onLayout={[Function]}
+            style={
+              Object {
+                "overflow": "hidden",
+              }
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "bottom": 0,
+                  "flexDirection": "row",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": Array [
+                    Object {
+                      "translateX": -10000,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "padding": 2,
+                    },
+                  ]
+                }
+              />
+              <View
+                onLayout={[Function]}
+              />
+            </View>
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "bottom": 0,
+                  "flexDirection": "row-reverse",
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": Array [
+                    Object {
+                      "translateX": -10000,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                style={
+                  Array [
+                    Object {
+                      "padding": 2,
+                    },
+                  ]
+                }
+              />
+              <View
+                onLayout={[Function]}
+              />
+            </View>
+            <View
+              collapsable={false}
+              forwardedRef={[Function]}
+              handlerTag={4}
+              handlerType="TapGestureHandler"
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              pointerEvents="auto"
+              style={
+                Object {
+                  "transform": Array [
+                    Object {
+                      "translateX": -0,
+                    },
+                  ],
+                }
+              }
+            >
+              <View
+                collapsable={false}
+                style={
+                  Object {
+                    "height": 46,
+                    "overflow": "hidden",
+                  }
+                }
+              >
+                <View
+                  collapsable={false}
+                  forwardedRef={[Function]}
+                  style={
+                    Object {
+                      "alignItems": "center",
+                      "backgroundColor": "#f8f3f3",
+                      "borderColor": "#968d8d",
+                      "borderRadius": 4,
+                      "borderWidth": 1,
+                      "flexDirection": "row",
+                      "height": 42,
+                    }
+                  }
+                >
+                  <View
+                    accessible={true}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Object {
+                        "alignItems": "center",
+                        "flex": 1,
+                        "flexDirection": "row",
+                        "paddingLeft": 12,
+                        "paddingVertical": 12,
+                      }
+                    }
+                  >
+                    <View
+                      style={Object {}}
+                    >
+                      <
+                        icon="bell"
+                        size={20}
+                      />
+                    </View>
+                    <Text
+                      ellipsizeMode="tail"
+                      numberOfLines={1}
+                      style={
+                        Array [
+                          Object {
+                            "color": "#000000",
+                          },
+                          Array [
+                            Object {
+                              "flex": 1,
+                              "fontSize": 16,
+                              "paddingHorizontal": 10,
+                            },
+                            false,
+                          ],
+                        ]
+                      }
+                      suppressHighlighting={true}
+                    >
+                      /notifications
+                    </Text>
+                  </View>
+                  <View
+                    accessible={true}
+                    focusable={true}
+                    onClick={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      Object {
+                        "paddingRight": 16,
+                        "paddingVertical": 16,
+                      }
+                    }
+                  >
+                    <
+                      icon="x"
+                      size={14}
+                      style={
+                        Object {
+                          "color": "#655",
+                        }
+                      }
+                    />
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </RCTScrollView>
+    </View>
+  </View>
+</View>
+`;

__tests__/view/shell/mobile/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,421 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MobileShell renders correctly 1`] = `
+<BVLinearGradient
+  colors={
+    Array [
+      4278222079,
+      4278238463,
+    ]
+  }
+  endPoint={
+    Object {
+      "x": 0,
+      "y": 1,
+    }
+  }
+  locations={null}
+  startPoint={
+    Object {
+      "x": 0,
+      "y": 0.8,
+    }
+  }
+  style={
+    Object {
+      "flex": 1,
+      "height": "100%",
+    }
+  }
+>
+  <RCTSafeAreaView
+    emulateUnlessSupported={true}
+    style={
+      Object {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        Object {
+          "flex": 1,
+        }
+      }
+    >
+      <View
+        style={
+          Object {
+            "flex": 2,
+            "justifyContent": "center",
+          }
+        }
+      >
+        <View
+          style={
+            Object {
+              "flexDirection": "row",
+              "justifyContent": "center",
+            }
+          }
+        >
+          <RNSVGSvgView
+            bbHeight="100"
+            bbWidth="100"
+            focusable={false}
+            height="100"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 100,
+                  "width": 100,
+                },
+              ]
+            }
+            width="100"
+          >
+            <RNSVGGroup>
+              <RNSVGCircle
+                cx="50"
+                cy="50"
+                fill={null}
+                propList={
+                  Array [
+                    "fill",
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                r="46"
+                stroke={4294967295}
+                strokeWidth={2}
+              />
+              <RNSVGLine
+                propList={
+                  Array [
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                stroke={4294967295}
+                strokeWidth={1}
+                x1="30"
+                x2="30"
+                y1="0"
+                y2="100"
+              />
+              <RNSVGLine
+                propList={
+                  Array [
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                stroke={4294967295}
+                strokeWidth={1}
+                x1="74"
+                x2="74"
+                y1="0"
+                y2="100"
+              />
+              <RNSVGLine
+                propList={
+                  Array [
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                stroke={4294967295}
+                strokeWidth={1}
+                x1="0"
+                x2="100"
+                y1="22"
+                y2="22"
+              />
+              <RNSVGLine
+                propList={
+                  Array [
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                stroke={4294967295}
+                strokeWidth={1}
+                x1="0"
+                x2="100"
+                y1="74"
+                y2="74"
+              />
+              <RNSVGText
+                content={null}
+                dx={Array []}
+                dy={Array []}
+                fill={null}
+                font={
+                  Object {
+                    "fontSize": "60",
+                    "fontWeight": "bold",
+                    "textAnchor": "middle",
+                  }
+                }
+                propList={
+                  Array [
+                    "fill",
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                rotate={Array []}
+                stroke={4294967295}
+                strokeWidth={2}
+                x={
+                  Array [
+                    "52",
+                  ]
+                }
+                y={
+                  Array [
+                    "70",
+                  ]
+                }
+              >
+                <RNSVGTSpan
+                  content="B"
+                  dx={Array []}
+                  dy={Array []}
+                  font={Object {}}
+                  rotate={Array []}
+                  x={Array []}
+                  y={Array []}
+                />
+              </RNSVGText>
+            </RNSVGGroup>
+          </RNSVGSvgView>
+        </View>
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Object {
+                "color": "#ffffff",
+                "fontSize": 68,
+                "fontWeight": "bold",
+                "textAlign": "center",
+              },
+            ]
+          }
+        >
+          Bluesky
+        </Text>
+        <Text
+          style={
+            Array [
+              Object {
+                "color": "#000000",
+              },
+              Object {
+                "color": "#ffffff",
+                "fontSize": 18,
+                "textAlign": "center",
+              },
+            ]
+          }
+        >
+          [ private beta ]
+        </Text>
+      </View>
+      <View
+        style={
+          Object {
+            "flex": 1,
+          }
+        }
+      >
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#0085ff",
+              "borderColor": "#ffffff",
+              "borderRadius": 10,
+              "borderWidth": 1,
+              "marginBottom": 20,
+              "marginHorizontal": 20,
+              "opacity": 1,
+              "paddingVertical": 16,
+            }
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Object {
+                  "color": "#ffffff",
+                  "fontSize": 18,
+                  "fontWeight": "bold",
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            Create a new account
+          </Text>
+        </View>
+        <View
+          style={
+            Object {
+              "marginBottom": 20,
+            }
+          }
+        >
+          <RNSVGSvgView
+            bbHeight="1"
+            bbWidth={750}
+            focusable={false}
+            height="1"
+            style={
+              Array [
+                Object {
+                  "backgroundColor": "transparent",
+                  "borderWidth": 0,
+                },
+                Object {
+                  "position": "absolute",
+                  "top": 10,
+                },
+                Object {
+                  "flex": 0,
+                  "height": 1,
+                  "width": 750,
+                },
+              ]
+            }
+            width={750}
+          >
+            <RNSVGGroup>
+              <RNSVGLine
+                propList={
+                  Array [
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                stroke={4294967295}
+                strokeWidth="1"
+                x1="30"
+                x2={355}
+                y1="0"
+                y2="0"
+              />
+              <RNSVGLine
+                propList={
+                  Array [
+                    "stroke",
+                    "strokeWidth",
+                  ]
+                }
+                stroke={4294967295}
+                strokeWidth="1"
+                x1={395}
+                x2={720}
+                y1="0"
+                y2="0"
+              />
+            </RNSVGGroup>
+          </RNSVGSvgView>
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Object {
+                  "color": "#ffffff",
+                  "fontSize": 16,
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            or
+          </Text>
+        </View>
+        <View
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onClick={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            Object {
+              "backgroundColor": "#0085ff",
+              "borderColor": "#ffffff",
+              "borderRadius": 10,
+              "borderWidth": 1,
+              "marginBottom": 20,
+              "marginHorizontal": 20,
+              "opacity": 1,
+              "paddingVertical": 16,
+            }
+          }
+        >
+          <Text
+            style={
+              Array [
+                Object {
+                  "color": "#000000",
+                },
+                Object {
+                  "color": "#ffffff",
+                  "fontSize": 18,
+                  "fontWeight": "bold",
+                  "textAlign": "center",
+                },
+              ]
+            }
+          >
+            Sign in
+          </Text>
+        </View>
+      </View>
+    </View>
+  </RCTSafeAreaView>
+  <View
+    enablePanDownToClose={true}
+    index={-1}
+    keyboardBehavior="fillParent"
+    onChange={[Function]}
+    snapPoints={
+      Array [
+        "10%",
+      ]
+    }
+  >
+    <View />
+  </View>
+</BVLinearGradient>
+`;

__tests__/view/shell/mobile/index.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import {MobileShell} from '../../../../src/view/shell/mobile'
+import renderer from 'react-test-renderer'
+import {SafeAreaProvider} from 'react-native-safe-area-context'
+// import {render} from '../../../../jest/test-utils'
+
+describe('MobileShell', () => {
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(
+        <SafeAreaProvider>
+          <MobileShell />
+        </SafeAreaProvider>,
+      )
+      .toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+})