using register

ios/app.xcodeproj/xcshareddata/xcschemes/app.xcscheme

@@ -41,7 +41,7 @@
       </Testables>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Debug"
+      buildConfiguration = "Release"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
       selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"

src/view/screens/Contacts/Contacts.tsx

@@ -1,14 +1,14 @@
 import React, {useEffect, useState, useRef} from 'react'
 import {StyleSheet, Text, TextInput, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
+import {ProfileFollows as ProfileFollowsComponent} from '../../com/profile/ProfileFollows'
-import {Selector} from '../com/util/Selector'
+import {Selector} from '../../com/util/Selector'
-import {colors} from '../lib/styles'
+import {colors} from '../../lib/styles'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {useAnimatedValue} from '../lib/useAnimatedValue'
+import {useAnimatedValue} from '../../lib/useAnimatedValue'
 
-export const Contacts = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const selectorInterp = useAnimatedValue(0)
 

src/view/screens/Contacts/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Contacts = register({
+  loader: () => import('./Contacts'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/Home/Home.tsx

@@ -3,16 +3,16 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import useAppState from 'react-native-appstate-hook'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {Feed} from '../com/posts/Feed'
+import {Feed} from '../../com/posts/Feed'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {FeedModel} from '../../state/models/feed-view'
+import {FeedModel} from '../../../state/models/feed-view'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {s, colors} from '../lib/styles'
+import {s, colors} from '../../lib/styles'
 
 const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 
-export const Home = observer(function Home({
+export default observer(function Home({
   navIdx,
   visible,
   scrollElRef,

src/view/screens/Home/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Home = register({
+  loader: () => import('./Home'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/Login/index.tsx

@@ -14,19 +14,20 @@ import Svg, {Circle, Line, Text as SvgText} from 'react-native-svg'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import * as EmailValidator from 'email-validator'
 import {observer} from 'mobx-react-lite'
-import {Picker} from '../com/util/Picker'
+import {Picker} from '../../com/util/Picker'
-import {TextLink} from '../com/util/Link'
+import {TextLink} from '../../com/util/Link'
-import {s, colors} from '../lib/styles'
+import {s, colors} from '../../lib/styles'
 import {
   makeValidHandle,
   createFullHandle,
   toNiceDomain,
-} from '../../lib/strings'
+} from '../../../lib/strings'
-import {useStores, DEFAULT_SERVICE} from '../../state'
+import {useStores, DEFAULT_SERVICE} from '../../../state'
-import {ServiceDescription} from '../../state/models/session'
+import {ServiceDescription} from '../../../state/models/session'
-import {ServerInputModel} from '../../state/models/shell-ui'
+import {ServerInputModel} from '../../../state/models/shell-ui'
-import {ComAtprotoAccountCreate} from '../../third-party/api/index'
+import {ComAtprotoAccountCreate} from '../../../third-party/api/index'
-import {isNetworkError} from '../../lib/errors'
+import {isNetworkError} from '../../../lib/errors'
+import {investigate} from 'react-native-bundle-splitter/dist/utils'
 
 enum ScreenState {
   SigninOrCreateAccount,
@@ -589,6 +590,12 @@ export const Login = observer(
       ScreenState.SigninOrCreateAccount,
     )
 
+    console.log(
+      `Bundle:\nloaded:${investigate().loaded.length}\nwaiting:${
+        investigate().waiting.length
+      }`,
+    )
+
     return (
       <View style={styles.outer}>
         {screenState === ScreenState.SigninOrCreateAccount ? (

src/view/screens/NotFound/NotFound.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {Text, Button, View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
 
-export const NotFound = () => {
+export default () => {
   const stores = useStores()
   return (
     <View>

src/view/screens/NotFound/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const NotFound = register({
+  loader: () => import('./NotFound'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/Notifications/Notifications.tsx

@@ -1,12 +1,12 @@
 import React, {useState, useEffect} from 'react'
 import {View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {Feed} from '../com/notifications/Feed'
+import {Feed} from '../../com/notifications/Feed'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {NotificationsViewModel} from '../../state/models/notifications-view'
+import {NotificationsViewModel} from '../../../state/models/notifications-view'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
 
-export const Notifications = ({navIdx, visible}: ScreenParams) => {
+export default ({navIdx, visible}: ScreenParams) => {
   const store = useStores()
 
   useEffect(() => {

src/view/screens/Notifications/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Notifications = register({
+  loader: () => import('./Notifications'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/Onboard/Onboard.tsx

@@ -1,12 +1,12 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {FeatureExplainer} from '../com/onboard/FeatureExplainer'
+import {FeatureExplainer} from '../../com/onboard/FeatureExplainer'
-import {Follows} from '../com/onboard/Follows'
+import {Follows} from '../../com/onboard/Follows'
-import {OnboardStage, OnboardStageOrder} from '../../state/models/onboard'
+import {OnboardStage, OnboardStageOrder} from '../../../state/models/onboard'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
 
-export const Onboard = observer(() => {
+export default observer(() => {
   const store = useStores()
 
   useEffect(() => {

src/view/screens/Onboard/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Onboard = register({
+  loader: () => import('./Onboard'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/PostDownvotedBy/PostDownvotedBy.tsx

@@ -1,12 +1,12 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedBy'
+import {PostVotedBy as PostLikedByComponent} from '../../com/post-thread/PostVotedBy'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {makeRecordUri} from '../../lib/strings'
+import {makeRecordUri} from '../../../lib/strings'
 
-export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)

src/view/screens/PostDownvotedBy/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const PostDownvotedBy = register({
+  loader: () => import('./PostDownvotedBy'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/PostRepostedBy/PostRepostedBy.tsx

@@ -1,12 +1,12 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/PostRepostedBy'
+import {PostRepostedBy as PostRepostedByComponent} from '../../com/post-thread/PostRepostedBy'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {makeRecordUri} from '../../lib/strings'
+import {makeRecordUri} from '../../../lib/strings'
 
-export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)

src/view/screens/PostRepostedBy/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const PostRepostedBy = register({
+  loader: () => import('./PostRepostedBy'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/PostThread/PostThread.tsx

@@ -1,13 +1,13 @@
 import React, {useEffect, useMemo, useState} from 'react'
 import {View} from 'react-native'
-import {makeRecordUri} from '../../lib/strings'
+import {makeRecordUri} from '../../../lib/strings'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
+import {PostThread as PostThreadComponent} from '../../com/post-thread/PostThread'
-import {PostThreadViewModel} from '../../state/models/post-thread-view'
+import {PostThreadViewModel} from '../../../state/models/post-thread-view'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
 
-export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const [viewSubtitle, setViewSubtitle] = useState<string>(`by ${name}`)

src/view/screens/PostThread/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const PostThread = register({
+  loader: () => import('./PostThread'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/PostUpvotedBy/PostUpvotedBy.tsx

@@ -1,12 +1,12 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedBy'
+import {PostVotedBy as PostLikedByComponent} from '../../com/post-thread/PostVotedBy'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {makeRecordUri} from '../../lib/strings'
+import {makeRecordUri} from '../../../lib/strings'
 
-export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)

src/view/screens/PostUpvotedBy/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const PostUpvotedBy = register({
+  loader: () => import('./PostUpvotedBy'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/Profile/Profile.tsx

@@ -2,28 +2,28 @@ import React, {useEffect, useState, useMemo} from 'react'
 import {StyleSheet, Text, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {ViewSelector} from '../com/util/ViewSelector'
+import {ViewSelector} from '../../com/util/ViewSelector'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {ProfileUiModel, Sections} from '../../state/models/profile-ui'
+import {ProfileUiModel, Sections} from '../../../state/models/profile-ui'
-import {MembershipItem} from '../../state/models/memberships-view'
+import {MembershipItem} from '../../../state/models/memberships-view'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {ConfirmModel} from '../../state/models/shell-ui'
+import {ConfirmModel} from '../../../state/models/shell-ui'
-import {ProfileHeader} from '../com/profile/ProfileHeader'
+import {ProfileHeader} from '../../com/profile/ProfileHeader'
-import {FeedItem} from '../com/posts/FeedItem'
+import {FeedItem} from '../../com/posts/FeedItem'
-import {ProfileCard} from '../com/profile/ProfileCard'
+import {ProfileCard} from '../../com/profile/ProfileCard'
-import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder'
+import {PostFeedLoadingPlaceholder} from '../../com/util/LoadingPlaceholder'
-import {ErrorScreen} from '../com/util/ErrorScreen'
+import {ErrorScreen} from '../../com/util/ErrorScreen'
-import {ErrorMessage} from '../com/util/ErrorMessage'
+import {ErrorMessage} from '../../com/util/ErrorMessage'
-import {EmptyState} from '../com/util/EmptyState'
+import {EmptyState} from '../../com/util/EmptyState'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import * as Toast from '../com/util/Toast'
+import * as Toast from '../../com/util/Toast'
-import {s, colors} from '../lib/styles'
+import {s, colors} from '../../lib/styles'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}
 const END_ITEM = {_reactKey: '__end__'}
 const EMPTY_ITEM = {_reactKey: '__empty__'}
 
-export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
+export default observer(({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const [hasSetup, setHasSetup] = useState<boolean>(false)
   const uiState = useMemo(

src/view/screens/Profile/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Profile = register({
+  loader: () => import('./Profile'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/ProfileFollowers/ProfileFollowers.tsx

@@ -1,11 +1,11 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
+import {ProfileFollowers as ProfileFollowersComponent} from '../../com/profile/ProfileFollowers'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
 
-export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 

src/view/screens/ProfileFollowers/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const ProfileFollowers = register({
+  loader: () => import('./ProfileFollowers'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/ProfileFollows/ProfileFollows.tsx

@@ -1,11 +1,11 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
+import {ProfileFollows as ProfileFollowsComponent} from '../../com/profile/ProfileFollows'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
 
-export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 

src/view/screens/ProfileFollows/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const ProfileFollows = register({
+  loader: () => import('./ProfileFollows'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/ProfileMembers/ProfileMembers.tsx

@@ -1,11 +1,11 @@
 import React, {useEffect} from 'react'
 import {View} from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {ProfileMembers as ProfileMembersComponent} from '../com/profile/ProfileMembers'
+import {ProfileMembers as ProfileMembersComponent} from '../../com/profile/ProfileMembers'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
 
-export const ProfileMembers = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 

src/view/screens/ProfileMembers/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const ProfileMembers = register({
+  loader: () => import('./ProfileMembers'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/Search/Search.tsx

@@ -8,16 +8,16 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {SuggestedFollows} from '../com/discover/SuggestedFollows'
+import {SuggestedFollows} from '../../com/discover/SuggestedFollows'
-import {UserAvatar} from '../com/util/UserAvatar'
+import {UserAvatar} from '../../com/util/UserAvatar'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view'
+import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view'
-import {s, colors} from '../lib/styles'
+import {s, colors} from '../../lib/styles'
-import {MagnifyingGlassIcon} from '../lib/icons'
+import {MagnifyingGlassIcon} from '../../lib/icons'
 
-export const Search = ({navIdx, visible, params}: ScreenParams) => {
+export default ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const textInput = useRef<TextInput>(null)
   const [query, setQuery] = useState<string>('')

src/view/screens/Search/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Search = register({
+  loader: () => import('./Search'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})

src/view/screens/Settings/Settings.tsx

@@ -1,17 +1,14 @@
 import React, {useEffect} from 'react'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {useStores} from '../../state'
+import {useStores} from '../../../state'
-import {ScreenParams} from '../routes'
+import {ScreenParams} from '../../routes'
-import {s, colors} from '../lib/styles'
+import {s, colors} from '../../lib/styles'
-import {ViewHeader} from '../com/util/ViewHeader'
+import {ViewHeader} from '../../com/util/ViewHeader'
-import {Link} from '../com/util/Link'
+import {Link} from '../../com/util/Link'
-import {UserAvatar} from '../com/util/UserAvatar'
+import {UserAvatar} from '../../com/util/UserAvatar'
 
-export const Settings = observer(function Settings({
+export default observer(function Settings({navIdx, visible}: ScreenParams) {
-  navIdx,
-  visible,
-}: ScreenParams) {
   const store = useStores()
 
   useEffect(() => {

src/view/screens/Settings/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import {View, ActivityIndicator, StyleSheet} from 'react-native'
+import {register} from 'react-native-bundle-splitter'
+
+export const Settings = register({
+  loader: () => import('./Settings'),
+  placeholder: () => (
+    <View style={styles.loading}>
+      <ActivityIndicator />
+    </View>
+  ),
+})
+
+const styles = StyleSheet.create({
+  loading: {flex: 1, justifyContent: 'center'},
+})