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>

60 files changed, 10409 insertions, 34 deletions

diff --git a/.gitignore b/.gitignore
index 81570d991..5f5961903 100644
--- a/.gitignore
+++ b/.gitignore
@@ -59,3 +59,6 @@ buck-out/
 # Ruby / CocoaPods
 /ios/Pods/
 /vendor/bundle/
+
+# Testing
+coverage/
\ No newline at end of file
diff --git a/__mocks__/@react-native-camera-roll/camera-roll.js b/__mocks__/@react-native-camera-roll/camera-roll.js
new file mode 100644
index 000000000..43f402080
--- /dev/null
+++ b/__mocks__/@react-native-camera-roll/camera-roll.js
@@ -0,0 +1,3 @@
+export default {
+  CameraRoll: jest.fn(),
+}
diff --git a/__mocks__/async-storage.js b/__mocks__/async-storage.js
deleted file mode 100644
index 32e39bc7a..000000000
--- a/__mocks__/async-storage.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from '@react-native-async-storage/async-storage/jest/async-storage-mock'
diff --git a/__mocks__/react-native-image-crop-picker.js b/__mocks__/react-native-image-crop-picker.js
new file mode 100644
index 000000000..9f2298a72
--- /dev/null
+++ b/__mocks__/react-native-image-crop-picker.js
@@ -0,0 +1,3 @@
+export default {
+  openPicker: jest.fn().mockImplementation(() => Promise.resolve(result)),
+}
diff --git a/__mocks__/rn-fetch-blob.js b/__mocks__/rn-fetch-blob.js
new file mode 100644
index 000000000..dedfbdf89
--- /dev/null
+++ b/__mocks__/rn-fetch-blob.js
@@ -0,0 +1,10 @@
+jest.mock('rn-fetch-blob', () => {
+  return {
+    __esModule: true,
+    default: {
+      fs: {
+        unlink: jest.fn(),
+      },
+    },
+  }
+})
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__/link-meta-utils.ts b/__tests__/lib/link-meta.test.ts
index f6cf8b4fd..5df5153ee 100644
--- a/__tests__/link-meta-utils.ts
+++ b/__tests__/lib/link-meta.test.ts
@@ -1,4 +1,4 @@
-import {LikelyType, getLinkMeta} from '../src/lib/link-meta'
+import {LikelyType, getLinkMeta, getLikelyType} from '../../src/lib/link-meta'
 
 const exampleComHtml = `<!doctype html>
 <html>
@@ -57,7 +57,9 @@ describe('getLinkMeta', () => {
     '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 = [
     {
@@ -95,14 +97,28 @@ describe('getLinkMeta', () => {
       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) => {
+        return new Promise((resolve, _reject) => {
           resolve({
             ok: true,
             status: 200,
@@ -116,3 +132,15 @@ describe('getLinkMeta', () => {
     }
   })
 })
+
+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__/string-utils.ts b/__tests__/lib/string.test.ts
index a1bd59fee..d8a56b36b 100644
--- a/__tests__/string-utils.ts
+++ b/__tests__/lib/string.test.ts
@@ -2,7 +2,17 @@ import {
   extractEntities,
   detectLinkables,
   extractHtmlMeta,
-} from '../src/lib/strings'
+  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'])
@@ -317,3 +327,206 @@ describe('extractHtmlMeta', () => {
     }
   })
 })
+
+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__/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()
+  })
+})
diff --git a/jest.js b/jest.js
deleted file mode 100644
index eb2d41652..000000000
--- a/jest.js
+++ /dev/null
@@ -1,3 +0,0 @@
-jest.mock('@react-native-async-storage/async-storage', () =>
-  require('@react-native-async-storage/async-storage/jest/async-storage-mock'),
-)
diff --git a/jest/jestSetup.js b/jest/jestSetup.js
new file mode 100644
index 000000000..7a2f10d2d
--- /dev/null
+++ b/jest/jestSetup.js
@@ -0,0 +1,39 @@
+jest.mock('@react-native-async-storage/async-storage', () =>
+  require('@react-native-async-storage/async-storage/jest/async-storage-mock'),
+)
+jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter')
+
+jest.mock('@fortawesome/react-native-fontawesome', () => ({
+  FontAwesomeIcon: '',
+}))
+
+require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests()
+
+// Silence the warning: Animated: `useNativeDriver` is not supported
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper')
+
+jest.mock('react-native-safe-area-context', () => {
+  const inset = {top: 0, right: 0, bottom: 0, left: 0}
+  return {
+    SafeAreaProvider: jest.fn().mockImplementation(({children}) => children),
+    SafeAreaConsumer: jest
+      .fn()
+      .mockImplementation(({children}) => children(inset)),
+    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
+  }
+})
+
+jest.mock('@gorhom/bottom-sheet', () => {
+  const react = require('react-native')
+  return {
+    __esModule: true,
+    default: react.View,
+    namedExport: {
+      ...require('react-native-reanimated/mock'),
+      ...jest.requireActual('@gorhom/bottom-sheet'),
+      BottomSheetFlatList: react.FlatList,
+    },
+  }
+})
+
+jest.useFakeTimers()
diff --git a/jest/test-utils.tsx b/jest/test-utils.tsx
new file mode 100644
index 000000000..a5946ed06
--- /dev/null
+++ b/jest/test-utils.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import RN from 'react-native'
+import {render} from '@testing-library/react-native'
+import {GestureHandlerRootView} from 'react-native-gesture-handler'
+import {RootSiblingParent} from 'react-native-root-siblings'
+import {SafeAreaProvider} from 'react-native-safe-area-context'
+import {DEFAULT_SERVICE, RootStoreModel, RootStoreProvider} from '../src/state'
+import {SessionServiceClient} from '../src/third-party/api/src'
+import {sessionClient as AtpApi} from '../src/third-party/api'
+
+const WrappedComponent = ({children}: any) => {
+  const api = AtpApi.service(DEFAULT_SERVICE) as SessionServiceClient
+  const rootStore = new RootStoreModel(api)
+  return (
+    <GestureHandlerRootView style={{flex: 1}}>
+      <RootSiblingParent>
+        <RootStoreProvider value={rootStore}>
+          <SafeAreaProvider>{children}</SafeAreaProvider>
+        </RootStoreProvider>
+      </RootSiblingParent>
+    </GestureHandlerRootView>
+  )
+}
+
+const customRender = (ui: any, options?: any) =>
+  render(ui, {wrapper: WrappedComponent, ...options})
+
+// re-export everything
+export * from '@testing-library/react-native'
+
+// override render method
+export {customRender as render}
diff --git a/package.json b/package.json
index 73abfc5fd..3a11ba35f 100644
--- a/package.json
+++ b/package.json
@@ -8,8 +8,9 @@
     "web": "react-scripts start",
     "start": "react-native start",
     "clean-cache": "rm -rf node_modules/.cache/babel-loader/*",
-    "test": "jest",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "test": "jest --coverage",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "postinstall": "patch-package"
   },
   "dependencies": {
     "@atproto/api": "^0.0.2",
@@ -31,6 +32,7 @@
     "lru_map": "^0.4.1",
     "mobx": "^6.6.1",
     "mobx-react-lite": "^3.4.0",
+    "patch-package": "^6.5.0",
     "react": "17.0.2",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "17.0.2",
@@ -61,6 +63,8 @@
     "@babel/core": "^7.12.9",
     "@babel/runtime": "^7.12.5",
     "@react-native-community/eslint-config": "^2.0.0",
+    "@testing-library/jest-native": "^5.3.3",
+    "@testing-library/react-native": "^11.5.0",
     "@types/he": "^1.1.2",
     "@types/jest": "^26.0.23",
     "@types/lodash.chunk": "^4.2.7",
@@ -85,8 +89,10 @@
   "jest": {
     "preset": "react-native",
     "setupFiles": [
-      "./jest.js"
+      "./jest/jestSetup.js",
+      "./node_modules/react-native-gesture-handler/jestSetup.js"
     ],
+    "setupFilesAfterEnv": ["@testing-library/jest-native/extend-expect"],
     "moduleFileExtensions": [
       "ts",
       "tsx",
@@ -97,6 +103,12 @@
     ],
     "transformIgnorePatterns": [
       "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|rollbar-react-native|@fortawesome|@react-native|@react-navigation)"
+    ],
+    "coveragePathIgnorePatterns": [
+      "<rootDir>/node_modules/",
+      "<rootDir>/src/platform",
+      "<rootDir>/src/third-party",
+      "<rootDir>/__tests__/test-utils.js"
     ]
   },
   "browserslist": {
diff --git a/patches/react-native-pager-view+5.4.1.patch b/patches/react-native-pager-view+5.4.1.patch
new file mode 100644
index 000000000..31690e5d2
--- /dev/null
+++ b/patches/react-native-pager-view+5.4.1.patch
@@ -0,0 +1,125 @@
+# HOTFIX - https://github.com/satya164/react-native-tab-view/issues/1104
+
+diff --git a/node_modules/react-native-pager-view/lib/commonjs/PagerView.js b/node_modules/react-native-pager-view/lib/commonjs/PagerView.js
+index 40afb41..850c151 100644
+--- a/node_modules/react-native-pager-view/lib/commonjs/PagerView.js
++++ b/node_modules/react-native-pager-view/lib/commonjs/PagerView.js
+@@ -131,17 +131,20 @@ class PagerView extends _react.default.Component {
+   }
+ 
+   render() {
+-    return /*#__PURE__*/_react.default.createElement(_PagerViewNative.PagerViewViewManager, _extends({}, this.props, {
+-      ref: this.PagerView
+-      /** TODO: Fix ref type */
+-      ,
++    const {
++      children,
++      forwardedRef,
++      ...rest
++    } = this.props;
++    return /*#__PURE__*/_react.default.createElement(_PagerViewNative.PagerViewViewManager, _extends({}, rest, {
++      // ref={this.PagerView as any /** TODO: Fix ref type */}
+       style: this.props.style,
+       layoutDirection: this.deducedLayoutDirection,
+       onPageScroll: this._onPageScroll,
+       onPageScrollStateChanged: this._onPageScrollStateChanged,
+       onPageSelected: this._onPageSelected,
+       onMoveShouldSetResponderCapture: this._onMoveShouldSetResponderCapture,
+-      children: (0, _utils.childrenWithOverriddenStyle)(this.props.children)
++      children: (0, _utils.childrenWithOverriddenStyle)(children)
+     }));
+   }
+ 
+diff --git a/node_modules/react-native-pager-view/lib/commonjs/PagerView.js.map b/node_modules/react-native-pager-view/lib/commonjs/PagerView.js.map
+index ce9ff7f..c55d898 100644
+--- a/node_modules/react-native-pager-view/lib/commonjs/PagerView.js.map
++++ b/node_modules/react-native-pager-view/lib/commonjs/PagerView.js.map
+@@ -1 +1 @@
+-{"version":3,"sources":["PagerView.tsx"],"names":["PagerView","React","Component","createRef","current","getInnerViewNode","e","props","onPageScroll","Platform","OS","keyboardDismissMode","Keyboard","dismiss","onPageScrollStateChanged","isScrolling","nativeEvent","pageScrollState","onPageSelected","selectedPage","UIManager","dispatchViewManagerCommand","ReactNative","findNodeHandle","Commands","setPage","setPageWithoutAnimation","scrollEnabled","setScrollEnabled","deducedLayoutDirection","shouldUseDeviceRtlSetup","layoutDirection","I18nManager","isRTL","render","style","_onPageScroll","_onPageScrollStateChanged","_onPageSelected","_onMoveShouldSetResponderCapture","children"],"mappings":";;;;;;;AAAA;;AACA;;AASA;;AACA;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAMA,SAAN,SAAwBC,eAAMC,SAA9B,CAAwD;AAAA;AAAA;;AAAA,yCACvC,KADuC;;AAAA,oDAEzCD,eAAME,SAAN,EAFyC;;AAAA,8CAInC,MAAoB;AAC5C,aAAO,KAAKH,SAAL,CAAeI,OAAf,CAAwBC,gBAAxB,EAAP;AACD,KAN4D;;AAAA,2CAQpCC,CAAD,IAAmC;AACzD,UAAI,KAAKC,KAAL,CAAWC,YAAf,EAA6B;AAC3B,aAAKD,KAAL,CAAWC,YAAX,CAAwBF,CAAxB;AACD,OAHwD,CAIzD;;;AACA,UAAIG,sBAASC,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAI,KAAKH,KAAL,CAAWI,mBAAX,KAAmC,SAAvC,EAAkD;AAChDC,gCAASC,OAAT;AACD;AACF;AACF,KAlB4D;;AAAA,uDAqB3DP,CADkC,IAE/B;AACH,UAAI,KAAKC,KAAL,CAAWO,wBAAf,EAAyC;AACvC,aAAKP,KAAL,CAAWO,wBAAX,CAAoCR,CAApC;AACD;;AACD,WAAKS,WAAL,GAAmBT,CAAC,CAACU,WAAF,CAAcC,eAAd,KAAkC,UAArD;AACD,KA3B4D;;AAAA,6CA6BlCX,CAAD,IAAqC;AAC7D,UAAI,KAAKC,KAAL,CAAWW,cAAf,EAA+B;AAC7B,aAAKX,KAAL,CAAWW,cAAX,CAA0BZ,CAA1B;AACD;AACF,KAjC4D;;AAAA,qCAuC3Ca,YAAD,IAA0B;AACzCC,6BAAUC,0BAAV,CACEC,qBAAYC,cAAZ,CAA2B,IAA3B,CADF,EAEE,6CAAuBC,QAAvB,CAAgCC,OAFlC,EAGE,CAACN,YAAD,CAHF;AAKD,KA7C4D;;AAAA,qDAmD3BA,YAAD,IAA0B;AACzDC,6BAAUC,0BAAV,CACEC,qBAAYC,cAAZ,CAA2B,IAA3B,CADF,EAEE,6CAAuBC,QAAvB,CAAgCE,uBAFlC,EAGE,CAACP,YAAD,CAHF;AAKD,KAzD4D;;AAAA,8CAgElCQ,aAAD,IAA4B;AACpDP,6BAAUC,0BAAV,CACEC,qBAAYC,cAAZ,CAA2B,IAA3B,CADF,EAEE,6CAAuBC,QAAvB,CAAgCI,gBAFlC,EAGE,CAACD,aAAD,CAHF;AAKD,KAtE4D;;AAAA,8DAwElB,MAAM;AAC/C,aAAO,KAAKZ,WAAZ;AACD,KA1E4D;AAAA;;AA4E3B,MAAtBc,sBAAsB,GAAG;AACnC,UAAMC,uBAAuB,GAC3B,CAAC,KAAKvB,KAAL,CAAWwB,eAAZ,IAA+B,KAAKxB,KAAL,CAAWwB,eAAX,KAA+B,QADhE;;AAGA,QAAID,uBAAJ,EAA6B;AAC3B,aAAOE,yBAAYC,KAAZ,GAAoB,KAApB,GAA4B,KAAnC;AACD,KAFD,MAEO;AACL,aAAO,KAAK1B,KAAL,CAAWwB,eAAlB;AACD;AACF;;AAEDG,EAAAA,MAAM,GAAG;AACP,wBACE,6BAAC,qCAAD,eACM,KAAK3B,KADX;AAEE,MAAA,GAAG,EAAE,KAAKP;AAAiB;AAF7B;AAGE,MAAA,KAAK,EAAE,KAAKO,KAAL,CAAW4B,KAHpB;AAIE,MAAA,eAAe,EAAE,KAAKN,sBAJxB;AAKE,MAAA,YAAY,EAAE,KAAKO,aALrB;AAME,MAAA,wBAAwB,EAAE,KAAKC,yBANjC;AAOE,MAAA,cAAc,EAAE,KAAKC,eAPvB;AAQE,MAAA,+BAA+B,EAAE,KAAKC,gCARxC;AASE,MAAA,QAAQ,EAAE,wCAA4B,KAAKhC,KAAL,CAAWiC,QAAvC;AATZ,OADF;AAaD;;AArG4D","sourcesContent":["import React, { ReactElement } from 'react';\nimport { Platform, UIManager, Keyboard } from 'react-native';\nimport ReactNative, { I18nManager } from 'react-native';\nimport type {\n  PagerViewOnPageScrollEvent,\n  PagerViewOnPageSelectedEvent,\n  PageScrollStateChangedNativeEvent,\n  PagerViewProps,\n} from './types';\n\nimport { childrenWithOverriddenStyle } from './utils';\nimport { getViewManagerConfig, PagerViewViewManager } from './PagerViewNative';\n\n/**\n * Container that allows to flip left and right between child views. Each\n * child view of the `PagerView` will be treated as a separate page\n * and will be stretched to fill the `PagerView`.\n *\n * It is important all children are `<View>`s and not composite components.\n * You can set style properties like `padding` or `backgroundColor` for each\n * child. It is also important that each child have a `key` prop.\n *\n * Example:\n *\n * ```\n * render: function() {\n *   return (\n *     <PagerView\n *       style={styles.PagerView}\n *       initialPage={0}>\n *       <View style={styles.pageStyle} key=\"1\">\n *         <Text>First page</Text>\n *       </View>\n *       <View style={styles.pageStyle} key=\"2\">\n *         <Text>Second page</Text>\n *       </View>\n *     </PagerView>\n *   );\n * }\n *\n * ...\n *\n * var styles = {\n *   ...\n *   PagerView: {\n *     flex: 1\n *   },\n *   pageStyle: {\n *     alignItems: 'center',\n *     padding: 20,\n *   }\n * }\n * ```\n */\n\nexport class PagerView extends React.Component<PagerViewProps> {\n  private isScrolling = false;\n  private PagerView = React.createRef<typeof PagerViewViewManager>();\n\n  public getInnerViewNode = (): ReactElement => {\n    return this.PagerView.current!.getInnerViewNode();\n  };\n\n  private _onPageScroll = (e: PagerViewOnPageScrollEvent) => {\n    if (this.props.onPageScroll) {\n      this.props.onPageScroll(e);\n    }\n    // Not implemented on iOS yet\n    if (Platform.OS === 'android') {\n      if (this.props.keyboardDismissMode === 'on-drag') {\n        Keyboard.dismiss();\n      }\n    }\n  };\n\n  private _onPageScrollStateChanged = (\n    e: PageScrollStateChangedNativeEvent\n  ) => {\n    if (this.props.onPageScrollStateChanged) {\n      this.props.onPageScrollStateChanged(e);\n    }\n    this.isScrolling = e.nativeEvent.pageScrollState === 'dragging';\n  };\n\n  private _onPageSelected = (e: PagerViewOnPageSelectedEvent) => {\n    if (this.props.onPageSelected) {\n      this.props.onPageSelected(e);\n    }\n  };\n\n  /**\n   * A helper function to scroll to a specific page in the PagerView.\n   * The transition between pages will be animated.\n   */\n  public setPage = (selectedPage: number) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setPage,\n      [selectedPage]\n    );\n  };\n\n  /**\n   * A helper function to scroll to a specific page in the PagerView.\n   * The transition between pages will *not* be animated.\n   */\n  public setPageWithoutAnimation = (selectedPage: number) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setPageWithoutAnimation,\n      [selectedPage]\n    );\n  };\n\n  /**\n   * A helper function to enable/disable scroll imperatively\n   * The recommended way is using the scrollEnabled prop, however, there might be a case where a\n   * imperative solution is more useful (e.g. for not blocking an animation)\n   */\n  public setScrollEnabled = (scrollEnabled: boolean) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setScrollEnabled,\n      [scrollEnabled]\n    );\n  };\n\n  private _onMoveShouldSetResponderCapture = () => {\n    return this.isScrolling;\n  };\n\n  private get deducedLayoutDirection() {\n    const shouldUseDeviceRtlSetup =\n      !this.props.layoutDirection || this.props.layoutDirection === 'locale';\n\n    if (shouldUseDeviceRtlSetup) {\n      return I18nManager.isRTL ? 'rtl' : 'ltr';\n    } else {\n      return this.props.layoutDirection;\n    }\n  }\n\n  render() {\n    return (\n      <PagerViewViewManager\n        {...this.props}\n        ref={this.PagerView as any /** TODO: Fix ref type */}\n        style={this.props.style}\n        layoutDirection={this.deducedLayoutDirection}\n        onPageScroll={this._onPageScroll}\n        onPageScrollStateChanged={this._onPageScrollStateChanged}\n        onPageSelected={this._onPageSelected}\n        onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}\n        children={childrenWithOverriddenStyle(this.props.children)}\n      />\n    );\n  }\n}\n"]}
+\ No newline at end of file
++{"version":3,"sources":["PagerView.tsx"],"names":["PagerView","React","Component","createRef","current","getInnerViewNode","e","props","onPageScroll","Platform","OS","keyboardDismissMode","Keyboard","dismiss","onPageScrollStateChanged","isScrolling","nativeEvent","pageScrollState","onPageSelected","selectedPage","UIManager","dispatchViewManagerCommand","ReactNative","findNodeHandle","Commands","setPage","setPageWithoutAnimation","scrollEnabled","setScrollEnabled","deducedLayoutDirection","shouldUseDeviceRtlSetup","layoutDirection","I18nManager","isRTL","render","children","forwardedRef","rest","style","_onPageScroll","_onPageScrollStateChanged","_onPageSelected","_onMoveShouldSetResponderCapture"],"mappings":";;;;;;;AAAA;;AACA;;AASA;;AACA;;;;;;;;;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,MAAMA,SAAN,SAAwBC,eAAMC,SAA9B,CAAgF;AAAA;AAAA;;AAAA,yCAC/D,KAD+D;;AAAA,oDAEjED,eAAME,SAAN,EAFiE;;AAAA,8CAI3D,MAAoB;AAC5C,aAAO,KAAKH,SAAL,CAAeI,OAAf,CAAwBC,gBAAxB,EAAP;AACD,KANoF;;AAAA,2CAQ5DC,CAAD,IAAmC;AACzD,UAAI,KAAKC,KAAL,CAAWC,YAAf,EAA6B;AAC3B,aAAKD,KAAL,CAAWC,YAAX,CAAwBF,CAAxB;AACD,OAHwD,CAIzD;;;AACA,UAAIG,sBAASC,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAI,KAAKH,KAAL,CAAWI,mBAAX,KAAmC,SAAvC,EAAkD;AAChDC,gCAASC,OAAT;AACD;AACF;AACF,KAlBoF;;AAAA,uDAqBnFP,CADkC,IAE/B;AACH,UAAI,KAAKC,KAAL,CAAWO,wBAAf,EAAyC;AACvC,aAAKP,KAAL,CAAWO,wBAAX,CAAoCR,CAApC;AACD;;AACD,WAAKS,WAAL,GAAmBT,CAAC,CAACU,WAAF,CAAcC,eAAd,KAAkC,UAArD;AACD,KA3BoF;;AAAA,6CA6B1DX,CAAD,IAAqC;AAC7D,UAAI,KAAKC,KAAL,CAAWW,cAAf,EAA+B;AAC7B,aAAKX,KAAL,CAAWW,cAAX,CAA0BZ,CAA1B;AACD;AACF,KAjCoF;;AAAA,qCAuCnEa,YAAD,IAA0B;AACzCC,6BAAUC,0BAAV,CACEC,qBAAYC,cAAZ,CAA2B,IAA3B,CADF,EAEE,6CAAuBC,QAAvB,CAAgCC,OAFlC,EAGE,CAACN,YAAD,CAHF;AAKD,KA7CoF;;AAAA,qDAmDnDA,YAAD,IAA0B;AACzDC,6BAAUC,0BAAV,CACEC,qBAAYC,cAAZ,CAA2B,IAA3B,CADF,EAEE,6CAAuBC,QAAvB,CAAgCE,uBAFlC,EAGE,CAACP,YAAD,CAHF;AAKD,KAzDoF;;AAAA,8CAgE1DQ,aAAD,IAA4B;AACpDP,6BAAUC,0BAAV,CACEC,qBAAYC,cAAZ,CAA2B,IAA3B,CADF,EAEE,6CAAuBC,QAAvB,CAAgCI,gBAFlC,EAGE,CAACD,aAAD,CAHF;AAKD,KAtEoF;;AAAA,8DAwE1C,MAAM;AAC/C,aAAO,KAAKZ,WAAZ;AACD,KA1EoF;AAAA;;AA4EnD,MAAtBc,sBAAsB,GAAG;AACnC,UAAMC,uBAAuB,GAC3B,CAAC,KAAKvB,KAAL,CAAWwB,eAAZ,IAA+B,KAAKxB,KAAL,CAAWwB,eAAX,KAA+B,QADhE;;AAGA,QAAID,uBAAJ,EAA6B;AAC3B,aAAOE,yBAAYC,KAAZ,GAAoB,KAApB,GAA4B,KAAnC;AACD,KAFD,MAEO;AACL,aAAO,KAAK1B,KAAL,CAAWwB,eAAlB;AACD;AACF;;AAEDG,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,YAAZ;AAA0B,SAAGC;AAA7B,QAAsC,KAAK9B,KAAjD;AAEA,wBACE,6BAAC,qCAAD,eACM8B,IADN;AAEE;AACA,MAAA,KAAK,EAAE,KAAK9B,KAAL,CAAW+B,KAHpB;AAIE,MAAA,eAAe,EAAE,KAAKT,sBAJxB;AAKE,MAAA,YAAY,EAAE,KAAKU,aALrB;AAME,MAAA,wBAAwB,EAAE,KAAKC,yBANjC;AAOE,MAAA,cAAc,EAAE,KAAKC,eAPvB;AAQE,MAAA,+BAA+B,EAAE,KAAKC,gCARxC;AASE,MAAA,QAAQ,EAAE,wCAA4BP,QAA5B;AATZ,OADF;AAaD;;AAvGoF","sourcesContent":["import React, { ReactElement } from 'react';\nimport { Platform, UIManager, Keyboard } from 'react-native';\nimport ReactNative, { I18nManager } from 'react-native';\nimport type {\n  PagerViewOnPageScrollEvent,\n  PagerViewOnPageSelectedEvent,\n  PageScrollStateChangedNativeEvent,\n  PagerViewProps,\n} from './types';\n\nimport { childrenWithOverriddenStyle } from './utils';\nimport { getViewManagerConfig, PagerViewViewManager } from './PagerViewNative';\n\n/**\n * Container that allows to flip left and right between child views. Each\n * child view of the `PagerView` will be treated as a separate page\n * and will be stretched to fill the `PagerView`.\n *\n * It is important all children are `<View>`s and not composite components.\n * You can set style properties like `padding` or `backgroundColor` for each\n * child. It is also important that each child have a `key` prop.\n *\n * Example:\n *\n * ```\n * render: function() {\n *   return (\n *     <PagerView\n *       style={styles.PagerView}\n *       initialPage={0}>\n *       <View style={styles.pageStyle} key=\"1\">\n *         <Text>First page</Text>\n *       </View>\n *       <View style={styles.pageStyle} key=\"2\">\n *         <Text>Second page</Text>\n *       </View>\n *     </PagerView>\n *   );\n * }\n *\n * ...\n *\n * var styles = {\n *   ...\n *   PagerView: {\n *     flex: 1\n *   },\n *   pageStyle: {\n *     alignItems: 'center',\n *     padding: 20,\n *   }\n * }\n * ```\n */\n\nexport class PagerView extends React.Component<PagerViewProps, { forwardedRef?: any }> {\n  private isScrolling = false;\n  private PagerView = React.createRef<typeof PagerViewViewManager>();\n\n  public getInnerViewNode = (): ReactElement => {\n    return this.PagerView.current!.getInnerViewNode();\n  };\n\n  private _onPageScroll = (e: PagerViewOnPageScrollEvent) => {\n    if (this.props.onPageScroll) {\n      this.props.onPageScroll(e);\n    }\n    // Not implemented on iOS yet\n    if (Platform.OS === 'android') {\n      if (this.props.keyboardDismissMode === 'on-drag') {\n        Keyboard.dismiss();\n      }\n    }\n  };\n\n  private _onPageScrollStateChanged = (\n    e: PageScrollStateChangedNativeEvent\n  ) => {\n    if (this.props.onPageScrollStateChanged) {\n      this.props.onPageScrollStateChanged(e);\n    }\n    this.isScrolling = e.nativeEvent.pageScrollState === 'dragging';\n  };\n\n  private _onPageSelected = (e: PagerViewOnPageSelectedEvent) => {\n    if (this.props.onPageSelected) {\n      this.props.onPageSelected(e);\n    }\n  };\n\n  /**\n   * A helper function to scroll to a specific page in the PagerView.\n   * The transition between pages will be animated.\n   */\n  public setPage = (selectedPage: number) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setPage,\n      [selectedPage]\n    );\n  };\n\n  /**\n   * A helper function to scroll to a specific page in the PagerView.\n   * The transition between pages will *not* be animated.\n   */\n  public setPageWithoutAnimation = (selectedPage: number) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setPageWithoutAnimation,\n      [selectedPage]\n    );\n  };\n\n  /**\n   * A helper function to enable/disable scroll imperatively\n   * The recommended way is using the scrollEnabled prop, however, there might be a case where a\n   * imperative solution is more useful (e.g. for not blocking an animation)\n   */\n  public setScrollEnabled = (scrollEnabled: boolean) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setScrollEnabled,\n      [scrollEnabled]\n    );\n  };\n\n  private _onMoveShouldSetResponderCapture = () => {\n    return this.isScrolling;\n  };\n\n  private get deducedLayoutDirection() {\n    const shouldUseDeviceRtlSetup =\n      !this.props.layoutDirection || this.props.layoutDirection === 'locale';\n\n    if (shouldUseDeviceRtlSetup) {\n      return I18nManager.isRTL ? 'rtl' : 'ltr';\n    } else {\n      return this.props.layoutDirection;\n    }\n  }\n\n  render() {\n    const { children, forwardedRef, ...rest } = this.props;\n\n    return (\n      <PagerViewViewManager\n        {...rest}\n        // ref={this.PagerView as any /** TODO: Fix ref type */}\n        style={this.props.style}\n        layoutDirection={this.deducedLayoutDirection}\n        onPageScroll={this._onPageScroll}\n        onPageScrollStateChanged={this._onPageScrollStateChanged}\n        onPageSelected={this._onPageSelected}\n        onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}\n        children={childrenWithOverriddenStyle(children)}\n      />\n    );\n  }\n}\n"]}
+\ No newline at end of file
+diff --git a/node_modules/react-native-pager-view/lib/module/PagerView.js b/node_modules/react-native-pager-view/lib/module/PagerView.js
+index dc1ddc5..f95b242 100644
+--- a/node_modules/react-native-pager-view/lib/module/PagerView.js
++++ b/node_modules/react-native-pager-view/lib/module/PagerView.js
+@@ -116,17 +116,20 @@ export class PagerView extends React.Component {
+   }
+ 
+   render() {
+-    return /*#__PURE__*/React.createElement(PagerViewViewManager, _extends({}, this.props, {
+-      ref: this.PagerView
+-      /** TODO: Fix ref type */
+-      ,
++    const {
++      children,
++      forwardedRef,
++      ...rest
++    } = this.props;
++    return /*#__PURE__*/React.createElement(PagerViewViewManager, _extends({}, rest, {
++      // ref={this.PagerView as any /** TODO: Fix ref type */}
+       style: this.props.style,
+       layoutDirection: this.deducedLayoutDirection,
+       onPageScroll: this._onPageScroll,
+       onPageScrollStateChanged: this._onPageScrollStateChanged,
+       onPageSelected: this._onPageSelected,
+       onMoveShouldSetResponderCapture: this._onMoveShouldSetResponderCapture,
+-      children: childrenWithOverriddenStyle(this.props.children)
++      children: childrenWithOverriddenStyle(children)
+     }));
+   }
+ 
+diff --git a/node_modules/react-native-pager-view/lib/module/PagerView.js.map b/node_modules/react-native-pager-view/lib/module/PagerView.js.map
+index 6c26c01..ea08ccc 100644
+--- a/node_modules/react-native-pager-view/lib/module/PagerView.js.map
++++ b/node_modules/react-native-pager-view/lib/module/PagerView.js.map
+@@ -1 +1 @@
+-{"version":3,"sources":["PagerView.tsx"],"names":["React","Platform","UIManager","Keyboard","ReactNative","I18nManager","childrenWithOverriddenStyle","getViewManagerConfig","PagerViewViewManager","PagerView","Component","createRef","current","getInnerViewNode","e","props","onPageScroll","OS","keyboardDismissMode","dismiss","onPageScrollStateChanged","isScrolling","nativeEvent","pageScrollState","onPageSelected","selectedPage","dispatchViewManagerCommand","findNodeHandle","Commands","setPage","setPageWithoutAnimation","scrollEnabled","setScrollEnabled","deducedLayoutDirection","shouldUseDeviceRtlSetup","layoutDirection","isRTL","render","style","_onPageScroll","_onPageScrollStateChanged","_onPageSelected","_onMoveShouldSetResponderCapture","children"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAoC,OAApC;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,QAA9B,QAA8C,cAA9C;AACA,OAAOC,WAAP,IAAsBC,WAAtB,QAAyC,cAAzC;AAQA,SAASC,2BAAT,QAA4C,SAA5C;AACA,SAASC,oBAAT,EAA+BC,oBAA/B,QAA2D,mBAA3D;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMC,SAAN,SAAwBT,KAAK,CAACU,SAA9B,CAAwD;AAAA;AAAA;;AAAA,yCACvC,KADuC;;AAAA,oDAEzCV,KAAK,CAACW,SAAN,EAFyC;;AAAA,8CAInC,MAAoB;AAC5C,aAAO,KAAKF,SAAL,CAAeG,OAAf,CAAwBC,gBAAxB,EAAP;AACD,KAN4D;;AAAA,2CAQpCC,CAAD,IAAmC;AACzD,UAAI,KAAKC,KAAL,CAAWC,YAAf,EAA6B;AAC3B,aAAKD,KAAL,CAAWC,YAAX,CAAwBF,CAAxB;AACD,OAHwD,CAIzD;;;AACA,UAAIb,QAAQ,CAACgB,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAI,KAAKF,KAAL,CAAWG,mBAAX,KAAmC,SAAvC,EAAkD;AAChDf,UAAAA,QAAQ,CAACgB,OAAT;AACD;AACF;AACF,KAlB4D;;AAAA,uDAqB3DL,CADkC,IAE/B;AACH,UAAI,KAAKC,KAAL,CAAWK,wBAAf,EAAyC;AACvC,aAAKL,KAAL,CAAWK,wBAAX,CAAoCN,CAApC;AACD;;AACD,WAAKO,WAAL,GAAmBP,CAAC,CAACQ,WAAF,CAAcC,eAAd,KAAkC,UAArD;AACD,KA3B4D;;AAAA,6CA6BlCT,CAAD,IAAqC;AAC7D,UAAI,KAAKC,KAAL,CAAWS,cAAf,EAA+B;AAC7B,aAAKT,KAAL,CAAWS,cAAX,CAA0BV,CAA1B;AACD;AACF,KAjC4D;;AAAA,qCAuC3CW,YAAD,IAA0B;AACzCvB,MAAAA,SAAS,CAACwB,0BAAV,CACEtB,WAAW,CAACuB,cAAZ,CAA2B,IAA3B,CADF,EAEEpB,oBAAoB,GAAGqB,QAAvB,CAAgCC,OAFlC,EAGE,CAACJ,YAAD,CAHF;AAKD,KA7C4D;;AAAA,qDAmD3BA,YAAD,IAA0B;AACzDvB,MAAAA,SAAS,CAACwB,0BAAV,CACEtB,WAAW,CAACuB,cAAZ,CAA2B,IAA3B,CADF,EAEEpB,oBAAoB,GAAGqB,QAAvB,CAAgCE,uBAFlC,EAGE,CAACL,YAAD,CAHF;AAKD,KAzD4D;;AAAA,8CAgElCM,aAAD,IAA4B;AACpD7B,MAAAA,SAAS,CAACwB,0BAAV,CACEtB,WAAW,CAACuB,cAAZ,CAA2B,IAA3B,CADF,EAEEpB,oBAAoB,GAAGqB,QAAvB,CAAgCI,gBAFlC,EAGE,CAACD,aAAD,CAHF;AAKD,KAtE4D;;AAAA,8DAwElB,MAAM;AAC/C,aAAO,KAAKV,WAAZ;AACD,KA1E4D;AAAA;;AA4E3B,MAAtBY,sBAAsB,GAAG;AACnC,UAAMC,uBAAuB,GAC3B,CAAC,KAAKnB,KAAL,CAAWoB,eAAZ,IAA+B,KAAKpB,KAAL,CAAWoB,eAAX,KAA+B,QADhE;;AAGA,QAAID,uBAAJ,EAA6B;AAC3B,aAAO7B,WAAW,CAAC+B,KAAZ,GAAoB,KAApB,GAA4B,KAAnC;AACD,KAFD,MAEO;AACL,aAAO,KAAKrB,KAAL,CAAWoB,eAAlB;AACD;AACF;;AAEDE,EAAAA,MAAM,GAAG;AACP,wBACE,oBAAC,oBAAD,eACM,KAAKtB,KADX;AAEE,MAAA,GAAG,EAAE,KAAKN;AAAiB;AAF7B;AAGE,MAAA,KAAK,EAAE,KAAKM,KAAL,CAAWuB,KAHpB;AAIE,MAAA,eAAe,EAAE,KAAKL,sBAJxB;AAKE,MAAA,YAAY,EAAE,KAAKM,aALrB;AAME,MAAA,wBAAwB,EAAE,KAAKC,yBANjC;AAOE,MAAA,cAAc,EAAE,KAAKC,eAPvB;AAQE,MAAA,+BAA+B,EAAE,KAAKC,gCARxC;AASE,MAAA,QAAQ,EAAEpC,2BAA2B,CAAC,KAAKS,KAAL,CAAW4B,QAAZ;AATvC,OADF;AAaD;;AArG4D","sourcesContent":["import React, { ReactElement } from 'react';\nimport { Platform, UIManager, Keyboard } from 'react-native';\nimport ReactNative, { I18nManager } from 'react-native';\nimport type {\n  PagerViewOnPageScrollEvent,\n  PagerViewOnPageSelectedEvent,\n  PageScrollStateChangedNativeEvent,\n  PagerViewProps,\n} from './types';\n\nimport { childrenWithOverriddenStyle } from './utils';\nimport { getViewManagerConfig, PagerViewViewManager } from './PagerViewNative';\n\n/**\n * Container that allows to flip left and right between child views. Each\n * child view of the `PagerView` will be treated as a separate page\n * and will be stretched to fill the `PagerView`.\n *\n * It is important all children are `<View>`s and not composite components.\n * You can set style properties like `padding` or `backgroundColor` for each\n * child. It is also important that each child have a `key` prop.\n *\n * Example:\n *\n * ```\n * render: function() {\n *   return (\n *     <PagerView\n *       style={styles.PagerView}\n *       initialPage={0}>\n *       <View style={styles.pageStyle} key=\"1\">\n *         <Text>First page</Text>\n *       </View>\n *       <View style={styles.pageStyle} key=\"2\">\n *         <Text>Second page</Text>\n *       </View>\n *     </PagerView>\n *   );\n * }\n *\n * ...\n *\n * var styles = {\n *   ...\n *   PagerView: {\n *     flex: 1\n *   },\n *   pageStyle: {\n *     alignItems: 'center',\n *     padding: 20,\n *   }\n * }\n * ```\n */\n\nexport class PagerView extends React.Component<PagerViewProps> {\n  private isScrolling = false;\n  private PagerView = React.createRef<typeof PagerViewViewManager>();\n\n  public getInnerViewNode = (): ReactElement => {\n    return this.PagerView.current!.getInnerViewNode();\n  };\n\n  private _onPageScroll = (e: PagerViewOnPageScrollEvent) => {\n    if (this.props.onPageScroll) {\n      this.props.onPageScroll(e);\n    }\n    // Not implemented on iOS yet\n    if (Platform.OS === 'android') {\n      if (this.props.keyboardDismissMode === 'on-drag') {\n        Keyboard.dismiss();\n      }\n    }\n  };\n\n  private _onPageScrollStateChanged = (\n    e: PageScrollStateChangedNativeEvent\n  ) => {\n    if (this.props.onPageScrollStateChanged) {\n      this.props.onPageScrollStateChanged(e);\n    }\n    this.isScrolling = e.nativeEvent.pageScrollState === 'dragging';\n  };\n\n  private _onPageSelected = (e: PagerViewOnPageSelectedEvent) => {\n    if (this.props.onPageSelected) {\n      this.props.onPageSelected(e);\n    }\n  };\n\n  /**\n   * A helper function to scroll to a specific page in the PagerView.\n   * The transition between pages will be animated.\n   */\n  public setPage = (selectedPage: number) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setPage,\n      [selectedPage]\n    );\n  };\n\n  /**\n   * A helper function to scroll to a specific page in the PagerView.\n   * The transition between pages will *not* be animated.\n   */\n  public setPageWithoutAnimation = (selectedPage: number) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setPageWithoutAnimation,\n      [selectedPage]\n    );\n  };\n\n  /**\n   * A helper function to enable/disable scroll imperatively\n   * The recommended way is using the scrollEnabled prop, however, there might be a case where a\n   * imperative solution is more useful (e.g. for not blocking an animation)\n   */\n  public setScrollEnabled = (scrollEnabled: boolean) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setScrollEnabled,\n      [scrollEnabled]\n    );\n  };\n\n  private _onMoveShouldSetResponderCapture = () => {\n    return this.isScrolling;\n  };\n\n  private get deducedLayoutDirection() {\n    const shouldUseDeviceRtlSetup =\n      !this.props.layoutDirection || this.props.layoutDirection === 'locale';\n\n    if (shouldUseDeviceRtlSetup) {\n      return I18nManager.isRTL ? 'rtl' : 'ltr';\n    } else {\n      return this.props.layoutDirection;\n    }\n  }\n\n  render() {\n    return (\n      <PagerViewViewManager\n        {...this.props}\n        ref={this.PagerView as any /** TODO: Fix ref type */}\n        style={this.props.style}\n        layoutDirection={this.deducedLayoutDirection}\n        onPageScroll={this._onPageScroll}\n        onPageScrollStateChanged={this._onPageScrollStateChanged}\n        onPageSelected={this._onPageSelected}\n        onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}\n        children={childrenWithOverriddenStyle(this.props.children)}\n      />\n    );\n  }\n}\n"]}
+\ No newline at end of file
++{"version":3,"sources":["PagerView.tsx"],"names":["React","Platform","UIManager","Keyboard","ReactNative","I18nManager","childrenWithOverriddenStyle","getViewManagerConfig","PagerViewViewManager","PagerView","Component","createRef","current","getInnerViewNode","e","props","onPageScroll","OS","keyboardDismissMode","dismiss","onPageScrollStateChanged","isScrolling","nativeEvent","pageScrollState","onPageSelected","selectedPage","dispatchViewManagerCommand","findNodeHandle","Commands","setPage","setPageWithoutAnimation","scrollEnabled","setScrollEnabled","deducedLayoutDirection","shouldUseDeviceRtlSetup","layoutDirection","isRTL","render","children","forwardedRef","rest","style","_onPageScroll","_onPageScrollStateChanged","_onPageSelected","_onMoveShouldSetResponderCapture"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAoC,OAApC;AACA,SAASC,QAAT,EAAmBC,SAAnB,EAA8BC,QAA9B,QAA8C,cAA9C;AACA,OAAOC,WAAP,IAAsBC,WAAtB,QAAyC,cAAzC;AAQA,SAASC,2BAAT,QAA4C,SAA5C;AACA,SAASC,oBAAT,EAA+BC,oBAA/B,QAA2D,mBAA3D;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMC,SAAN,SAAwBT,KAAK,CAACU,SAA9B,CAAgF;AAAA;AAAA;;AAAA,yCAC/D,KAD+D;;AAAA,oDAEjEV,KAAK,CAACW,SAAN,EAFiE;;AAAA,8CAI3D,MAAoB;AAC5C,aAAO,KAAKF,SAAL,CAAeG,OAAf,CAAwBC,gBAAxB,EAAP;AACD,KANoF;;AAAA,2CAQ5DC,CAAD,IAAmC;AACzD,UAAI,KAAKC,KAAL,CAAWC,YAAf,EAA6B;AAC3B,aAAKD,KAAL,CAAWC,YAAX,CAAwBF,CAAxB;AACD,OAHwD,CAIzD;;;AACA,UAAIb,QAAQ,CAACgB,EAAT,KAAgB,SAApB,EAA+B;AAC7B,YAAI,KAAKF,KAAL,CAAWG,mBAAX,KAAmC,SAAvC,EAAkD;AAChDf,UAAAA,QAAQ,CAACgB,OAAT;AACD;AACF;AACF,KAlBoF;;AAAA,uDAqBnFL,CADkC,IAE/B;AACH,UAAI,KAAKC,KAAL,CAAWK,wBAAf,EAAyC;AACvC,aAAKL,KAAL,CAAWK,wBAAX,CAAoCN,CAApC;AACD;;AACD,WAAKO,WAAL,GAAmBP,CAAC,CAACQ,WAAF,CAAcC,eAAd,KAAkC,UAArD;AACD,KA3BoF;;AAAA,6CA6B1DT,CAAD,IAAqC;AAC7D,UAAI,KAAKC,KAAL,CAAWS,cAAf,EAA+B;AAC7B,aAAKT,KAAL,CAAWS,cAAX,CAA0BV,CAA1B;AACD;AACF,KAjCoF;;AAAA,qCAuCnEW,YAAD,IAA0B;AACzCvB,MAAAA,SAAS,CAACwB,0BAAV,CACEtB,WAAW,CAACuB,cAAZ,CAA2B,IAA3B,CADF,EAEEpB,oBAAoB,GAAGqB,QAAvB,CAAgCC,OAFlC,EAGE,CAACJ,YAAD,CAHF;AAKD,KA7CoF;;AAAA,qDAmDnDA,YAAD,IAA0B;AACzDvB,MAAAA,SAAS,CAACwB,0BAAV,CACEtB,WAAW,CAACuB,cAAZ,CAA2B,IAA3B,CADF,EAEEpB,oBAAoB,GAAGqB,QAAvB,CAAgCE,uBAFlC,EAGE,CAACL,YAAD,CAHF;AAKD,KAzDoF;;AAAA,8CAgE1DM,aAAD,IAA4B;AACpD7B,MAAAA,SAAS,CAACwB,0BAAV,CACEtB,WAAW,CAACuB,cAAZ,CAA2B,IAA3B,CADF,EAEEpB,oBAAoB,GAAGqB,QAAvB,CAAgCI,gBAFlC,EAGE,CAACD,aAAD,CAHF;AAKD,KAtEoF;;AAAA,8DAwE1C,MAAM;AAC/C,aAAO,KAAKV,WAAZ;AACD,KA1EoF;AAAA;;AA4EnD,MAAtBY,sBAAsB,GAAG;AACnC,UAAMC,uBAAuB,GAC3B,CAAC,KAAKnB,KAAL,CAAWoB,eAAZ,IAA+B,KAAKpB,KAAL,CAAWoB,eAAX,KAA+B,QADhE;;AAGA,QAAID,uBAAJ,EAA6B;AAC3B,aAAO7B,WAAW,CAAC+B,KAAZ,GAAoB,KAApB,GAA4B,KAAnC;AACD,KAFD,MAEO;AACL,aAAO,KAAKrB,KAAL,CAAWoB,eAAlB;AACD;AACF;;AAEDE,EAAAA,MAAM,GAAG;AACP,UAAM;AAAEC,MAAAA,QAAF;AAAYC,MAAAA,YAAZ;AAA0B,SAAGC;AAA7B,QAAsC,KAAKzB,KAAjD;AAEA,wBACE,oBAAC,oBAAD,eACMyB,IADN;AAEE;AACA,MAAA,KAAK,EAAE,KAAKzB,KAAL,CAAW0B,KAHpB;AAIE,MAAA,eAAe,EAAE,KAAKR,sBAJxB;AAKE,MAAA,YAAY,EAAE,KAAKS,aALrB;AAME,MAAA,wBAAwB,EAAE,KAAKC,yBANjC;AAOE,MAAA,cAAc,EAAE,KAAKC,eAPvB;AAQE,MAAA,+BAA+B,EAAE,KAAKC,gCARxC;AASE,MAAA,QAAQ,EAAEvC,2BAA2B,CAACgC,QAAD;AATvC,OADF;AAaD;;AAvGoF","sourcesContent":["import React, { ReactElement } from 'react';\nimport { Platform, UIManager, Keyboard } from 'react-native';\nimport ReactNative, { I18nManager } from 'react-native';\nimport type {\n  PagerViewOnPageScrollEvent,\n  PagerViewOnPageSelectedEvent,\n  PageScrollStateChangedNativeEvent,\n  PagerViewProps,\n} from './types';\n\nimport { childrenWithOverriddenStyle } from './utils';\nimport { getViewManagerConfig, PagerViewViewManager } from './PagerViewNative';\n\n/**\n * Container that allows to flip left and right between child views. Each\n * child view of the `PagerView` will be treated as a separate page\n * and will be stretched to fill the `PagerView`.\n *\n * It is important all children are `<View>`s and not composite components.\n * You can set style properties like `padding` or `backgroundColor` for each\n * child. It is also important that each child have a `key` prop.\n *\n * Example:\n *\n * ```\n * render: function() {\n *   return (\n *     <PagerView\n *       style={styles.PagerView}\n *       initialPage={0}>\n *       <View style={styles.pageStyle} key=\"1\">\n *         <Text>First page</Text>\n *       </View>\n *       <View style={styles.pageStyle} key=\"2\">\n *         <Text>Second page</Text>\n *       </View>\n *     </PagerView>\n *   );\n * }\n *\n * ...\n *\n * var styles = {\n *   ...\n *   PagerView: {\n *     flex: 1\n *   },\n *   pageStyle: {\n *     alignItems: 'center',\n *     padding: 20,\n *   }\n * }\n * ```\n */\n\nexport class PagerView extends React.Component<PagerViewProps, { forwardedRef?: any }> {\n  private isScrolling = false;\n  private PagerView = React.createRef<typeof PagerViewViewManager>();\n\n  public getInnerViewNode = (): ReactElement => {\n    return this.PagerView.current!.getInnerViewNode();\n  };\n\n  private _onPageScroll = (e: PagerViewOnPageScrollEvent) => {\n    if (this.props.onPageScroll) {\n      this.props.onPageScroll(e);\n    }\n    // Not implemented on iOS yet\n    if (Platform.OS === 'android') {\n      if (this.props.keyboardDismissMode === 'on-drag') {\n        Keyboard.dismiss();\n      }\n    }\n  };\n\n  private _onPageScrollStateChanged = (\n    e: PageScrollStateChangedNativeEvent\n  ) => {\n    if (this.props.onPageScrollStateChanged) {\n      this.props.onPageScrollStateChanged(e);\n    }\n    this.isScrolling = e.nativeEvent.pageScrollState === 'dragging';\n  };\n\n  private _onPageSelected = (e: PagerViewOnPageSelectedEvent) => {\n    if (this.props.onPageSelected) {\n      this.props.onPageSelected(e);\n    }\n  };\n\n  /**\n   * A helper function to scroll to a specific page in the PagerView.\n   * The transition between pages will be animated.\n   */\n  public setPage = (selectedPage: number) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setPage,\n      [selectedPage]\n    );\n  };\n\n  /**\n   * A helper function to scroll to a specific page in the PagerView.\n   * The transition between pages will *not* be animated.\n   */\n  public setPageWithoutAnimation = (selectedPage: number) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setPageWithoutAnimation,\n      [selectedPage]\n    );\n  };\n\n  /**\n   * A helper function to enable/disable scroll imperatively\n   * The recommended way is using the scrollEnabled prop, however, there might be a case where a\n   * imperative solution is more useful (e.g. for not blocking an animation)\n   */\n  public setScrollEnabled = (scrollEnabled: boolean) => {\n    UIManager.dispatchViewManagerCommand(\n      ReactNative.findNodeHandle(this),\n      getViewManagerConfig().Commands.setScrollEnabled,\n      [scrollEnabled]\n    );\n  };\n\n  private _onMoveShouldSetResponderCapture = () => {\n    return this.isScrolling;\n  };\n\n  private get deducedLayoutDirection() {\n    const shouldUseDeviceRtlSetup =\n      !this.props.layoutDirection || this.props.layoutDirection === 'locale';\n\n    if (shouldUseDeviceRtlSetup) {\n      return I18nManager.isRTL ? 'rtl' : 'ltr';\n    } else {\n      return this.props.layoutDirection;\n    }\n  }\n\n  render() {\n    const { children, forwardedRef, ...rest } = this.props;\n\n    return (\n      <PagerViewViewManager\n        {...rest}\n        // ref={this.PagerView as any /** TODO: Fix ref type */}\n        style={this.props.style}\n        layoutDirection={this.deducedLayoutDirection}\n        onPageScroll={this._onPageScroll}\n        onPageScrollStateChanged={this._onPageScrollStateChanged}\n        onPageSelected={this._onPageSelected}\n        onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}\n        children={childrenWithOverriddenStyle(children)}\n      />\n    );\n  }\n}\n"]}
+\ No newline at end of file
+diff --git a/node_modules/react-native-pager-view/lib/typescript/PagerView.d.ts b/node_modules/react-native-pager-view/lib/typescript/PagerView.d.ts
+index f70d3bc..5610963 100644
+--- a/node_modules/react-native-pager-view/lib/typescript/PagerView.d.ts
++++ b/node_modules/react-native-pager-view/lib/typescript/PagerView.d.ts
+@@ -41,7 +41,9 @@ import type { PagerViewProps } from './types';
+  * }
+  * ```
+  */
+-export declare class PagerView extends React.Component<PagerViewProps> {
++export declare class PagerView extends React.Component<PagerViewProps, {
++    forwardedRef?: any;
++}> {
+     private isScrolling;
+     private PagerView;
+     getInnerViewNode: () => ReactElement;
+diff --git a/node_modules/react-native-pager-view/lib/typescript/__tests__/index.test.d.ts b/node_modules/react-native-pager-view/lib/typescript/__tests__/index.test.d.ts
+new file mode 100644
+index 0000000..e69de29
+diff --git a/node_modules/react-native-pager-view/src/PagerView.tsx b/node_modules/react-native-pager-view/src/PagerView.tsx
+index f7585d5..ee9843b 100644
+--- a/node_modules/react-native-pager-view/src/PagerView.tsx
++++ b/node_modules/react-native-pager-view/src/PagerView.tsx
+@@ -141,17 +141,19 @@ export class PagerView extends React.Component<PagerViewProps> {
+   }
+ 
+   render() {
++    const {children, forwardedRef, ...rest} = this.props;
++    
+     return (
+       <PagerViewViewManager
+-        {...this.props}
+-        ref={this.PagerView as any /** TODO: Fix ref type */}
++        {...rest}
++        // ref={this.PagerView as any /** TODO: Fix ref type */}
+         style={this.props.style}
+         layoutDirection={this.deducedLayoutDirection}
+         onPageScroll={this._onPageScroll}
+         onPageScrollStateChanged={this._onPageScrollStateChanged}
+         onPageSelected={this._onPageSelected}
+         onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}
+-        children={childrenWithOverriddenStyle(this.props.children)}
++        children={childrenWithOverriddenStyle(children)}
+       />
+     );
+   }
\ No newline at end of file
diff --git a/src/lib/download.ts b/src/lib/download.ts
index 96d93fc27..c53d809b1 100644
--- a/src/lib/download.ts
+++ b/src/lib/download.ts
@@ -1,7 +1,7 @@
 import RNFetchBlob from 'rn-fetch-blob'
 import ImageResizer from '@bam.tech/react-native-image-resizer'
 
-interface DownloadAndResizeOpts {
+export interface DownloadAndResizeOpts {
   uri: string
   width: number
   height: number
diff --git a/src/lib/strings.ts b/src/lib/strings.ts
index c665c0b07..b13ac39e5 100644
--- a/src/lib/strings.ts
+++ b/src/lib/strings.ts
@@ -23,7 +23,7 @@ export function makeRecordUri(
   collection: string,
   rkey: string,
 ) {
-  const urip = new AtUri(`at://host/`)
+  const urip = new AtUri('at://host/')
   urip.host = didOrName
   urip.collection = collection
   urip.rkey = rkey
@@ -63,7 +63,9 @@ export function ago(date: number | string | Date): string {
 export function isValidDomain(str: string): boolean {
   return !!TLDs.find(tld => {
     let i = str.lastIndexOf(tld)
-    if (i === -1) return false
+    if (i === -1) {
+      return false
+    }
     return str.charAt(i - 1) === '.' && i === str.length - tld.length
   })
 }
diff --git a/src/view/shell/mobile/TabsSelector.tsx b/src/view/shell/mobile/TabsSelector.tsx
index d44a8e0c6..41b18a337 100644
--- a/src/view/shell/mobile/TabsSelector.tsx
+++ b/src/view/shell/mobile/TabsSelector.tsx
@@ -175,7 +175,10 @@ export const TabsSelector = observer(
                         isClosing ? closingTabAnimStyle : undefined,
                       ]}>
                       <Animated.View
-                        ref={tabRefs[tabIndex]}
+                        // HOTFIX
+                        // TabsSelector.test.tsx snapshot fails if the
+                        // ref was set like this: ref={tabRefs[tabIndex]}
+                        ref={(ref: any) => (tabRefs[tabIndex] = ref)}
                         style={[
                           styles.tab,
                           styles.existing,
diff --git a/yarn.lock b/yarn.lock
index 708aa54c6..51e8861b2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1683,6 +1683,13 @@
   dependencies:
     "@sinclair/typebox" "^0.24.1"
 
+"@jest/schemas@^29.0.0":
+  version "29.0.0"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.0.0.tgz#5f47f5994dd4ef067fb7b4188ceac45f77fe952a"
+  integrity sha512-3Ab5HgYIIAnS0HjqJHQYZS+zXc4tUmTmBH3z83ajI6afXp8X3ZtdLX+nXx+I7LNkJD7uN9LAVhgnjDgZa2z0kA==
+  dependencies:
+    "@sinclair/typebox" "^0.24.1"
+
 "@jest/source-map@^26.6.2":
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
@@ -2347,6 +2354,24 @@
     "@svgr/plugin-svgo" "^5.5.0"
     loader-utils "^2.0.0"
 
+"@testing-library/jest-native@^5.3.3":
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-5.3.3.tgz#8f7c97504d1373d20ded0704586e110a26f9ba1a"
+  integrity sha512-oakP6c4xHR5PyLbw6H6NiUxvTZmsIHNjQRMsI6P3aSLhDSBvzRQ3+KdEwhlhiU2oNMWW45XQakKZN3cf2BG5Dw==
+  dependencies:
+    chalk "^4.1.2"
+    jest-diff "^29.0.1"
+    jest-matcher-utils "^29.0.1"
+    pretty-format "^29.0.3"
+    redent "^3.0.0"
+
+"@testing-library/react-native@^11.5.0":
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-11.5.0.tgz#b043c5db7b15eca42a65e95d3f3ae196fab9493b"
+  integrity sha512-seV+qebsbX4E5CWk/wizU1+2wVLsPyqEzG7sTgrhJ81cgAawg7ay06fIZR9IS75pDeWn2KZVd4mGk1pjJ3i3Zw==
+  dependencies:
+    pretty-format "^29.0.0"
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -2993,6 +3018,11 @@
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
+"@yarnpkg/lockfile@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz#e77a97fbd345b76d83245edcd17d393b1b41fb31"
+  integrity sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==
+
 "@zxing/text-encoding@^0.9.0":
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/@zxing/text-encoding/-/text-encoding-0.9.0.tgz#fb50ffabc6c7c66a0c96b4c03e3d9be74864b70b"
@@ -4348,7 +4378,7 @@ cross-fetch@^3.1.5:
   dependencies:
     node-fetch "2.6.7"
 
-cross-spawn@^6.0.0:
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -4787,6 +4817,11 @@ diff-sequences@^27.5.1:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
   integrity sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==
 
+diff-sequences@^29.3.1:
+  version "29.3.1"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.3.1.tgz#104b5b95fe725932421a9c6e5b4bef84c3f2249e"
+  integrity sha512-hlM3QR272NXCi4pq+N4Kok4kOp6EsgOM3ZSpJI7Da3UAs+Ttsi8MRmB6trM/lhyzUxGfOgnpkHtgqm5Q/CTcfQ==
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -5873,6 +5908,13 @@ find-up@^5.0.0:
     locate-path "^6.0.0"
     path-exists "^4.0.0"
 
+find-yarn-workspace-root@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz#f47fb8d239c900eb78179aa81b66673eac88f7bd"
+  integrity sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==
+  dependencies:
+    micromatch "^4.0.2"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -5974,6 +6016,15 @@ fs-extra@^10.0.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
+fs-extra@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
+  integrity sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==
+  dependencies:
+    graceful-fs "^4.1.2"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs-extra@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
@@ -6566,6 +6617,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
+
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -6917,7 +6973,7 @@ is-wsl@^1.1.0:
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
   integrity sha512-gfygJYZ2gLTDlmbWMI0CE2MwnFzSN/2SZfkMlItC4K/JBlsWVDB0bO6XhqcY13YXE7iMcAJnzTCJjPiTeJJ0Mw==
 
-is-wsl@^2.2.0:
+is-wsl@^2.1.1, is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
   integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
@@ -7162,6 +7218,16 @@ jest-diff@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
+jest-diff@^29.0.1, jest-diff@^29.3.1:
+  version "29.3.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-29.3.1.tgz#d8215b72fed8f1e647aed2cae6c752a89e757527"
+  integrity sha512-vU8vyiO7568tmin2lA3r2DP8oRvzhvRcD4DjpXc6uGveQodyk7CKLhQlCSiwgx3g0pFaE88/KLZ0yaTWMc4Uiw==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^29.3.1"
+    jest-get-type "^29.2.0"
+    pretty-format "^29.3.1"
+
 jest-docblock@^26.0.0:
   version "26.0.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@@ -7258,6 +7324,11 @@ jest-get-type@^27.5.1:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.5.1.tgz#3cd613c507b0f7ace013df407a1c1cd578bcb4f1"
   integrity sha512-2KY95ksYSaK7DMBWQn6dQz3kqAf3BB64y2udeG+hv4KfSOb9qwcYQstTJc1KCbsix+wLZWZYN8t7nwX3GOBLRw==
 
+jest-get-type@^29.2.0:
+  version "29.2.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-29.2.0.tgz#726646f927ef61d583a3b3adb1ab13f3a5036408"
+  integrity sha512-uXNJlg8hKFEnDgFsrCjznB+sTxdkuqiCL6zMgA75qEbAJjJYTs9XPrvDctrEig2GDow22T/LvHgO57iJhXB/UA==
+
 jest-haste-map@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@@ -7382,6 +7453,16 @@ jest-matcher-utils@^27.5.1:
     jest-get-type "^27.5.1"
     pretty-format "^27.5.1"
 
+jest-matcher-utils@^29.0.1:
+  version "29.3.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-29.3.1.tgz#6e7f53512f80e817dfa148672bd2d5d04914a572"
+  integrity sha512-fkRMZUAScup3txIKfMe3AIZZmPEjWEdsPJFK3AIy5qRohWqQFg1qrmKfYXR9qEkNc7OdAu2N4KPHibEmy4HPeQ==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^29.3.1"
+    jest-get-type "^29.2.0"
+    pretty-format "^29.3.1"
+
 jest-message-util@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
@@ -8065,6 +8146,13 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
+klaw-sync@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/klaw-sync/-/klaw-sync-6.0.0.tgz#1fd2cfd56ebb6250181114f0a581167099c2b28c"
+  integrity sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+
 klaw@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/klaw/-/klaw-1.3.1.tgz#4088433b46b3b1ba259d78785d8e96f73ba02439"
@@ -8671,6 +8759,11 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+min-indent@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
+
 mini-css-extract-plugin@^2.4.5:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.6.1.tgz#9a1251d15f2035c342d99a468ab9da7a0451b71e"
@@ -9088,6 +9181,14 @@ open@^6.2.0:
   dependencies:
     is-wsl "^1.1.0"
 
+open@^7.4.2:
+  version "7.4.2"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.4.2.tgz#b8147e26dcf3e426316c730089fd71edd29c2321"
+  integrity sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 open@^8.0.9, open@^8.4.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
@@ -9153,7 +9254,7 @@ ora@^5.4.1:
     strip-ansi "^6.0.0"
     wcwidth "^1.0.1"
 
-os-tmpdir@^1.0.0:
+os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
   integrity sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==
@@ -9272,6 +9373,26 @@ pascalcase@^0.1.1:
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
   integrity sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==
 
+patch-package@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-6.5.0.tgz#feb058db56f0005da59cfa316488321de585e88a"
+  integrity sha512-tC3EqJmo74yKqfsMzELaFwxOAu6FH6t+FzFOsnWAuARm7/n2xB5AOeOueE221eM9gtMuIKMKpF9tBy/X2mNP0Q==
+  dependencies:
+    "@yarnpkg/lockfile" "^1.1.0"
+    chalk "^4.1.2"
+    cross-spawn "^6.0.5"
+    find-yarn-workspace-root "^2.0.0"
+    fs-extra "^7.0.1"
+    is-ci "^2.0.0"
+    klaw-sync "^6.0.0"
+    minimist "^1.2.6"
+    open "^7.4.2"
+    rimraf "^2.6.3"
+    semver "^5.6.0"
+    slash "^2.0.0"
+    tmp "^0.0.33"
+    yaml "^1.10.2"
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -9997,6 +10118,15 @@ pretty-format@^28.1.3:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+pretty-format@^29.0.0, pretty-format@^29.0.3, pretty-format@^29.3.1:
+  version "29.3.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.3.1.tgz#1841cac822b02b4da8971dacb03e8a871b4722da"
+  integrity sha512-FyLnmb1cYJV8biEIiRyzRFvs2lry7PPIvOqKVe1GCUEYg4YGmlx1qG9EJNMxArYm7piII4qb8UV1Pncq5dxmcg==
+  dependencies:
+    "@jest/schemas" "^29.0.0"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -10581,6 +10711,14 @@ recursive-readdir@^2.2.2:
   dependencies:
     minimatch "3.0.4"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -10799,7 +10937,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@^2.5.4:
+rimraf@^2.5.4, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
@@ -11174,6 +11312,11 @@ sisteransi@^1.0.5:
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
   integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
 
+slash@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+  integrity sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
@@ -11555,6 +11698,13 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
@@ -11804,6 +11954,13 @@ tlds@^1.234.0:
   resolved "https://registry.yarnpkg.com/tlds/-/tlds-1.234.0.tgz#f61fe73f6e85c51f8503181f47dcfbd18c6910db"
   integrity sha512-TNDfeyDIC+oroH44bMbWC+Jn/2qNrfRvDK2EXt1icOXYG5NMqoRyUosADrukfb4D8lJ3S1waaBWSvQro0erdng==
 
+tmp@^0.0.33:
+  version "0.0.33"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
+  integrity sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==
+  dependencies:
+    os-tmpdir "~1.0.2"
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"