From 7517b65dcd676f36d38f31c991929c32168b3e12 Mon Sep 17 00:00:00 2001
From: João Ferreiro <ferreiro@pinkroom.dev>
Date: Thu, 22 Dec 2022 15:32:39 +0000
Subject: 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__/App-test.tsx                             |  16 -
 __tests__/lib/download.test.ts                     |  93 +++
 __tests__/lib/errors.test.ts                       |  19 +
 __tests__/lib/link-meta.test.ts                    | 146 ++++
 __tests__/lib/numbers.test.ts                      |  24 +
 __tests__/lib/string.test.ts                       | 532 +++++++++++++
 __tests__/link-meta-utils.ts                       | 118 ---
 __tests__/string-utils.ts                          | 319 --------
 __tests__/view/screens/Contacts.test.tsx           |  16 +
 __tests__/view/screens/Home.test.tsx               |  16 +
 __tests__/view/screens/Login.test.tsx              |  11 +
 __tests__/view/screens/NotFound.test.tsx           |  11 +
 __tests__/view/screens/Notifications.test.tsx      |  16 +
 __tests__/view/screens/Onboard.test.tsx            |  11 +
 __tests__/view/screens/PostDownvotedBy.test.tsx    |  19 +
 __tests__/view/screens/PostRepostedBy.test.tsx     |  19 +
 __tests__/view/screens/PostThread.test.tsx         |  19 +
 __tests__/view/screens/PostUpvotedBy.test.tsx      |  19 +
 __tests__/view/screens/Profile.test.tsx            |  19 +
 __tests__/view/screens/ProfileFollowers.test.tsx   |  18 +
 __tests__/view/screens/ProfileFollows.test.tsx     |  18 +
 __tests__/view/screens/ProfileMembers.test.tsx     |  18 +
 __tests__/view/screens/Search.test.tsx             |  18 +
 __tests__/view/screens/Settings.test.tsx           |  16 +
 .../screens/__snapshots__/Contacts.test.tsx.snap   | 205 +++++
 .../view/screens/__snapshots__/Home.test.tsx.snap  | 594 +++++++++++++++
 .../view/screens/__snapshots__/Login.test.tsx.snap | 371 +++++++++
 .../screens/__snapshots__/NotFound.test.tsx.snap   | 431 +++++++++++
 .../__snapshots__/Notifications.test.tsx.snap      | 378 ++++++++++
 .../screens/__snapshots__/Onboard.test.tsx.snap    | 388 ++++++++++
 .../__snapshots__/PostDownvotedBy.test.tsx.snap    | 368 +++++++++
 .../__snapshots__/PostRepostedBy.test.tsx.snap     | 368 +++++++++
 .../screens/__snapshots__/PostThread.test.tsx.snap | 437 +++++++++++
 .../__snapshots__/PostUpvotedBy.test.tsx.snap      | 368 +++++++++
 .../screens/__snapshots__/Profile.test.tsx.snap    | 513 +++++++++++++
 .../__snapshots__/ProfileFollowers.test.tsx.snap   | 386 ++++++++++
 .../__snapshots__/ProfileFollows.test.tsx.snap     | 386 ++++++++++
 .../__snapshots__/ProfileMembers.test.tsx.snap     | 386 ++++++++++
 .../screens/__snapshots__/Search.test.tsx.snap     | 514 +++++++++++++
 .../screens/__snapshots__/Settings.test.tsx.snap   | 631 ++++++++++++++++
 __tests__/view/shell/mobile/Composer.test.tsx      |  23 +
 __tests__/view/shell/mobile/Menu.test.tsx          |  15 +
 __tests__/view/shell/mobile/TabsSelector.test.tsx  |  17 +
 .../mobile/__snapshots__/Composer.test.tsx.snap    | 659 ++++++++++++++++
 .../shell/mobile/__snapshots__/Menu.test.tsx.snap  | 837 +++++++++++++++++++++
 .../__snapshots__/TabsSelector.test.tsx.snap       | 651 ++++++++++++++++
 .../shell/mobile/__snapshots__/index.test.tsx.snap | 421 +++++++++++
 __tests__/view/shell/mobile/index.test.tsx         |  18 +
 48 files changed, 10443 insertions(+), 453 deletions(-)
 delete mode 100644 __tests__/App-test.tsx
 create mode 100644 __tests__/lib/download.test.ts
 create mode 100644 __tests__/lib/errors.test.ts
 create mode 100644 __tests__/lib/link-meta.test.ts
 create mode 100644 __tests__/lib/numbers.test.ts
 create mode 100644 __tests__/lib/string.test.ts
 delete mode 100644 __tests__/link-meta-utils.ts
 delete mode 100644 __tests__/string-utils.ts
 create mode 100644 __tests__/view/screens/Contacts.test.tsx
 create mode 100644 __tests__/view/screens/Home.test.tsx
 create mode 100644 __tests__/view/screens/Login.test.tsx
 create mode 100644 __tests__/view/screens/NotFound.test.tsx
 create mode 100644 __tests__/view/screens/Notifications.test.tsx
 create mode 100644 __tests__/view/screens/Onboard.test.tsx
 create mode 100644 __tests__/view/screens/PostDownvotedBy.test.tsx
 create mode 100644 __tests__/view/screens/PostRepostedBy.test.tsx
 create mode 100644 __tests__/view/screens/PostThread.test.tsx
 create mode 100644 __tests__/view/screens/PostUpvotedBy.test.tsx
 create mode 100644 __tests__/view/screens/Profile.test.tsx
 create mode 100644 __tests__/view/screens/ProfileFollowers.test.tsx
 create mode 100644 __tests__/view/screens/ProfileFollows.test.tsx
 create mode 100644 __tests__/view/screens/ProfileMembers.test.tsx
 create mode 100644 __tests__/view/screens/Search.test.tsx
 create mode 100644 __tests__/view/screens/Settings.test.tsx
 create mode 100644 __tests__/view/screens/__snapshots__/Contacts.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/Home.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/Login.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/NotFound.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/Notifications.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/Onboard.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/PostDownvotedBy.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/PostRepostedBy.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/PostThread.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/PostUpvotedBy.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/Profile.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/ProfileFollowers.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/ProfileFollows.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/ProfileMembers.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/Search.test.tsx.snap
 create mode 100644 __tests__/view/screens/__snapshots__/Settings.test.tsx.snap
 create mode 100644 __tests__/view/shell/mobile/Composer.test.tsx
 create mode 100644 __tests__/view/shell/mobile/Menu.test.tsx
 create mode 100644 __tests__/view/shell/mobile/TabsSelector.test.tsx
 create mode 100644 __tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap
 create mode 100644 __tests__/view/shell/mobile/__snapshots__/Menu.test.tsx.snap
 create mode 100644 __tests__/view/shell/mobile/__snapshots__/TabsSelector.test.tsx.snap
 create mode 100644 __tests__/view/shell/mobile/__snapshots__/index.test.tsx.snap
 create mode 100644 __tests__/view/shell/mobile/index.test.tsx

(limited to '__tests__')

diff --git a/__tests__/App-test.tsx b/__tests__/App-test.tsx
deleted file mode 100644
index db34ec617..000000000
--- a/__tests__/App-test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// /**
-//  * @format
-//  */
-
-// import 'react-native'
-// import React from 'react'
-// import App from '../src/App'
-
-// // Note: test renderer must be required after react-native.
-// import renderer from 'react-test-renderer'
-
-// it('renders correctly', () => {
-//   renderer.act(() => {
-//     renderer.create(<App />)
-//   })
-// })
diff --git a/__tests__/lib/download.test.ts b/__tests__/lib/download.test.ts
new file mode 100644
index 000000000..d90e8c895
--- /dev/null
+++ b/__tests__/lib/download.test.ts
@@ -0,0 +1,93 @@
+import {downloadAndResize, DownloadAndResizeOpts} from '../../src/lib/download'
+import ImageResizer from '@bam.tech/react-native-image-resizer'
+import RNFetchBlob from 'rn-fetch-blob'
+
+jest.mock('rn-fetch-blob', () => ({
+  config: jest.fn().mockReturnThis(),
+  cancel: jest.fn(),
+  fetch: jest.fn(),
+}))
+jest.mock('@bam.tech/react-native-image-resizer', () => ({
+  createResizedImage: jest.fn(),
+}))
+
+describe('downloadAndResize', () => {
+  const errorSpy = jest.spyOn(global.console, 'error')
+
+  const mockResizedImage = {
+    path: jest.fn().mockReturnValue('file://resized-image.jpg'),
+  }
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+
+    const mockedCreateResizedImage =
+      ImageResizer.createResizedImage as jest.Mock
+    mockedCreateResizedImage.mockResolvedValue(mockResizedImage)
+  })
+
+  it('should return resized image for valid URI and options', async () => {
+    const mockedFetch = RNFetchBlob.fetch as jest.Mock
+    mockedFetch.mockResolvedValueOnce({
+      path: jest.fn().mockReturnValue('file://downloaded-image.jpg'),
+      flush: jest.fn(),
+    })
+
+    const opts: DownloadAndResizeOpts = {
+      uri: 'https://example.com/image.jpg',
+      width: 100,
+      height: 100,
+      mode: 'cover',
+      timeout: 10000,
+    }
+
+    const result = await downloadAndResize(opts)
+    expect(result).toEqual(mockResizedImage)
+    expect(RNFetchBlob.config).toHaveBeenCalledWith({
+      fileCache: true,
+      appendExt: 'jpeg',
+    })
+    expect(RNFetchBlob.fetch).toHaveBeenCalledWith(
+      'GET',
+      'https://example.com/image.jpg',
+    )
+    expect(ImageResizer.createResizedImage).toHaveBeenCalledWith(
+      'file://downloaded-image.jpg',
+      100,
+      100,
+      'JPEG',
+      0.7,
+      undefined,
+      undefined,
+      undefined,
+      {mode: 'cover'},
+    )
+  })
+
+  it('should return undefined for invalid URI', async () => {
+    const opts: DownloadAndResizeOpts = {
+      uri: 'invalid-uri',
+      width: 100,
+      height: 100,
+      mode: 'cover',
+      timeout: 10000,
+    }
+
+    const result = await downloadAndResize(opts)
+    expect(errorSpy).toHaveBeenCalled()
+    expect(result).toBeUndefined()
+  })
+
+  it('should return undefined for unsupported file type', async () => {
+    const opts: DownloadAndResizeOpts = {
+      uri: 'https://example.com/image.bmp',
+      width: 100,
+      height: 100,
+      mode: 'cover',
+      timeout: 10000,
+    }
+
+    const result = await downloadAndResize(opts)
+    expect(result).toBeUndefined()
+  })
+})
diff --git a/__tests__/lib/errors.test.ts b/__tests__/lib/errors.test.ts
new file mode 100644
index 000000000..b9549e6d8
--- /dev/null
+++ b/__tests__/lib/errors.test.ts
@@ -0,0 +1,19 @@
+import {isNetworkError} from '../../src/lib/errors'
+
+describe('isNetworkError', () => {
+  const inputs = [
+    'TypeError: Network request failed',
+    'Uncaught TypeError: Cannot read property x of undefined',
+    'Uncaught RangeError',
+    'Error: Aborted',
+  ]
+  const outputs = [true, false, false, true]
+
+  it('correctly distinguishes network errors', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const result = isNetworkError(input)
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
diff --git a/__tests__/lib/link-meta.test.ts b/__tests__/lib/link-meta.test.ts
new file mode 100644
index 000000000..5df5153ee
--- /dev/null
+++ b/__tests__/lib/link-meta.test.ts
@@ -0,0 +1,146 @@
+import {LikelyType, getLinkMeta, getLikelyType} from '../../src/lib/link-meta'
+
+const exampleComHtml = `<!doctype html>
+<html>
+<head>
+    <title>Example Domain</title>
+    <meta name="description" content="An example website">
+
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style type="text/css">
+    body {
+        background-color: #f0f0f2;
+        margin: 0;
+        padding: 0;
+        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+    }
+    div {
+        width: 600px;
+        margin: 5em auto;
+        padding: 2em;
+        background-color: #fdfdff;
+        border-radius: 0.5em;
+        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
+    }
+    a:link, a:visited {
+        color: #38488f;
+        text-decoration: none;
+    }
+    @media (max-width: 700px) {
+        div {
+            margin: 0 auto;
+            width: auto;
+        }
+    }
+    </style>
+</head>
+
+<body>
+<div>
+    <h1>Example Domain</h1>
+    <p>This domain is for use in illustrative examples in documents. You may use this
+    domain in literature without prior coordination or asking for permission.</p>
+    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
+</div>
+</body>
+</html>`
+
+describe('getLinkMeta', () => {
+  const inputs = [
+    '',
+    'httpbadurl',
+    'https://example.com',
+    'https://example.com/index.html',
+    'https://example.com/image.png',
+    'https://example.com/video.avi',
+    'https://example.com/audio.ogg',
+    'https://example.com/text.txt',
+    'https://example.com/javascript.js',
+    'https://bsky.app/index.html',
+  ]
+  const outputs = [
+    {
+      error: 'Invalid URL',
+      likelyType: LikelyType.Other,
+      url: '',
+    },
+    {
+      error: 'Invalid URL',
+      likelyType: LikelyType.Other,
+      url: 'httpbadurl',
+    },
+    {
+      likelyType: LikelyType.HTML,
+      url: 'https://example.com',
+      title: 'Example Domain',
+      description: 'An example website',
+    },
+    {
+      likelyType: LikelyType.HTML,
+      url: 'https://example.com/index.html',
+      title: 'Example Domain',
+      description: 'An example website',
+    },
+    {
+      likelyType: LikelyType.Image,
+      url: 'https://example.com/image.png',
+    },
+    {
+      likelyType: LikelyType.Video,
+      url: 'https://example.com/video.avi',
+    },
+    {
+      likelyType: LikelyType.Audio,
+      url: 'https://example.com/audio.ogg',
+    },
+    {
+      likelyType: LikelyType.Text,
+      url: 'https://example.com/text.txt',
+    },
+    {
+      likelyType: LikelyType.Other,
+      url: 'https://example.com/javascript.js',
+    },
+    {
+      likelyType: LikelyType.AtpData,
+      url: '/index.html',
+      title: 'Not found',
+    },
+    {
+      likelyType: LikelyType.Other,
+      url: '',
+      title: '',
+    },
+  ]
+  it('correctly handles a set of text inputs', async () => {
+    for (let i = 0; i < inputs.length; i++) {
+      global.fetch = jest.fn().mockImplementationOnce(() => {
+        return new Promise((resolve, _reject) => {
+          resolve({
+            ok: true,
+            status: 200,
+            text: () => exampleComHtml,
+          })
+        })
+      })
+      const input = inputs[i]
+      const output = await getLinkMeta(input)
+      expect(output).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('getLikelyType', () => {
+  it('correctly handles non-parsed url', async () => {
+    const output = await getLikelyType('https://example.com')
+    expect(output).toEqual(LikelyType.HTML)
+  })
+
+  it('handles non-string urls without crashing', async () => {
+    const output = await getLikelyType('123')
+    expect(output).toEqual(LikelyType.Other)
+  })
+})
diff --git a/__tests__/lib/numbers.test.ts b/__tests__/lib/numbers.test.ts
new file mode 100644
index 000000000..be92d6c0f
--- /dev/null
+++ b/__tests__/lib/numbers.test.ts
@@ -0,0 +1,24 @@
+import {clamp} from '../../src/lib/numbers'
+
+describe('clamp', () => {
+  const inputs: [number, number, number][] = [
+    [100, 0, 200],
+    [100, 0, 100],
+    [0, 0, 100],
+    [100, 0, -1],
+    [4, 1, 1],
+    [100, -100, 0],
+    [400, 100, -100],
+    [70, -1, 1],
+    [Infinity, Infinity, Infinity],
+  ]
+  const outputs = [100, 100, 0, -1, 1, 0, -100, 1, Infinity]
+
+  it('correctly clamps any given number and range', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const result = clamp(...input)
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
diff --git a/__tests__/lib/string.test.ts b/__tests__/lib/string.test.ts
new file mode 100644
index 000000000..d8a56b36b
--- /dev/null
+++ b/__tests__/lib/string.test.ts
@@ -0,0 +1,532 @@
+import {
+  extractEntities,
+  detectLinkables,
+  extractHtmlMeta,
+  pluralize,
+  makeRecordUri,
+  ago,
+  makeValidHandle,
+  createFullHandle,
+  enforceLen,
+  cleanError,
+  toNiceDomain,
+  toShortUrl,
+  toShareUrl,
+} from '../../src/lib/strings'
+
+describe('extractEntities', () => {
+  const knownHandles = new Set(['handle.com', 'full123.test-of-chars'])
+  const inputs = [
+    'no mention',
+    '@handle.com middle end',
+    'start @handle.com end',
+    'start middle @handle.com',
+    '@handle.com @handle.com @handle.com',
+    '@full123.test-of-chars',
+    'not@right',
+    '@handle.com!@#$chars',
+    '@handle.com\n@handle.com',
+    'parenthetical (@handle.com)',
+    'start https://middle.com end',
+    'start https://middle.com/foo/bar end',
+    'start https://middle.com/foo/bar?baz=bux end',
+    'start https://middle.com/foo/bar?baz=bux#hash end',
+    'https://start.com/foo/bar?baz=bux#hash middle end',
+    'start middle https://end.com/foo/bar?baz=bux#hash',
+    'https://newline1.com\nhttps://newline2.com',
+    'start middle.com end',
+    'start middle.com/foo/bar end',
+    'start middle.com/foo/bar?baz=bux end',
+    'start middle.com/foo/bar?baz=bux#hash end',
+    'start.com/foo/bar?baz=bux#hash middle end',
+    'start middle end.com/foo/bar?baz=bux#hash',
+    'newline1.com\nnewline2.com',
+    'not.. a..url ..here',
+    'e.g.',
+    'something-cool.jpg',
+    'website.com.jpg',
+    'e.g./foo',
+    'website.com.jpg/foo',
+    'Classic article https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
+    'Classic article https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/ ',
+    'https://foo.com https://bar.com/whatever https://baz.com',
+    'punctuation https://foo.com, https://bar.com/whatever; https://baz.com.',
+    'parenthentical (https://foo.com)',
+    'except for https://foo.com/thing_(cool)',
+  ]
+  interface Output {
+    type: string
+    value: string
+    noScheme?: boolean
+  }
+  const outputs: Output[][] = [
+    [],
+    [{type: 'mention', value: 'handle.com'}],
+    [{type: 'mention', value: 'handle.com'}],
+    [{type: 'mention', value: 'handle.com'}],
+    [
+      {type: 'mention', value: 'handle.com'},
+      {type: 'mention', value: 'handle.com'},
+      {type: 'mention', value: 'handle.com'},
+    ],
+    [
+      {
+        type: 'mention',
+        value: 'full123.test-of-chars',
+      },
+    ],
+    [],
+    [{type: 'mention', value: 'handle.com'}],
+    [
+      {type: 'mention', value: 'handle.com'},
+      {type: 'mention', value: 'handle.com'},
+    ],
+    [{type: 'mention', value: 'handle.com'}],
+    [{type: 'link', value: 'https://middle.com'}],
+    [{type: 'link', value: 'https://middle.com/foo/bar'}],
+    [{type: 'link', value: 'https://middle.com/foo/bar?baz=bux'}],
+    [{type: 'link', value: 'https://middle.com/foo/bar?baz=bux#hash'}],
+    [{type: 'link', value: 'https://start.com/foo/bar?baz=bux#hash'}],
+    [{type: 'link', value: 'https://end.com/foo/bar?baz=bux#hash'}],
+    [
+      {type: 'link', value: 'https://newline1.com'},
+      {type: 'link', value: 'https://newline2.com'},
+    ],
+    [{type: 'link', value: 'middle.com', noScheme: true}],
+    [{type: 'link', value: 'middle.com/foo/bar', noScheme: true}],
+    [{type: 'link', value: 'middle.com/foo/bar?baz=bux', noScheme: true}],
+    [{type: 'link', value: 'middle.com/foo/bar?baz=bux#hash', noScheme: true}],
+    [{type: 'link', value: 'start.com/foo/bar?baz=bux#hash', noScheme: true}],
+    [{type: 'link', value: 'end.com/foo/bar?baz=bux#hash', noScheme: true}],
+    [
+      {type: 'link', value: 'newline1.com', noScheme: true},
+      {type: 'link', value: 'newline2.com', noScheme: true},
+    ],
+    [],
+    [],
+    [],
+    [],
+    [],
+    [],
+    [
+      {
+        type: 'link',
+        value:
+          'https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
+      },
+    ],
+    [
+      {
+        type: 'link',
+        value:
+          'https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
+      },
+    ],
+    [
+      {type: 'link', value: 'https://foo.com'},
+      {type: 'link', value: 'https://bar.com/whatever'},
+      {type: 'link', value: 'https://baz.com'},
+    ],
+    [
+      {type: 'link', value: 'https://foo.com'},
+      {type: 'link', value: 'https://bar.com/whatever'},
+      {type: 'link', value: 'https://baz.com'},
+    ],
+    [{type: 'link', value: 'https://foo.com'}],
+    [{type: 'link', value: 'https://foo.com/thing_(cool)'}],
+  ]
+  it('correctly handles a set of text inputs', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const result = extractEntities(input, knownHandles)
+      if (!outputs[i].length) {
+        expect(result).toBeFalsy()
+      } else if (outputs[i].length && !result) {
+        expect(result).toBeTruthy()
+      } else if (result) {
+        expect(result.length).toBe(outputs[i].length)
+        for (let j = 0; j < outputs[i].length; j++) {
+          expect(result[j].type).toEqual(outputs[i][j].type)
+          if (outputs[i][j].noScheme) {
+            expect(result[j].value).toEqual(`https://${outputs[i][j].value}`)
+          } else {
+            expect(result[j].value).toEqual(outputs[i][j].value)
+          }
+          if (outputs[i]?.[j].type === 'mention') {
+            expect(
+              input.slice(result[j].index.start, result[j].index.end),
+            ).toBe(`@${result[j].value}`)
+          } else {
+            if (!outputs[i]?.[j].noScheme) {
+              expect(
+                input.slice(result[j].index.start, result[j].index.end),
+              ).toBe(result[j].value)
+            } else {
+              expect(
+                input.slice(result[j].index.start, result[j].index.end),
+              ).toBe(result[j].value.slice('https://'.length))
+            }
+          }
+        }
+      }
+    }
+  })
+})
+
+describe('detectLinkables', () => {
+  const inputs = [
+    'no linkable',
+    '@start middle end',
+    'start @middle end',
+    'start middle @end',
+    '@start @middle @end',
+    '@full123.test-of-chars',
+    'not@right',
+    '@bad!@#$chars',
+    '@newline1\n@newline2',
+    'parenthetical (@handle)',
+    'start https://middle.com end',
+    'start https://middle.com/foo/bar end',
+    'start https://middle.com/foo/bar?baz=bux end',
+    'start https://middle.com/foo/bar?baz=bux#hash end',
+    'https://start.com/foo/bar?baz=bux#hash middle end',
+    'start middle https://end.com/foo/bar?baz=bux#hash',
+    'https://newline1.com\nhttps://newline2.com',
+    'start middle.com end',
+    'start middle.com/foo/bar end',
+    'start middle.com/foo/bar?baz=bux end',
+    'start middle.com/foo/bar?baz=bux#hash end',
+    'start.com/foo/bar?baz=bux#hash middle end',
+    'start middle end.com/foo/bar?baz=bux#hash',
+    'newline1.com\nnewline2.com',
+    'not.. a..url ..here',
+    'e.g.',
+    'e.g. real.com fake.notreal',
+    'something-cool.jpg',
+    'website.com.jpg',
+    'e.g./foo',
+    'website.com.jpg/foo',
+    'Classic article https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
+    'Classic article https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/ ',
+    'https://foo.com https://bar.com/whatever https://baz.com',
+    'punctuation https://foo.com, https://bar.com/whatever; https://baz.com.',
+    'parenthentical (https://foo.com)',
+    'except for https://foo.com/thing_(cool)',
+  ]
+  const outputs = [
+    ['no linkable'],
+    [{link: '@start'}, ' middle end'],
+    ['start ', {link: '@middle'}, ' end'],
+    ['start middle ', {link: '@end'}],
+    [{link: '@start'}, ' ', {link: '@middle'}, ' ', {link: '@end'}],
+    [{link: '@full123.test-of-chars'}],
+    ['not@right'],
+    [{link: '@bad'}, '!@#$chars'],
+    [{link: '@newline1'}, '\n', {link: '@newline2'}],
+    ['parenthetical (', {link: '@handle'}, ')'],
+    ['start ', {link: 'https://middle.com'}, ' end'],
+    ['start ', {link: 'https://middle.com/foo/bar'}, ' end'],
+    ['start ', {link: 'https://middle.com/foo/bar?baz=bux'}, ' end'],
+    ['start ', {link: 'https://middle.com/foo/bar?baz=bux#hash'}, ' end'],
+    [{link: 'https://start.com/foo/bar?baz=bux#hash'}, ' middle end'],
+    ['start middle ', {link: 'https://end.com/foo/bar?baz=bux#hash'}],
+    [{link: 'https://newline1.com'}, '\n', {link: 'https://newline2.com'}],
+    ['start ', {link: 'middle.com'}, ' end'],
+    ['start ', {link: 'middle.com/foo/bar'}, ' end'],
+    ['start ', {link: 'middle.com/foo/bar?baz=bux'}, ' end'],
+    ['start ', {link: 'middle.com/foo/bar?baz=bux#hash'}, ' end'],
+    [{link: 'start.com/foo/bar?baz=bux#hash'}, ' middle end'],
+    ['start middle ', {link: 'end.com/foo/bar?baz=bux#hash'}],
+    [{link: 'newline1.com'}, '\n', {link: 'newline2.com'}],
+    ['not.. a..url ..here'],
+    ['e.g.'],
+    ['e.g. ', {link: 'real.com'}, ' fake.notreal'],
+    ['something-cool.jpg'],
+    ['website.com.jpg'],
+    ['e.g./foo'],
+    ['website.com.jpg/foo'],
+    [
+      'Classic article ',
+      {
+        link: 'https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
+      },
+    ],
+    [
+      'Classic article ',
+      {
+        link: 'https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
+      },
+      ' ',
+    ],
+    [
+      {link: 'https://foo.com'},
+      ' ',
+      {link: 'https://bar.com/whatever'},
+      ' ',
+      {link: 'https://baz.com'},
+    ],
+    [
+      'punctuation ',
+      {link: 'https://foo.com'},
+      ', ',
+      {link: 'https://bar.com/whatever'},
+      '; ',
+      {link: 'https://baz.com'},
+      '.',
+    ],
+    ['parenthentical (', {link: 'https://foo.com'}, ')'],
+    ['except for ', {link: 'https://foo.com/thing_(cool)'}],
+  ]
+  it('correctly handles a set of text inputs', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const output = detectLinkables(input)
+      expect(output).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('extractHtmlMeta', () => {
+  const inputs = [
+    '',
+    'nothing',
+    '<title>title</title>',
+    '<title> aSd!@#AC </title>',
+    '<title>\n  title\n  </title>',
+    '<meta name="title" content="meta title">',
+    '<meta name="description" content="meta description">',
+    '<meta property="og:title" content="og title">',
+    '<meta property="og:description" content="og description">',
+    '<meta property="og:image" content="https://ogimage.com/foo.png">',
+    '<meta property="twitter:title" content="twitter title">',
+    '<meta property="twitter:description" content="twitter description">',
+    '<meta property="twitter:image" content="https://twitterimage.com/foo.png">',
+    '<meta\n  name="title"\n  content="meta title"\n>',
+  ]
+  const outputs = [
+    {},
+    {},
+    {title: 'title'},
+    {title: 'aSd!@#AC'},
+    {title: 'title'},
+    {title: 'meta title'},
+    {description: 'meta description'},
+    {title: 'og title'},
+    {description: 'og description'},
+    {image: 'https://ogimage.com/foo.png'},
+    {title: 'twitter title'},
+    {description: 'twitter description'},
+    {image: 'https://twitterimage.com/foo.png'},
+    {title: 'meta title'},
+  ]
+  it('correctly handles a set of text inputs', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const output = extractHtmlMeta(input)
+      expect(output).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('pluralize', () => {
+  const inputs: [number, string, string?][] = [
+    [1, 'follower'],
+    [1, 'member'],
+    [100, 'post'],
+    [1000, 'repost'],
+    [10000, 'upvote'],
+    [100000, 'other'],
+    [2, 'man', 'men'],
+  ]
+  const outputs = [
+    'follower',
+    'member',
+    'posts',
+    'reposts',
+    'upvotes',
+    'others',
+    'men',
+  ]
+
+  it('correctly pluralizes a set of words', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const output = pluralize(...input)
+      expect(output).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('makeRecordUri', () => {
+  const inputs: [string, string, string][] = [
+    ['alice.test', 'app.bsky.feed.post', '3jk7x4irgv52r'],
+  ]
+  const outputs = ['at://alice.test/app.bsky.feed.post/3jk7x4irgv52r']
+
+  it('correctly builds a record URI', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const result = makeRecordUri(...input)
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('ago', () => {
+  const inputs = [
+    1671461038,
+    '04 Dec 1995 00:12:00 GMT',
+    new Date(),
+    new Date().setMinutes(new Date().getMinutes() - 10),
+    new Date().setHours(new Date().getHours() - 1),
+    new Date().setDate(new Date().getDate() - 1),
+    new Date().setMonth(new Date().getMonth() - 1),
+  ]
+  const outputs = [
+    new Date(1671461038).toLocaleDateString(),
+    new Date('04 Dec 1995 00:12:00 GMT').toLocaleDateString(),
+    '0s',
+    '10m',
+    '1h',
+    '1d',
+    '1mo',
+  ]
+
+  it('correctly calculates how much time passed, in a string', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const result = ago(inputs[i])
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('makeValidHandle', () => {
+  const inputs = [
+    'test-handle-123',
+    'test!"#$%&/()=?_',
+    'this-handle-should-be-too-big',
+  ]
+  const outputs = ['test-handle-123', 'test', 'this-handle-should-b']
+
+  it('correctly parses and corrects handles', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const result = makeValidHandle(inputs[i])
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('createFullHandle', () => {
+  const inputs: [string, string][] = [
+    ['test-handle-123', 'test'],
+    ['.test.handle', 'test.test.'],
+    ['test.handle.', '.test.test'],
+  ]
+  const outputs = [
+    'test-handle-123.test',
+    '.test.handle.test.test.',
+    'test.handle.test.test',
+  ]
+
+  it('correctly parses and corrects handles', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const result = createFullHandle(...input)
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('enforceLen', () => {
+  const inputs: [string, number][] = [
+    ['Hello World!', 5],
+    ['Hello World!', 20],
+    ['', 5],
+  ]
+  const outputs = ['Hello', 'Hello World!', '']
+
+  it('correctly enforces defined length on a given string', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i]
+      const result = enforceLen(...input)
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('cleanError', () => {
+  const inputs = [
+    'TypeError: Network request failed',
+    'Error: Aborted',
+    'Error: TypeError "x" is not a function',
+    'Error: SyntaxError unexpected token "export"',
+    'Some other error',
+  ]
+  const outputs = [
+    'Unable to connect. Please check your internet connection and try again.',
+    'Unable to connect. Please check your internet connection and try again.',
+    'TypeError "x" is not a function',
+    'SyntaxError unexpected token "export"',
+    'Some other error',
+  ]
+
+  it('removes extra content from error message', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const result = cleanError(inputs[i])
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('toNiceDomain', () => {
+  const inputs = [
+    'https://example.com/index.html',
+    'https://bsky.app',
+    'https://bsky.social',
+    '#123123123',
+  ]
+  const outputs = ['example.com', 'bsky.app', 'Bluesky Social', '#123123123']
+
+  it("displays the url's host in a easily readable manner", () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const result = toNiceDomain(inputs[i])
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('toShortUrl', () => {
+  const inputs = [
+    'https://bsky.app',
+    'https://bsky.app/3jk7x4irgv52r',
+    'https://bsky.app/3jk7x4irgv52r2313y182h9',
+  ]
+  const outputs = [
+    'bsky.app',
+    'bsky.app/3jk7x4irgv52r',
+    'bsky.app/3jk7x4irgv52r2313y...',
+  ]
+
+  it('shortens the url', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const result = toShortUrl(inputs[i])
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
+
+describe('toShareUrl', () => {
+  const inputs = ['https://bsky.app', '/3jk7x4irgv52r', 'item/test/123']
+  const outputs = [
+    'https://bsky.app',
+    'https://bsky.app/3jk7x4irgv52r',
+    'https://bsky.app/item/test/123',
+  ]
+
+  it('appends https, when not present', () => {
+    for (let i = 0; i < inputs.length; i++) {
+      const result = toShareUrl(inputs[i])
+      expect(result).toEqual(outputs[i])
+    }
+  })
+})
diff --git a/__tests__/link-meta-utils.ts b/__tests__/link-meta-utils.ts
deleted file mode 100644
index f6cf8b4fd..000000000
--- a/__tests__/link-meta-utils.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import {LikelyType, getLinkMeta} from '../src/lib/link-meta'
-
-const exampleComHtml = `<!doctype html>
-<html>
-<head>
-    <title>Example Domain</title>
-    <meta name="description" content="An example website">
-
-    <meta charset="utf-8" />
-    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style type="text/css">
-    body {
-        background-color: #f0f0f2;
-        margin: 0;
-        padding: 0;
-        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-
-    }
-    div {
-        width: 600px;
-        margin: 5em auto;
-        padding: 2em;
-        background-color: #fdfdff;
-        border-radius: 0.5em;
-        box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
-    }
-    a:link, a:visited {
-        color: #38488f;
-        text-decoration: none;
-    }
-    @media (max-width: 700px) {
-        div {
-            margin: 0 auto;
-            width: auto;
-        }
-    }
-    </style>
-</head>
-
-<body>
-<div>
-    <h1>Example Domain</h1>
-    <p>This domain is for use in illustrative examples in documents. You may use this
-    domain in literature without prior coordination or asking for permission.</p>
-    <p><a href="https://www.iana.org/domains/example">More information...</a></p>
-</div>
-</body>
-</html>`
-
-describe('getLinkMeta', () => {
-  const inputs = [
-    '',
-    'httpbadurl',
-    'https://example.com',
-    'https://example.com/index.html',
-    'https://example.com/image.png',
-    'https://example.com/video.avi',
-    'https://example.com/audio.ogg',
-    'https://example.com/javascript.js',
-  ]
-  const outputs = [
-    {
-      error: 'Invalid URL',
-      likelyType: LikelyType.Other,
-      url: '',
-    },
-    {
-      error: 'Invalid URL',
-      likelyType: LikelyType.Other,
-      url: 'httpbadurl',
-    },
-    {
-      likelyType: LikelyType.HTML,
-      url: 'https://example.com',
-      title: 'Example Domain',
-      description: 'An example website',
-    },
-    {
-      likelyType: LikelyType.HTML,
-      url: 'https://example.com/index.html',
-      title: 'Example Domain',
-      description: 'An example website',
-    },
-    {
-      likelyType: LikelyType.Image,
-      url: 'https://example.com/image.png',
-    },
-    {
-      likelyType: LikelyType.Video,
-      url: 'https://example.com/video.avi',
-    },
-    {
-      likelyType: LikelyType.Audio,
-      url: 'https://example.com/audio.ogg',
-    },
-    {
-      likelyType: LikelyType.Other,
-      url: 'https://example.com/javascript.js',
-    },
-  ]
-  it('correctly handles a set of text inputs', async () => {
-    for (let i = 0; i < inputs.length; i++) {
-      global.fetch = jest.fn().mockImplementationOnce(() => {
-        return new Promise((resolve, reject) => {
-          resolve({
-            ok: true,
-            status: 200,
-            text: () => exampleComHtml,
-          })
-        })
-      })
-      const input = inputs[i]
-      const output = await getLinkMeta(input)
-      expect(output).toEqual(outputs[i])
-    }
-  })
-})
diff --git a/__tests__/string-utils.ts b/__tests__/string-utils.ts
deleted file mode 100644
index a1bd59fee..000000000
--- a/__tests__/string-utils.ts
+++ /dev/null
@@ -1,319 +0,0 @@
-import {
-  extractEntities,
-  detectLinkables,
-  extractHtmlMeta,
-} from '../src/lib/strings'
-
-describe('extractEntities', () => {
-  const knownHandles = new Set(['handle.com', 'full123.test-of-chars'])
-  const inputs = [
-    'no mention',
-    '@handle.com middle end',
-    'start @handle.com end',
-    'start middle @handle.com',
-    '@handle.com @handle.com @handle.com',
-    '@full123.test-of-chars',
-    'not@right',
-    '@handle.com!@#$chars',
-    '@handle.com\n@handle.com',
-    'parenthetical (@handle.com)',
-    'start https://middle.com end',
-    'start https://middle.com/foo/bar end',
-    'start https://middle.com/foo/bar?baz=bux end',
-    'start https://middle.com/foo/bar?baz=bux#hash end',
-    'https://start.com/foo/bar?baz=bux#hash middle end',
-    'start middle https://end.com/foo/bar?baz=bux#hash',
-    'https://newline1.com\nhttps://newline2.com',
-    'start middle.com end',
-    'start middle.com/foo/bar end',
-    'start middle.com/foo/bar?baz=bux end',
-    'start middle.com/foo/bar?baz=bux#hash end',
-    'start.com/foo/bar?baz=bux#hash middle end',
-    'start middle end.com/foo/bar?baz=bux#hash',
-    'newline1.com\nnewline2.com',
-    'not.. a..url ..here',
-    'e.g.',
-    'something-cool.jpg',
-    'website.com.jpg',
-    'e.g./foo',
-    'website.com.jpg/foo',
-    'Classic article https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
-    'Classic article https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/ ',
-    'https://foo.com https://bar.com/whatever https://baz.com',
-    'punctuation https://foo.com, https://bar.com/whatever; https://baz.com.',
-    'parenthentical (https://foo.com)',
-    'except for https://foo.com/thing_(cool)',
-  ]
-  interface Output {
-    type: string
-    value: string
-    noScheme?: boolean
-  }
-  const outputs: Output[][] = [
-    [],
-    [{type: 'mention', value: 'handle.com'}],
-    [{type: 'mention', value: 'handle.com'}],
-    [{type: 'mention', value: 'handle.com'}],
-    [
-      {type: 'mention', value: 'handle.com'},
-      {type: 'mention', value: 'handle.com'},
-      {type: 'mention', value: 'handle.com'},
-    ],
-    [
-      {
-        type: 'mention',
-        value: 'full123.test-of-chars',
-      },
-    ],
-    [],
-    [{type: 'mention', value: 'handle.com'}],
-    [
-      {type: 'mention', value: 'handle.com'},
-      {type: 'mention', value: 'handle.com'},
-    ],
-    [{type: 'mention', value: 'handle.com'}],
-    [{type: 'link', value: 'https://middle.com'}],
-    [{type: 'link', value: 'https://middle.com/foo/bar'}],
-    [{type: 'link', value: 'https://middle.com/foo/bar?baz=bux'}],
-    [{type: 'link', value: 'https://middle.com/foo/bar?baz=bux#hash'}],
-    [{type: 'link', value: 'https://start.com/foo/bar?baz=bux#hash'}],
-    [{type: 'link', value: 'https://end.com/foo/bar?baz=bux#hash'}],
-    [
-      {type: 'link', value: 'https://newline1.com'},
-      {type: 'link', value: 'https://newline2.com'},
-    ],
-    [{type: 'link', value: 'middle.com', noScheme: true}],
-    [{type: 'link', value: 'middle.com/foo/bar', noScheme: true}],
-    [{type: 'link', value: 'middle.com/foo/bar?baz=bux', noScheme: true}],
-    [{type: 'link', value: 'middle.com/foo/bar?baz=bux#hash', noScheme: true}],
-    [{type: 'link', value: 'start.com/foo/bar?baz=bux#hash', noScheme: true}],
-    [{type: 'link', value: 'end.com/foo/bar?baz=bux#hash', noScheme: true}],
-    [
-      {type: 'link', value: 'newline1.com', noScheme: true},
-      {type: 'link', value: 'newline2.com', noScheme: true},
-    ],
-    [],
-    [],
-    [],
-    [],
-    [],
-    [],
-    [
-      {
-        type: 'link',
-        value:
-          'https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
-      },
-    ],
-    [
-      {
-        type: 'link',
-        value:
-          'https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
-      },
-    ],
-    [
-      {type: 'link', value: 'https://foo.com'},
-      {type: 'link', value: 'https://bar.com/whatever'},
-      {type: 'link', value: 'https://baz.com'},
-    ],
-    [
-      {type: 'link', value: 'https://foo.com'},
-      {type: 'link', value: 'https://bar.com/whatever'},
-      {type: 'link', value: 'https://baz.com'},
-    ],
-    [{type: 'link', value: 'https://foo.com'}],
-    [{type: 'link', value: 'https://foo.com/thing_(cool)'}],
-  ]
-  it('correctly handles a set of text inputs', () => {
-    for (let i = 0; i < inputs.length; i++) {
-      const input = inputs[i]
-      const result = extractEntities(input, knownHandles)
-      if (!outputs[i].length) {
-        expect(result).toBeFalsy()
-      } else if (outputs[i].length && !result) {
-        expect(result).toBeTruthy()
-      } else if (result) {
-        expect(result.length).toBe(outputs[i].length)
-        for (let j = 0; j < outputs[i].length; j++) {
-          expect(result[j].type).toEqual(outputs[i][j].type)
-          if (outputs[i][j].noScheme) {
-            expect(result[j].value).toEqual(`https://${outputs[i][j].value}`)
-          } else {
-            expect(result[j].value).toEqual(outputs[i][j].value)
-          }
-          if (outputs[i]?.[j].type === 'mention') {
-            expect(
-              input.slice(result[j].index.start, result[j].index.end),
-            ).toBe(`@${result[j].value}`)
-          } else {
-            if (!outputs[i]?.[j].noScheme) {
-              expect(
-                input.slice(result[j].index.start, result[j].index.end),
-              ).toBe(result[j].value)
-            } else {
-              expect(
-                input.slice(result[j].index.start, result[j].index.end),
-              ).toBe(result[j].value.slice('https://'.length))
-            }
-          }
-        }
-      }
-    }
-  })
-})
-
-describe('detectLinkables', () => {
-  const inputs = [
-    'no linkable',
-    '@start middle end',
-    'start @middle end',
-    'start middle @end',
-    '@start @middle @end',
-    '@full123.test-of-chars',
-    'not@right',
-    '@bad!@#$chars',
-    '@newline1\n@newline2',
-    'parenthetical (@handle)',
-    'start https://middle.com end',
-    'start https://middle.com/foo/bar end',
-    'start https://middle.com/foo/bar?baz=bux end',
-    'start https://middle.com/foo/bar?baz=bux#hash end',
-    'https://start.com/foo/bar?baz=bux#hash middle end',
-    'start middle https://end.com/foo/bar?baz=bux#hash',
-    'https://newline1.com\nhttps://newline2.com',
-    'start middle.com end',
-    'start middle.com/foo/bar end',
-    'start middle.com/foo/bar?baz=bux end',
-    'start middle.com/foo/bar?baz=bux#hash end',
-    'start.com/foo/bar?baz=bux#hash middle end',
-    'start middle end.com/foo/bar?baz=bux#hash',
-    'newline1.com\nnewline2.com',
-    'not.. a..url ..here',
-    'e.g.',
-    'e.g. real.com fake.notreal',
-    'something-cool.jpg',
-    'website.com.jpg',
-    'e.g./foo',
-    'website.com.jpg/foo',
-    'Classic article https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
-    'Classic article https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/ ',
-    'https://foo.com https://bar.com/whatever https://baz.com',
-    'punctuation https://foo.com, https://bar.com/whatever; https://baz.com.',
-    'parenthentical (https://foo.com)',
-    'except for https://foo.com/thing_(cool)',
-  ]
-  const outputs = [
-    ['no linkable'],
-    [{link: '@start'}, ' middle end'],
-    ['start ', {link: '@middle'}, ' end'],
-    ['start middle ', {link: '@end'}],
-    [{link: '@start'}, ' ', {link: '@middle'}, ' ', {link: '@end'}],
-    [{link: '@full123.test-of-chars'}],
-    ['not@right'],
-    [{link: '@bad'}, '!@#$chars'],
-    [{link: '@newline1'}, '\n', {link: '@newline2'}],
-    ['parenthetical (', {link: '@handle'}, ')'],
-    ['start ', {link: 'https://middle.com'}, ' end'],
-    ['start ', {link: 'https://middle.com/foo/bar'}, ' end'],
-    ['start ', {link: 'https://middle.com/foo/bar?baz=bux'}, ' end'],
-    ['start ', {link: 'https://middle.com/foo/bar?baz=bux#hash'}, ' end'],
-    [{link: 'https://start.com/foo/bar?baz=bux#hash'}, ' middle end'],
-    ['start middle ', {link: 'https://end.com/foo/bar?baz=bux#hash'}],
-    [{link: 'https://newline1.com'}, '\n', {link: 'https://newline2.com'}],
-    ['start ', {link: 'middle.com'}, ' end'],
-    ['start ', {link: 'middle.com/foo/bar'}, ' end'],
-    ['start ', {link: 'middle.com/foo/bar?baz=bux'}, ' end'],
-    ['start ', {link: 'middle.com/foo/bar?baz=bux#hash'}, ' end'],
-    [{link: 'start.com/foo/bar?baz=bux#hash'}, ' middle end'],
-    ['start middle ', {link: 'end.com/foo/bar?baz=bux#hash'}],
-    [{link: 'newline1.com'}, '\n', {link: 'newline2.com'}],
-    ['not.. a..url ..here'],
-    ['e.g.'],
-    ['e.g. ', {link: 'real.com'}, ' fake.notreal'],
-    ['something-cool.jpg'],
-    ['website.com.jpg'],
-    ['e.g./foo'],
-    ['website.com.jpg/foo'],
-    [
-      'Classic article ',
-      {
-        link: 'https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
-      },
-    ],
-    [
-      'Classic article ',
-      {
-        link: 'https://socket3.wordpress.com/2018/02/03/designing-windows-95s-user-interface/',
-      },
-      ' ',
-    ],
-    [
-      {link: 'https://foo.com'},
-      ' ',
-      {link: 'https://bar.com/whatever'},
-      ' ',
-      {link: 'https://baz.com'},
-    ],
-    [
-      'punctuation ',
-      {link: 'https://foo.com'},
-      ', ',
-      {link: 'https://bar.com/whatever'},
-      '; ',
-      {link: 'https://baz.com'},
-      '.',
-    ],
-    ['parenthentical (', {link: 'https://foo.com'}, ')'],
-    ['except for ', {link: 'https://foo.com/thing_(cool)'}],
-  ]
-  it('correctly handles a set of text inputs', () => {
-    for (let i = 0; i < inputs.length; i++) {
-      const input = inputs[i]
-      const output = detectLinkables(input)
-      expect(output).toEqual(outputs[i])
-    }
-  })
-})
-
-describe('extractHtmlMeta', () => {
-  const inputs = [
-    '',
-    'nothing',
-    '<title>title</title>',
-    '<title> aSd!@#AC </title>',
-    '<title>\n  title\n  </title>',
-    '<meta name="title" content="meta title">',
-    '<meta name="description" content="meta description">',
-    '<meta property="og:title" content="og title">',
-    '<meta property="og:description" content="og description">',
-    '<meta property="og:image" content="https://ogimage.com/foo.png">',
-    '<meta property="twitter:title" content="twitter title">',
-    '<meta property="twitter:description" content="twitter description">',
-    '<meta property="twitter:image" content="https://twitterimage.com/foo.png">',
-    '<meta\n  name="title"\n  content="meta title"\n>',
-  ]
-  const outputs = [
-    {},
-    {},
-    {title: 'title'},
-    {title: 'aSd!@#AC'},
-    {title: 'title'},
-    {title: 'meta title'},
-    {description: 'meta description'},
-    {title: 'og title'},
-    {description: 'og description'},
-    {image: 'https://ogimage.com/foo.png'},
-    {title: 'twitter title'},
-    {description: 'twitter description'},
-    {image: 'https://twitterimage.com/foo.png'},
-    {title: 'meta title'},
-  ]
-  it('correctly handles a set of text inputs', () => {
-    for (let i = 0; i < inputs.length; i++) {
-      const input = inputs[i]
-      const output = extractHtmlMeta(input)
-      expect(output).toEqual(outputs[i])
-    }
-  })
-})
diff --git a/__tests__/view/screens/Contacts.test.tsx b/__tests__/view/screens/Contacts.test.tsx
new file mode 100644
index 000000000..8dc4e56ef
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/Home.test.tsx b/__tests__/view/screens/Home.test.tsx
new file mode 100644
index 000000000..353d4ea50
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/Login.test.tsx b/__tests__/view/screens/Login.test.tsx
new file mode 100644
index 000000000..d9faf08a1
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/NotFound.test.tsx b/__tests__/view/screens/NotFound.test.tsx
new file mode 100644
index 000000000..047d309e3
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/Notifications.test.tsx b/__tests__/view/screens/Notifications.test.tsx
new file mode 100644
index 000000000..2c5e32cd7
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/Onboard.test.tsx b/__tests__/view/screens/Onboard.test.tsx
new file mode 100644
index 000000000..69d6f0a72
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/PostDownvotedBy.test.tsx b/__tests__/view/screens/PostDownvotedBy.test.tsx
new file mode 100644
index 000000000..8c4119b41
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/PostRepostedBy.test.tsx b/__tests__/view/screens/PostRepostedBy.test.tsx
new file mode 100644
index 000000000..001224356
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/PostThread.test.tsx b/__tests__/view/screens/PostThread.test.tsx
new file mode 100644
index 000000000..87164ed73
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/PostUpvotedBy.test.tsx b/__tests__/view/screens/PostUpvotedBy.test.tsx
new file mode 100644
index 000000000..97912ded6
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/Profile.test.tsx b/__tests__/view/screens/Profile.test.tsx
new file mode 100644
index 000000000..8912cbfb2
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/ProfileFollowers.test.tsx b/__tests__/view/screens/ProfileFollowers.test.tsx
new file mode 100644
index 000000000..230209aa8
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/ProfileFollows.test.tsx b/__tests__/view/screens/ProfileFollows.test.tsx
new file mode 100644
index 000000000..e4571b5cb
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/ProfileMembers.test.tsx b/__tests__/view/screens/ProfileMembers.test.tsx
new file mode 100644
index 000000000..a33e03a1f
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/Search.test.tsx b/__tests__/view/screens/Search.test.tsx
new file mode 100644
index 000000000..477e077af
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/Settings.test.tsx b/__tests__/view/screens/Settings.test.tsx
new file mode 100644
index 000000000..475639ebb
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/screens/__snapshots__/Contacts.test.tsx.snap b/__tests__/view/screens/__snapshots__/Contacts.test.tsx.snap
new file mode 100644
index 000000000..61a857088
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/Home.test.tsx.snap b/__tests__/view/screens/__snapshots__/Home.test.tsx.snap
new file mode 100644
index 000000000..4d2c51097
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/Login.test.tsx.snap b/__tests__/view/screens/__snapshots__/Login.test.tsx.snap
new file mode 100644
index 000000000..b86d8656e
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/NotFound.test.tsx.snap b/__tests__/view/screens/__snapshots__/NotFound.test.tsx.snap
new file mode 100644
index 000000000..a9365718c
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/Notifications.test.tsx.snap b/__tests__/view/screens/__snapshots__/Notifications.test.tsx.snap
new file mode 100644
index 000000000..6c1eef57e
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/Onboard.test.tsx.snap b/__tests__/view/screens/__snapshots__/Onboard.test.tsx.snap
new file mode 100644
index 000000000..5422fb0de
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/PostDownvotedBy.test.tsx.snap b/__tests__/view/screens/__snapshots__/PostDownvotedBy.test.tsx.snap
new file mode 100644
index 000000000..aa41d7fb2
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/PostRepostedBy.test.tsx.snap b/__tests__/view/screens/__snapshots__/PostRepostedBy.test.tsx.snap
new file mode 100644
index 000000000..f6af5ec5a
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/PostThread.test.tsx.snap b/__tests__/view/screens/__snapshots__/PostThread.test.tsx.snap
new file mode 100644
index 000000000..abb36931c
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/PostUpvotedBy.test.tsx.snap b/__tests__/view/screens/__snapshots__/PostUpvotedBy.test.tsx.snap
new file mode 100644
index 000000000..a7bb6aae5
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/Profile.test.tsx.snap b/__tests__/view/screens/__snapshots__/Profile.test.tsx.snap
new file mode 100644
index 000000000..e9640b6ee
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/ProfileFollowers.test.tsx.snap b/__tests__/view/screens/__snapshots__/ProfileFollowers.test.tsx.snap
new file mode 100644
index 000000000..237773b42
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/ProfileFollows.test.tsx.snap b/__tests__/view/screens/__snapshots__/ProfileFollows.test.tsx.snap
new file mode 100644
index 000000000..cba1a7343
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/ProfileMembers.test.tsx.snap b/__tests__/view/screens/__snapshots__/ProfileMembers.test.tsx.snap
new file mode 100644
index 000000000..e36a4b080
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/Search.test.tsx.snap b/__tests__/view/screens/__snapshots__/Search.test.tsx.snap
new file mode 100644
index 000000000..130552076
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/screens/__snapshots__/Settings.test.tsx.snap b/__tests__/view/screens/__snapshots__/Settings.test.tsx.snap
new file mode 100644
index 000000000..77402da21
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/shell/mobile/Composer.test.tsx b/__tests__/view/shell/mobile/Composer.test.tsx
new file mode 100644
index 000000000..7b84cfd88
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/shell/mobile/Menu.test.tsx b/__tests__/view/shell/mobile/Menu.test.tsx
new file mode 100644
index 000000000..5305bd77a
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/shell/mobile/TabsSelector.test.tsx b/__tests__/view/shell/mobile/TabsSelector.test.tsx
new file mode 100644
index 000000000..7908f442e
--- /dev/null
+++ b/__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()
+  })
+})
diff --git a/__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/Composer.test.tsx.snap
new file mode 100644
index 000000000..6ced9871b
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/shell/mobile/__snapshots__/Menu.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/Menu.test.tsx.snap
new file mode 100644
index 000000000..78c34b967
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/shell/mobile/__snapshots__/TabsSelector.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/TabsSelector.test.tsx.snap
new file mode 100644
index 000000000..03e0636de
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/shell/mobile/__snapshots__/index.test.tsx.snap b/__tests__/view/shell/mobile/__snapshots__/index.test.tsx.snap
new file mode 100644
index 000000000..793668b73
--- /dev/null
+++ b/__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>
+`;
diff --git a/__tests__/view/shell/mobile/index.test.tsx b/__tests__/view/shell/mobile/index.test.tsx
new file mode 100644
index 000000000..96f161260
--- /dev/null
+++ b/__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()
+  })
+})
-- 
cgit 1.4.1