using register

package.json

@@ -34,6 +34,7 @@
     "react-dom": "17.0.2",
     "react-native": "0.68.2",
     "react-native-appstate-hook": "^1.0.6",
+    "react-native-bundle-splitter": "^2.2.3",
     "react-native-gesture-handler": "^2.5.0",
     "react-native-image-crop-picker": "^0.38.1",
     "react-native-inappbrowser-reborn": "^3.6.3",

src/view/com/composer/Autocomplete.tsx

@@ -8,13 +8,14 @@ import {
 } from 'react-native'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
 import {colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
 interface AutocompleteItem {
   handle: string
   displayName?: string
 }
 
-export function Autocomplete({
+export const Autocomplete = register(function Autocomplete({
   active,
   items,
   onSelect,
@@ -52,7 +53,7 @@ export function Autocomplete({
       ))}
     </Animated.View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/composer/ComposePost.tsx

@@ -30,11 +30,13 @@ import {UserLocalPhotosModel} from '../../../state/models/user-local-photos'
 import {PhotoCarouselPicker} from './PhotoCarouselPicker'
 import {SelectedPhoto} from './SelectedPhoto'
 import {IMAGES_ENABLED} from '../../../build-flags'
+import {register} from 'react-native-bundle-splitter'
 
 const MAX_TEXT_LENGTH = 256
 const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
 
-export const ComposePost = observer(function ComposePost({
+export const ComposePost = register(
+  observer(function ComposePost({
     replyTo,
     onPost,
     onClose,
@@ -131,7 +133,8 @@ export const ComposePost = observer(function ComposePost({
     }
 
     const canPost = text.length <= MAX_TEXT_LENGTH
-  const progressColor = text.length > DANGER_TEXT_LENGTH ? '#e60000' : undefined
+    const progressColor =
+      text.length > DANGER_TEXT_LENGTH ? '#e60000' : undefined
 
     const selectTextInputLayout =
       selectedPhotos.length !== 0
@@ -287,7 +290,8 @@ export const ComposePost = observer(function ComposePost({
         </SafeAreaView>
       </KeyboardAvoidingView>
     )
-})
+  }),
+)
 
 const atPrefixRegex = /@([a-z0-9\.]*)$/i
 function extractTextAutocompletePrefix(text: string) {

src/view/com/composer/PhotoCarouselPicker.tsx

@@ -7,8 +7,10 @@ import {
   openCamera,
   openCropper,
 } from 'react-native-image-crop-picker'
+import {register} from 'react-native-bundle-splitter'
 
-export const PhotoCarouselPicker = ({
+export const PhotoCarouselPicker = register(
+  ({
     selectedPhotos,
     setSelectedPhotos,
     localPhotos,
@@ -92,11 +94,16 @@ export const PhotoCarouselPicker = ({
         <TouchableOpacity
           style={[styles.galleryButton, styles.photo]}
           onPress={handleOpenGallery}>
-        <FontAwesomeIcon icon="image" style={{color: colors.blue3}} size={24} />
+          <FontAwesomeIcon
+            icon="image"
+            style={{color: colors.blue3}}
+            size={24}
+          />
         </TouchableOpacity>
       </ScrollView>
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({
   photosContainer: {

src/view/com/composer/Prompt.tsx

@@ -3,8 +3,9 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {colors} from '../../lib/styles'
 import {useStores} from '../../../state'
 import {UserAvatar} from '../util/UserAvatar'
+import {register} from 'react-native-bundle-splitter'
 
-export function ComposePrompt({
+export const ComposePrompt = register(function ComposePrompt({
   noAvi = false,
   text = "What's up?",
   btn = 'Post',
@@ -41,7 +42,7 @@ export function ComposePrompt({
       </View>
     </TouchableOpacity>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {

src/view/com/composer/SelectedPhoto.tsx

@@ -2,8 +2,10 @@ import React, {useCallback} from 'react'
 import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export const SelectedPhoto = ({
+export const SelectedPhoto = register(
+  ({
     selectedPhotos,
     setSelectedPhotos,
   }: {
@@ -48,7 +50,8 @@ export const SelectedPhoto = ({
           ))}
       </View>
     ) : null
-}
+  },
+)
 
 const styles = StyleSheet.create({
   imageContainer: {

src/view/com/discover/SuggestedFollows.tsx

@@ -22,8 +22,10 @@ import {
   SuggestedActor,
 } from '../../../state/models/suggested-actors-view'
 import {s, colors, gradients} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export const SuggestedFollows = observer(
+export const SuggestedFollows = register(
+  observer(
     ({
       onNoSuggestions,
       asLinks,
@@ -43,7 +45,9 @@ export const SuggestedFollows = observer(
         console.log('Fetching suggested actors')
         view
           .setup()
-        .catch((err: any) => console.error('Failed to fetch suggestions', err))
+          .catch((err: any) =>
+            console.error('Failed to fetch suggestions', err),
+          )
       }, [view])
 
       useEffect(() => {
@@ -55,7 +59,9 @@ export const SuggestedFollows = observer(
       const onPressTryAgain = () =>
         view
           .setup()
-        .catch((err: any) => console.error('Failed to fetch suggestions', err))
+          .catch((err: any) =>
+            console.error('Failed to fetch suggestions', err),
+          )
 
       const onPressFollow = async (item: SuggestedActor) => {
         try {
@@ -128,6 +134,7 @@ export const SuggestedFollows = observer(
         </View>
       )
     },
+  ),
 )
 
 const User = ({

src/view/com/notifications/Feed.tsx

@@ -6,10 +6,12 @@ import {FeedItem} from './FeedItem'
 import {NotificationFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {EmptyState} from '../util/EmptyState'
+import {register} from 'react-native-bundle-splitter'
 
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 
-export const Feed = observer(function Feed({
+export const Feed = register(
+  observer(function Feed({
     view,
     onPressTryAgain,
   }: {
@@ -69,4 +71,5 @@ export const Feed = observer(function Feed({
         )}
       </View>
     )
-})
+  }),
+)

src/view/com/notifications/FeedItem.tsx

@@ -13,14 +13,12 @@ import {ErrorMessage} from '../util/ErrorMessage'
 import {Post} from '../post/Post'
 import {Link} from '../util/Link'
 import {InviteAccepter} from './InviteAccepter'
+import {register} from 'react-native-bundle-splitter'
 
 const MAX_AUTHORS = 8
 
-export const FeedItem = observer(function FeedItem({
+export const FeedItem = register(
-  item,
+  observer(function FeedItem({item}: {item: NotificationsViewItemModel}) {
-}: {
-  item: NotificationsViewItemModel
-}) {
     const itemHref = useMemo(() => {
       if (item.isUpvote || item.isRepost || item.isTrend) {
         const urip = new AtUri(item.subjectUri)
@@ -166,7 +164,8 @@ export const FeedItem = observer(function FeedItem({
                 <>
                   <Text style={[styles.metaItem, s.f15]}>and</Text>
                   <Text style={[styles.metaItem, s.f15, s.bold]}>
-                  {authors.length - 1} {pluralize(authors.length - 1, 'other')}
+                    {authors.length - 1}{' '}
+                    {pluralize(authors.length - 1, 'other')}
                   </Text>
                 </>
               ) : undefined}
@@ -191,7 +190,8 @@ export const FeedItem = observer(function FeedItem({
         )}
       </Link>
     )
-})
+  }),
+)
 
 function AdditionalPostText({
   additionalPost,

src/view/com/notifications/InviteAccepter.tsx

@@ -9,8 +9,13 @@ import {useStores} from '../../../state'
 import {ProfileCard} from '../profile/ProfileCard'
 import * as Toast from '../util/Toast'
 import {s, colors, gradients} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
+export const InviteAccepter = register(function InviteAccepter({
+  item,
+}: {
+  item: NotificationsViewItemModel
+}) {
   const store = useStores()
   const [confirmationUri, setConfirmationUri] = useState<string>('')
   const isMember =
@@ -70,7 +75,7 @@ export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
       )}
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {

src/view/com/onboard/FeatureExplainer.tsx

@@ -16,6 +16,7 @@ import {useStores} from '../../../state'
 import {s} from '../../lib/styles'
 import {SCENE_EXPLAINER, TABS_EXPLAINER} from '../../lib/assets'
 import {TABS_ENABLED} from '../../../build-flags'
+import {register} from 'react-native-bundle-splitter'
 
 const Intro = () => (
   <View style={styles.explainer}>
@@ -79,7 +80,7 @@ const SCENE_MAP = {
 }
 const renderScene = SceneMap(SCENE_MAP)
 
-export const FeatureExplainer = () => {
+export const FeatureExplainer = register(() => {
   const layout = useWindowDimensions()
   const store = useStores()
   const [index, setIndex] = useState(0)
@@ -153,7 +154,7 @@ export const FeatureExplainer = () => {
       </View>
     </SafeAreaView>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {

src/view/com/onboard/Follows.tsx

@@ -10,8 +10,10 @@ import {observer} from 'mobx-react-lite'
 import {SuggestedFollows} from '../discover/SuggestedFollows'
 import {useStores} from '../../../state'
 import {s} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export const Follows = observer(() => {
+export const Follows = register(
+  observer(() => {
     const store = useStores()
 
     const onNoSuggestions = () => {
@@ -35,7 +37,8 @@ export const Follows = observer(() => {
         </View>
       </SafeAreaView>
     )
-})
+  }),
+)
 
 const styles = StyleSheet.create({
   container: {

src/view/com/post-thread/PostRepostedBy.tsx

@@ -10,12 +10,10 @@ import {ErrorMessage} from '../util/ErrorMessage'
 import {Link} from '../util/Link'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export const PostRepostedBy = observer(function PostRepostedBy({
+export const PostRepostedBy = register(
-  uri,
+  observer(function PostRepostedBy({uri}: {uri: string}) {
-}: {
-  uri: string
-}) {
     const store = useStores()
     const [view, setView] = useState<RepostedByViewModel | undefined>()
 
@@ -79,7 +77,8 @@ export const PostRepostedBy = observer(function PostRepostedBy({
         />
       </View>
     )
-})
+  }),
+)
 
 const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
   return (

src/view/com/post-thread/PostThread.tsx

@@ -8,8 +8,10 @@ import {
 import {useStores} from '../../../state'
 import {PostThreadItem} from './PostThreadItem'
 import {ErrorMessage} from '../util/ErrorMessage'
+import {register} from 'react-native-bundle-splitter'
 
-export const PostThread = observer(function PostThread({
+export const PostThread = register(
+  observer(function PostThread({
     uri,
     view,
   }: {
@@ -86,7 +88,8 @@ export const PostThread = observer(function PostThread({
         contentContainerStyle={{paddingBottom: 200}}
       />
     )
-})
+  }),
+)
 
 function* flattenThread(
   post: PostThreadViewPostModel,

src/view/com/post-thread/PostThreadItem.tsx

@@ -18,11 +18,13 @@ import {PostMeta} from '../util/PostMeta'
 import {PostEmbeds} from '../util/PostEmbeds'
 import {PostCtrls} from '../util/PostCtrls'
 import {ComposePrompt} from '../composer/Prompt'
+import {register} from 'react-native-bundle-splitter'
 
 const PARENT_REPLY_LINE_LENGTH = 8
 const REPLYING_TO_LINE_LENGTH = 6
 
-export const PostThreadItem = observer(function PostThreadItem({
+export const PostThreadItem = register(
+  observer(function PostThreadItem({
     item,
     onPostReply,
   }: {
@@ -160,7 +162,10 @@ export const PostThreadItem = observer(function PostThreadItem({
             </View>
             <View style={[s.pl10, s.pr10, s.pb10]}>
               <View
-              style={[styles.postTextContainer, styles.postTextLargeContainer]}>
+                style={[
+                  styles.postTextContainer,
+                  styles.postTextLargeContainer,
+                ]}>
                 <RichText
                   text={record.text}
                   entities={record.entities}
@@ -277,7 +282,10 @@ export const PostThreadItem = observer(function PostThreadItem({
                   style={[styles.postText]}
                 />
               </View>
-            <PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
+              <PostEmbeds
+                entities={record.entities}
+                style={{marginBottom: 10}}
+              />
               <PostCtrls
                 replyCount={item.replyCount}
                 repostCount={item.repostCount}
@@ -293,7 +301,8 @@ export const PostThreadItem = observer(function PostThreadItem({
         </Link>
       )
     }
-})
+  }),
+)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/post-thread/PostVotedBy.tsx

@@ -10,8 +10,10 @@ import {ErrorMessage} from '../util/ErrorMessage'
 import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export const PostVotedBy = observer(function PostVotedBy({
+export const PostVotedBy = register(
+  observer(function PostVotedBy({
     uri,
     direction,
   }: {
@@ -29,7 +31,9 @@ export const PostVotedBy = observer(function PostVotedBy({
       console.log('Fetching voted by', uri)
       const newView = new VotesViewModel(store, {uri, direction})
       setView(newView)
-    newView.setup().catch(err => console.error('Failed to fetch voted by', err))
+      newView
+        .setup()
+        .catch(err => console.error('Failed to fetch voted by', err))
     }, [uri, view?.params.uri, store])
 
     const onRefresh = () => {
@@ -79,7 +83,8 @@ export const PostVotedBy = observer(function PostVotedBy({
         />
       </View>
     )
-})
+  }),
+)
 
 const LikedByItem = ({item}: {item: VotesViewItemModel}) => {
   return (

src/view/com/post/Post.tsx

@@ -22,8 +22,10 @@ import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export const Post = observer(function Post({
+export const Post = register(
+  observer(function Post({
     uri,
     initView,
     style,
@@ -156,7 +158,11 @@ export const Post = observer(function Post({
             />
             {replyHref !== '' && (
               <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
-              <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
+                <FontAwesomeIcon
+                  icon="reply"
+                  size={9}
+                  style={[s.gray4, s.mr5]}
+                />
                 <Text style={[s.gray4, s.f12, s.mr2]}>Reply to</Text>
                 <Link href={replyHref} title="Parent post">
                   <UserInfoText
@@ -188,7 +194,8 @@ export const Post = observer(function Post({
         </View>
       </Link>
     )
-})
+  }),
+)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/post/PostText.tsx

@@ -5,14 +5,10 @@ import {LoadingPlaceholder} from '../util/LoadingPlaceholder'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {PostModel} from '../../../state/models/post'
 import {useStores} from '../../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export const PostText = observer(function PostText({
+export const PostText = register(
-  uri,
+  observer(function PostText({uri, style}: {uri: string; style?: StyleProp}) {
-  style,
-}: {
-  uri: string
-  style?: StyleProp
-}) {
     const store = useStores()
     const [model, setModel] = useState<PostModel | undefined>()
 
@@ -54,4 +50,5 @@ export const PostText = observer(function PostText({
         <Text style={style}>{model.text}</Text>
       </View>
     )
-})
+  }),
+)

src/view/com/posts/Feed.tsx

@@ -7,11 +7,13 @@ import {ErrorMessage} from '../util/ErrorMessage'
 import {FeedModel} from '../../../state/models/feed-view'
 import {FeedItem} from './FeedItem'
 import {ComposePrompt} from '../composer/Prompt'
+import {register} from 'react-native-bundle-splitter'
 
 const COMPOSE_PROMPT_ITEM = {_reactKey: '__prompt__'}
 const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
 
-export const Feed = observer(function Feed({
+export const Feed = register(
+  observer(function Feed({
     feed,
     style,
     scrollElRef,
@@ -83,4 +85,5 @@ export const Feed = observer(function Feed({
         )}
       </View>
     )
-})
+  }),
+)

src/view/com/posts/FeedItem.tsx

@@ -16,15 +16,13 @@ import * as Toast from '../util/Toast'
 import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
 import {useStores} from '../../../state'
+import {register} from 'react-native-bundle-splitter'
 
 const TOP_REPLY_LINE_LENGTH = 12
 const REPLYING_TO_LINE_LENGTH = 8
 
-export const FeedItem = observer(function FeedItem({
+export const FeedItem = register(
-  item,
+  observer(function FeedItem({item}: {item: FeedItemModel}) {
-}: {
-  item: FeedItemModel
-}) {
     const store = useStores()
     const [deleted, setDeleted] = useState(false)
     const record = item.record as unknown as PostType.Record
@@ -35,12 +33,16 @@ export const FeedItem = observer(function FeedItem({
     const itemTitle = `Post by ${item.author.handle}`
     const authorHref = `/profile/${item.author.handle}`
     const replyAuthorDid = useMemo(() => {
-    if (!record.reply) return ''
+      if (!record.reply) {
+        return ''
+      }
       const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
       return urip.hostname
     }, [record.reply])
     const replyHref = useMemo(() => {
-    if (!record.reply) return ''
+      if (!record.reply) {
+        return ''
+      }
       const urip = new AtUri(record.reply.parent?.uri || record.reply.root.uri)
       return `/profile/${urip.hostname}/post/${urip.rkey}`
     }, [record.reply])
@@ -113,7 +115,8 @@ export const FeedItem = observer(function FeedItem({
             title={item.repostedBy.displayName || item.repostedBy.handle}>
             <FontAwesomeIcon icon="retweet" style={styles.includeReasonIcon} />
             <Text style={[s.gray4, s.bold, s.f13]}>
-            Reposted by {item.repostedBy.displayName || item.repostedBy.handle}
+              Reposted by{' '}
+              {item.repostedBy.displayName || item.repostedBy.handle}
             </Text>
           </Link>
         )}
@@ -127,7 +130,8 @@ export const FeedItem = observer(function FeedItem({
               style={styles.includeReasonIcon}
             />
             <Text style={[s.gray4, s.bold, s.f13]}>
-            Trending with {item.trendedBy.displayName || item.trendedBy.handle}
+              Trending with{' '}
+              {item.trendedBy.displayName || item.trendedBy.handle}
             </Text>
           </Link>
         )}
@@ -213,7 +217,8 @@ export const FeedItem = observer(function FeedItem({
         </View>
       </Link>
     )
-})
+  }),
+)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/profile/ProfileCard.tsx

@@ -3,8 +3,9 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {Link} from '../util/Link'
 import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export function ProfileCard({
+export const ProfileCard = register(function ProfileCard({
   did,
   handle,
   displayName,
@@ -48,7 +49,7 @@ export function ProfileCard({
       </View>
     </Link>
   )
-}
+})
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/profile/ProfileFollowers.tsx

@@ -10,12 +10,10 @@ import {ErrorMessage} from '../util/ErrorMessage'
 import {UserAvatar} from '../util/UserAvatar'
 import {useStores} from '../../../state'
 import {s, colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export const ProfileFollowers = observer(function ProfileFollowers({
+export const ProfileFollowers = register(
-  name,
+  observer(function ProfileFollowers({name}: {name: string}) {
-}: {
-  name: string
-}) {
     const store = useStores()
     const [view, setView] = useState<UserFollowersViewModel | undefined>()
 
@@ -77,7 +75,8 @@ export const ProfileFollowers = observer(function ProfileFollowers({
         />
       </View>
     )
-})
+  }),
+)
 
 const User = ({item}: {item: FollowerItem}) => {
   return (

src/view/com/profile/ProfileFollows.tsx

@@ -10,12 +10,10 @@ import {Link} from '../util/Link'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {UserAvatar} from '../util/UserAvatar'
 import {s, colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export const ProfileFollows = observer(function ProfileFollows({
+export const ProfileFollows = register(
-  name,
+  observer(function ProfileFollows({name}: {name: string}) {
-}: {
-  name: string
-}) {
     const store = useStores()
     const [view, setView] = useState<UserFollowsViewModel | undefined>()
 
@@ -77,7 +75,8 @@ export const ProfileFollows = observer(function ProfileFollows({
         />
       </View>
     )
-})
+  }),
+)
 
 const User = ({item}: {item: FollowItem}) => {
   return (

src/view/com/profile/ProfileHeader.tsx

@@ -21,8 +21,10 @@ import {RichText} from '../util/RichText'
 import {UserAvatar} from '../util/UserAvatar'
 import {UserBanner} from '../util/UserBanner'
 import {UserInfoText} from '../util/UserInfoText'
+import {register} from 'react-native-bundle-splitter'
 
-export const ProfileHeader = observer(function ProfileHeader({
+export const ProfileHeader = register(
+  observer(function ProfileHeader({
     view,
     onRefreshAll,
   }: {
@@ -39,7 +41,7 @@ export const ProfileHeader = observer(function ProfileHeader({
       store.nav.tab.goBack()
     }
     const onPressSearch = () => {
-    store.nav.navigate(`/search`)
+      store.nav.navigate('/search')
     }
     const onPressToggleFollow = () => {
       view?.toggleFollowing().then(
@@ -72,7 +74,7 @@ export const ProfileHeader = observer(function ProfileHeader({
       store.shell.openModal(
         new ConfirmModel(
           'Leave this scene?',
-        `You'll be able to come back unless your invite is revoked.`,
+          "You'll be able to come back unless your invite is revoked.",
           onPressConfirmLeaveScene,
         ),
       )
@@ -83,7 +85,7 @@ export const ProfileHeader = observer(function ProfileHeader({
           did: store.me.did || '',
           rkey: new AtUri(view.myState.member).rkey,
         })
-      Toast.show(`Scene left`)
+        Toast.show('Scene left')
       }
       onRefreshAll()
     }
@@ -266,7 +268,10 @@ export const ProfileHeader = observer(function ProfileHeader({
           ) : undefined}
           {view.isScene && view.creator ? (
             <View style={styles.relationshipsLine}>
-            <FontAwesomeIcon icon={['far', 'user']} style={[s.gray5, s.mr5]} />
+              <FontAwesomeIcon
+                icon={['far', 'user']}
+                style={[s.gray5, s.mr5]}
+              />
               <Text style={[s.mr2, s.gray5, s.f15]}>Created by</Text>
               <UserInfoText
                 style={[s.blue3, s.f15]}
@@ -306,7 +311,8 @@ export const ProfileHeader = observer(function ProfileHeader({
         ) : undefined}
       </View>
     )
-})
+  }),
+)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/profile/ProfileMembers.tsx

@@ -5,12 +5,10 @@ import {MembersViewModel, MemberItem} from '../../../state/models/members-view'
 import {ProfileCard} from './ProfileCard'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {useStores} from '../../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export const ProfileMembers = observer(function ProfileMembers({
+export const ProfileMembers = register(
-  name,
+  observer(function ProfileMembers({name}: {name: string}) {
-}: {
-  name: string
-}) {
     const store = useStores()
     const [view, setView] = useState<MembersViewModel | undefined>()
 
@@ -22,7 +20,9 @@ export const ProfileMembers = observer(function ProfileMembers({
       console.log('Fetching members', name)
       const newView = new MembersViewModel(store, {actor: name})
       setView(newView)
-    newView.setup().catch(err => console.error('Failed to fetch members', err))
+      newView
+        .setup()
+        .catch(err => console.error('Failed to fetch members', err))
     }, [name, view?.params.actor, store])
 
     const onRefresh = () => {
@@ -77,4 +77,5 @@ export const ProfileMembers = observer(function ProfileMembers({
         />
       </View>
     )
-})
+  }),
+)

src/view/com/util/DropdownBtn.tsx

@@ -17,6 +17,7 @@ import {toShareUrl} from '../../../lib/strings'
 import {useStores} from '../../../state'
 import {ConfirmModel} from '../../../state/models/shell-ui'
 import {TABS_ENABLED} from '../../../build-flags'
+import {register} from 'react-native-bundle-splitter'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 
@@ -26,7 +27,8 @@ export interface DropdownItem {
   onPress: () => void
 }
 
-export function DropdownBtn({
+export const DropdownBtn = register(
+  ({
     style,
     items,
     menuWidth,
@@ -36,7 +38,7 @@ export function DropdownBtn({
     items: DropdownItem[]
     menuWidth?: number
     children?: React.ReactNode
-}) {
+  }) => {
     const ref = useRef<TouchableOpacity>(null)
 
     const onPress = () => {
@@ -71,7 +73,8 @@ export function DropdownBtn({
         {children}
       </TouchableOpacity>
     )
-}
+  },
+)
 
 export function PostDropdownBtn({
   style,

src/view/com/util/EmptyState.tsx

@@ -5,7 +5,8 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UserGroupIcon} from '../../lib/icons'
 import {colors} from '../../lib/styles'
 
-export function EmptyState({
+export const EmptyState = register(
+  ({
     icon,
     message,
     style,
@@ -13,7 +14,7 @@ export function EmptyState({
     icon: IconProp | 'user-group'
     message: string
     style?: StyleProp<ViewStyle>
-}) {
+  }) => {
     return (
       <View style={[styles.container, style]}>
         <View style={styles.iconContainer}>
@@ -26,7 +27,8 @@ export function EmptyState({
         <Text style={styles.text}>{message}</Text>
       </View>
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({
   container: {

src/view/com/util/ErrorMessage.tsx

@@ -10,8 +10,10 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import LinearGradient from 'react-native-linear-gradient'
 import {colors, gradients} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export function ErrorMessage({
+export const ErrorMessage = register(
+  ({
     message,
     numberOfLines,
     dark,
@@ -23,10 +25,11 @@ export function ErrorMessage({
     dark?: boolean
     style?: StyleProp<ViewStyle>
     onPressTryAgain?: () => void
-}) {
+  }) => {
     const inner = (
       <>
-      <View style={[styles.errorIcon, dark ? styles.darkErrorIcon : undefined]}>
+        <View
+          style={[styles.errorIcon, dark ? styles.darkErrorIcon : undefined]}>
           <FontAwesomeIcon
             icon="exclamation"
             style={{color: dark ? colors.red3 : colors.white}}
@@ -61,7 +64,8 @@ export function ErrorMessage({
       )
     }
     return <View style={[styles.outer, style]}>{inner}</View>
-}
+  },
+)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/util/ErrorScreen.tsx

@@ -2,8 +2,10 @@ import React from 'react'
 import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export function ErrorScreen({
+export const ErrorScreen = register(
+  ({
     title,
     message,
     details,
@@ -13,7 +15,7 @@ export function ErrorScreen({
     message: string
     details?: string
     onPressTryAgain?: () => void
-}) {
+  }) => {
     return (
       <View style={styles.outer}>
         <View style={styles.errorIconContainer}>
@@ -42,7 +44,8 @@ export function ErrorScreen({
         )}
       </View>
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/util/Link.tsx

@@ -10,8 +10,10 @@ import {
 } from 'react-native'
 import {useStores, RootStoreModel} from '../../../state'
 import {convertBskyAppUrlIfNeeded} from '../../../lib/strings'
+import {register} from 'react-native-bundle-splitter'
 
-export const Link = observer(function Link({
+export const Link = register(
+  observer(function Link({
     style,
     href,
     title,
@@ -38,7 +40,8 @@ export const Link = observer(function Link({
         {children ? children : <Text>{title || 'link'}</Text>}
       </TouchableOpacity>
     )
-})
+  }),
+)
 
 export const TextLink = observer(function Link({
   style,

src/view/com/util/LoadingPlaceholder.tsx

@@ -4,7 +4,8 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UpIcon} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
 
-export function LoadingPlaceholder({
+export const LoadingPlaceholder = register(
+  ({
     width,
     height,
     style,
@@ -12,7 +13,7 @@ export function LoadingPlaceholder({
     width: string | number
     height: string | number
     style?: StyleProp<ViewStyle>
-}) {
+  }) => {
     return (
       <View
         style={[
@@ -34,7 +35,8 @@ export function LoadingPlaceholder({
         />
       </View>
     )
-}
+  },
+)
 
 export function PostLoadingPlaceholder({
   style,
@@ -63,7 +65,7 @@ export function PostLoadingPlaceholder({
           <View style={s.flex1}>
             <UpIcon style={s.gray3} size={17} strokeWidth={1.7} />
           </View>
-          <View style={s.flex1}></View>
+          <View style={s.flex1} />
         </View>
       </View>
     </View>

src/view/com/util/Picker.tsx

@@ -33,7 +33,8 @@ interface PickerOpts {
 
 const MENU_WIDTH = 200
 
-export function Picker({
+export const Picker = register(
+  ({
     style,
     labelStyle,
     iconStyle,
@@ -41,7 +42,7 @@ export function Picker({
     value,
     onChange,
     enabled,
-}: PickerOpts) {
+  }: PickerOpts) => {
     const ref = useRef<View>(null)
     const valueLabel = items.find(item => item.value === value)?.label || value
     const onPress = () => {
@@ -71,7 +72,8 @@ export function Picker({
         </View>
       </TouchableWithoutFeedback>
     )
-}
+  },
+)
 
 function createDropdownMenu(
   x: number,

src/view/com/util/PostCtrls.tsx

@@ -4,6 +4,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {UpIcon, UpIconSolid} from '../../lib/icons'
 import {s, colors} from '../../lib/styles'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
+import {register} from 'react-native-bundle-splitter'
 
 interface PostCtrlsOpts {
   big?: boolean
@@ -21,7 +22,7 @@ const redgray = '#7A6161'
 const sRedgray = {color: redgray}
 const HITSLOP = {top: 10, left: 10, bottom: 10, right: 10}
 
-export function PostCtrls(opts: PostCtrlsOpts) {
+export const PostCtrls = register((opts: PostCtrlsOpts) => {
   const interp1 = useAnimatedValue(0)
   const interp2 = useAnimatedValue(0)
 
@@ -168,7 +169,7 @@ export function PostCtrls(opts: PostCtrlsOpts) {
       <View style={s.flex1}></View>
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   ctrls: {

src/view/com/util/PostEmbeds.tsx

@@ -12,19 +12,16 @@ import {Link} from '../util/Link'
 import {LinkMeta, getLikelyType, LikelyType} from '../../../lib/link-meta'
 import {colors} from '../../lib/styles'
 import {useStores} from '../../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export function PostEmbeds({
+export const PostEmbeds = register(
-  entities,
+  ({entities, style}: {entities?: Entity[]; style?: StyleProp<ViewStyle>}) => {
-  style,
-}: {
-  entities?: Entity[]
-  style?: StyleProp<ViewStyle>
-}) {
     const store = useStores()
     const [linkMeta, setLinkMeta] = useState<LinkMeta | undefined>(undefined)
     const link = entities?.find(
       ent =>
-      ent.type === 'link' && getLikelyType(ent.value || '') === LikelyType.HTML,
+        ent.type === 'link' &&
+        getLikelyType(ent.value || '') === LikelyType.HTML,
     )
 
     useEffect(() => {
@@ -65,7 +62,8 @@ export function PostEmbeds({
         )}
       </Link>
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/util/PostMeta.tsx

@@ -5,6 +5,7 @@ import {Link} from '../util/Link'
 import {PostDropdownBtn} from '../util/DropdownBtn'
 import {s} from '../../lib/styles'
 import {ago} from '../../../lib/strings'
+import {register} from 'react-native-bundle-splitter'
 
 interface PostMetaOpts {
   itemHref: string
@@ -18,7 +19,7 @@ interface PostMetaOpts {
   onDeletePost: () => void
 }
 
-export function PostMeta(opts: PostMetaOpts) {
+export const PostMeta = register((opts: PostMetaOpts) => {
   return (
     <View style={styles.meta}>
       <Link
@@ -47,7 +48,7 @@ export function PostMeta(opts: PostMetaOpts) {
       </PostDropdownBtn>
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   meta: {

src/view/com/util/RichText.tsx

@@ -3,6 +3,7 @@ import {Text, TextStyle, StyleProp} from 'react-native'
 import {TextLink} from './Link'
 import {s} from '../../lib/styles'
 import {toShortUrl} from '../../../lib/strings'
+import {register} from 'react-native-bundle-splitter'
 
 type TextSlice = {start: number; end: number}
 type Entity = {
@@ -11,7 +12,8 @@ type Entity = {
   value: string
 }
 
-export function RichText({
+export const RichText = register(
+  ({
     text,
     entities,
     style,
@@ -21,7 +23,7 @@ export function RichText({
     entities?: Entity[]
     style?: StyleProp<TextStyle>
     numberOfLines?: number
-}) {
+  }) => {
     if (!entities?.length) {
       if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
         style = {
@@ -32,8 +34,11 @@ export function RichText({
       }
       return <Text style={style}>{text}</Text>
     }
-  if (!style) style = []
+    if (!style) {
-  else if (!Array.isArray(style)) style = [style]
+      style = []
+    } else if (!Array.isArray(style)) {
+      style = [style]
+    }
     entities.sort(sortByIndex)
     const segments = Array.from(toSegments(text, entities))
     const els = []
@@ -69,7 +74,8 @@ export function RichText({
         {els}
       </Text>
     )
-}
+  },
+)
 
 function sortByIndex(a: Entity, b: Entity) {
   return a.index.start - b.index.start

src/view/com/util/Selector.tsx

@@ -7,13 +7,15 @@ import {
   View,
 } from 'react-native'
 import {colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
 interface Layout {
   x: number
   width: number
 }
 
-export function Selector({
+export const Selector = register(
+  ({
     selectedIndex,
     items,
     panX,
@@ -23,7 +25,7 @@ export function Selector({
     items: string[]
     panX: Animated.Value
     onSelect?: (index: number) => void
-}) {
+  }) => {
     const [itemLayouts, setItemLayouts] = useState<undefined | Layout[]>(
       undefined,
     )
@@ -91,7 +93,8 @@ export function Selector({
           return (
             <TouchableWithoutFeedback key={i} onPress={() => onPressItem(i)}>
               <View style={styles.item} ref={itemRefs[i]}>
-              <Text style={selected ? styles.labelSelected : styles.itemLabel}>
+                <Text
+                  style={selected ? styles.labelSelected : styles.itemLabel}>
                   {item}
                 </Text>
               </View>
@@ -100,7 +103,8 @@ export function Selector({
         })}
       </View>
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/util/UserAvatar.tsx

@@ -10,8 +10,10 @@ import {
 } from 'react-native-image-crop-picker'
 import {getGradient} from '../../lib/asset-gen'
 import {colors} from '../../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
-export function UserAvatar({
+export const UserAvatar = register(
+  ({
     size,
     handle,
     avatar,
@@ -23,7 +25,7 @@ export function UserAvatar({
     displayName: string | undefined
     avatar?: string | null
     onSelectNewAvatar?: (img: PickedImage) => void
-}) {
+  }) => {
     const initials = getInitials(displayName || handle)
     const gradient = getGradient(handle)
 
@@ -113,7 +115,8 @@ export function UserAvatar({
     ) : (
       renderSvg(size, initials)
     )
-}
+  },
+)
 
 function getInitials(str: string): string {
   const tokens = str

src/view/com/util/UserBanner.tsx

@@ -10,8 +10,10 @@ import {
   openPicker,
 } from 'react-native-image-crop-picker'
 import {IMAGES_ENABLED} from '../../../build-flags'
+import {register} from 'react-native-bundle-splitter'
 
-export function UserBanner({
+export const UserBanner = register(
+  ({
     handle,
     userBanner,
     setUserBanner,
@@ -19,7 +21,7 @@ export function UserBanner({
     handle: string
     userBanner?: string | null
     setUserBanner?: React.Dispatch<React.SetStateAction<string | null>>
-}) {
+  }) => {
     const gradient = getGradient(handle)
 
     const handleEditBanner = useCallback(() => {
@@ -103,7 +105,8 @@ export function UserBanner({
     ) : (
       renderSvg()
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({
   editButtonContainer: {

src/view/com/util/UserInfoText.tsx

@@ -4,8 +4,10 @@ import {StyleProp, Text, TextStyle} from 'react-native'
 import {Link} from './Link'
 import {LoadingPlaceholder} from './LoadingPlaceholder'
 import {useStores} from '../../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export function UserInfoText({
+export const UserInfoText = register(
+  ({
     did,
     attr,
     loading,
@@ -21,7 +23,7 @@ export function UserInfoText({
     prefix?: string
     style?: StyleProp<TextStyle>
     asLink?: boolean
-}) {
+  }) => {
     attr = attr || 'handle'
     loading = loading || '...'
     failed = failed || 'user'
@@ -36,11 +38,15 @@ export function UserInfoText({
       let aborted = false
       store.profiles.getProfile(did).then(
         v => {
-        if (aborted) return
+          if (aborted) {
+            return
+          }
           setProfile(v.data)
         },
         _err => {
-        if (aborted) return
+          if (aborted) {
+            return
+          }
           setFailed(true)
         },
       )
@@ -76,4 +82,5 @@ export function UserInfoText({
     }
 
     return inner
-}
+  },
+)

src/view/com/util/ViewHeader.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
   StyleSheet,
@@ -11,11 +10,14 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {s, colors} from '../../lib/styles'
 import {MagnifyingGlassIcon} from '../../lib/icons'
 import {useStores} from '../../../state'
+import {register} from 'react-native-bundle-splitter'
 
 const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
 const BACK_HITSLOP = {left: 10, top: 10, right: 30, bottom: 10}
 
-export const ViewHeader = observer(function ViewHeader({
+export const ViewHeader = register(
+  observer(
+    ({
       title,
       subtitle,
       onPost,
@@ -23,7 +25,7 @@ export const ViewHeader = observer(function ViewHeader({
       title: string
       subtitle?: string
       onPost?: () => void
-}) {
+    }) => {
       const store = useStores()
       const onPressBack = () => {
         store.nav.tab.goBack()
@@ -35,7 +37,7 @@ export const ViewHeader = observer(function ViewHeader({
         store.shell.openComposer({onPost})
       }
       const onPressSearch = () => {
-    store.nav.navigate(`/search`)
+        store.nav.navigate('/search')
       }
       const onPressReconnect = () => {
         store.session.connect().catch(e => {
@@ -120,7 +122,9 @@ export const ViewHeader = observer(function ViewHeader({
           ) : undefined}
         </>
       )
-})
+    },
+  ),
+)
 
 const styles = StyleSheet.create({
   header: {

src/view/com/util/ViewSelector.tsx

@@ -4,12 +4,14 @@ import {Selector} from './Selector'
 import {HorzSwipe} from './gestures/HorzSwipe'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
 import {useStores} from '../../../state'
+import {register} from 'react-native-bundle-splitter'
 
 const HEADER_ITEM = {_reactKey: '__header__'}
 const SELECTOR_ITEM = {_reactKey: '__selector__'}
 const STICKY_HEADER_INDICES = [1]
 
-export function ViewSelector({
+export const ViewSelector = register(
+  ({
     sections,
     items,
     refreshing,
@@ -29,7 +31,7 @@ export function ViewSelector({
     onSelectView?: (viewIndex: number) => void
     onRefresh?: () => void
     onEndReached?: (info: {distanceFromEnd: number}) => void
-}) {
+  }) => {
     const store = useStores()
     const [selectedIndex, setSelectedIndex] = useState<number>(0)
     const panX = useAnimatedValue(0)
@@ -90,6 +92,7 @@ export function ViewSelector({
         />
       </HorzSwipe>
     )
-}
+  },
+)
 
 const styles = StyleSheet.create({})

src/view/screens/Contacts.tsx

@@ -7,8 +7,9 @@ import {colors} from '../lib/styles'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {useAnimatedValue} from '../lib/useAnimatedValue'
+import {register} from 'react-native-bundle-splitter'
 
-export const Contacts = ({navIdx, visible, params}: ScreenParams) => {
+export const Contacts = register(({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const selectorInterp = useAnimatedValue(0)
 
@@ -50,7 +51,7 @@ export const Contacts = ({navIdx, visible, params}: ScreenParams) => {
       {!!store.me.handle && <ProfileFollowsComponent name={store.me.handle} />}
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   section: {

src/view/screens/Home.tsx

@@ -9,14 +9,12 @@ import {useStores} from '../../state'
 import {FeedModel} from '../../state/models/feed-view'
 import {ScreenParams} from '../routes'
 import {s, colors} from '../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
 const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 
-export const Home = observer(function Home({
+export const Home = register(
-  navIdx,
+  observer(({navIdx, visible, scrollElRef}: ScreenParams) => {
-  visible,
-  scrollElRef,
-}: ScreenParams) {
     const store = useStores()
     const [hasSetup, setHasSetup] = useState<boolean>(false)
     const {appState} = useAppState({
@@ -57,7 +55,9 @@ export const Home = observer(function Home({
         store.nav.setTitle(navIdx, 'Home')
         console.log('Fetching home feed')
         defaultFeedView.setup().then(() => {
-        if (aborted) return
+          if (aborted) {
+            return
+          }
           setHasSetup(true)
         })
       }
@@ -107,7 +107,8 @@ export const Home = observer(function Home({
         ) : undefined}
       </View>
     )
-})
+  }),
+)
 
 const styles = StyleSheet.create({
   loadLatest: {

src/view/screens/Login.tsx

@@ -27,6 +27,7 @@ import {ServiceDescription} from '../../state/models/session'
 import {ServerInputModel} from '../../state/models/shell-ui'
 import {ComAtprotoAccountCreate} from '../../third-party/api/index'
 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(
+      `loaded: ${investigate().loaded.length} \n waiting: ${
+        investigate().waiting.length
+      }`,
+    )
+
     return (
       <View style={styles.outer}>
         {screenState === ScreenState.SigninOrCreateAccount ? (

src/view/screens/NotFound.tsx

@@ -2,8 +2,9 @@ import React from 'react'
 import {Text, Button, View} from 'react-native'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {useStores} from '../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export const NotFound = () => {
+export const NotFound = register(() => {
   const stores = useStores()
   return (
     <View>
@@ -19,4 +20,4 @@ export const NotFound = () => {
       </View>
     </View>
   )
-}
+})

src/view/screens/Notifications.tsx

@@ -5,8 +5,9 @@ import {Feed} from '../com/notifications/Feed'
 import {useStores} from '../../state'
 import {NotificationsViewModel} from '../../state/models/notifications-view'
 import {ScreenParams} from '../routes'
+import {register} from 'react-native-bundle-splitter'
 
-export const Notifications = ({navIdx, visible}: ScreenParams) => {
+export const Notifications = register(({navIdx, visible}: ScreenParams) => {
   const store = useStores()
 
   useEffect(() => {
@@ -36,4 +37,4 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => {
       <Feed view={store.me.notifications} onPressTryAgain={onPressTryAgain} />
     </View>
   )
-}
+})

src/view/screens/Onboard.tsx

@@ -5,8 +5,10 @@ import {FeatureExplainer} from '../com/onboard/FeatureExplainer'
 import {Follows} from '../com/onboard/Follows'
 import {OnboardStage, OnboardStageOrder} from '../../state/models/onboard'
 import {useStores} from '../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export const Onboard = observer(() => {
+export const Onboard = register(
+  observer(() => {
     const store = useStores()
 
     useEffect(() => {
@@ -30,4 +32,5 @@ export const Onboard = observer(() => {
         <Com />
       </View>
     )
-})
+  }),
+)

src/view/screens/PostDownvotedBy.tsx

@@ -5,8 +5,10 @@ import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedB
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {makeRecordUri} from '../../lib/strings'
+import {register} from 'react-native-bundle-splitter'
 
-export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
+export const PostDownvotedBy = register(
+  ({navIdx, visible, params}: ScreenParams) => {
     const store = useStores()
     const {name, rkey} = params
     const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -23,4 +25,5 @@ export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
         <PostLikedByComponent uri={uri} direction="down" />
       </View>
     )
-}
+  },
+)

src/view/screens/PostRepostedBy.tsx

@@ -5,8 +5,10 @@ import {PostRepostedBy as PostRepostedByComponent} from '../com/post-thread/Post
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {makeRecordUri} from '../../lib/strings'
+import {register} from 'react-native-bundle-splitter'
 
-export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
+export const PostRepostedBy = register(
+  ({navIdx, visible, params}: ScreenParams) => {
     const store = useStores()
     const {name, rkey} = params
     const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -23,4 +25,5 @@ export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
         <PostRepostedByComponent uri={uri} />
       </View>
     )
-}
+  },
+)

src/view/screens/PostThread.tsx

@@ -6,8 +6,10 @@ import {PostThread as PostThreadComponent} from '../com/post-thread/PostThread'
 import {PostThreadViewModel} from '../../state/models/post-thread-view'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
+export const PostThread = register(
+  ({navIdx, visible, params}: ScreenParams) => {
     const store = useStores()
     const {name, rkey} = params
     const [viewSubtitle, setViewSubtitle] = useState<string>(`by ${name}`)
@@ -55,4 +57,5 @@ export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
         </View>
       </View>
     )
-}
+  },
+)

src/view/screens/PostUpvotedBy.tsx

@@ -5,8 +5,10 @@ import {PostVotedBy as PostLikedByComponent} from '../com/post-thread/PostVotedB
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
 import {makeRecordUri} from '../../lib/strings'
+import {register} from 'react-native-bundle-splitter'
 
-export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
+export const PostUpvotedBy = register(
+  ({navIdx, visible, params}: ScreenParams) => {
     const store = useStores()
     const {name, rkey} = params
     const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -23,4 +25,5 @@ export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
         <PostLikedByComponent uri={uri} direction="up" />
       </View>
     )
-}
+  },
+)

src/view/screens/Profile.tsx

@@ -18,12 +18,14 @@ import {EmptyState} from '../com/util/EmptyState'
 import {ViewHeader} from '../com/util/ViewHeader'
 import * as Toast from '../com/util/Toast'
 import {s, colors} from '../lib/styles'
+import {register} from 'react-native-bundle-splitter'
 
 const LOADING_ITEM = {_reactKey: '__loading__'}
 const END_ITEM = {_reactKey: '__end__'}
 const EMPTY_ITEM = {_reactKey: '__empty__'}
 
-export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
+export const Profile = register(
+  observer(({navIdx, visible, params}: ScreenParams) => {
     const store = useStores()
     const [hasSetup, setHasSetup] = useState<boolean>(false)
     const uiState = useMemo(
@@ -43,7 +45,9 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
         console.log('Fetching profile for', params.name)
         store.nav.setTitle(navIdx, params.name)
         uiState.setup().then(() => {
-        if (aborted) return
+          if (aborted) {
+            return
+          }
           setHasSetup(true)
         })
       }
@@ -75,10 +79,10 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
       store.shell.openModal(
         new ConfirmModel(
           `Remove ${membership.displayName || membership.handle}?`,
-        `You'll be able to invite them again if you change your mind.`,
+          "You'll be able to invite them again if you change your mind.",
           async () => {
             await uiState.members.removeMember(membership.did)
-          Toast.show(`User removed`)
+            Toast.show('User removed')
           },
         ),
       )
@@ -254,7 +258,8 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
         )}
       </View>
     )
-})
+  }),
+)
 
 const styles = StyleSheet.create({
   container: {

src/view/screens/ProfileFollowers.tsx

@@ -4,8 +4,10 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollowers as ProfileFollowersComponent} from '../com/profile/ProfileFollowers'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
+export const ProfileFollowers = register(
+  ({navIdx, visible, params}: ScreenParams) => {
     const store = useStores()
     const {name} = params
 
@@ -21,4 +23,5 @@ export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
         <ProfileFollowersComponent name={name} />
       </View>
     )
-}
+  },
+)

src/view/screens/ProfileFollows.tsx

@@ -4,8 +4,10 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileFollows as ProfileFollowsComponent} from '../com/profile/ProfileFollows'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
+export const ProfileFollows = register(
+  ({navIdx, visible, params}: ScreenParams) => {
     const store = useStores()
     const {name} = params
 
@@ -21,4 +23,5 @@ export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
         <ProfileFollowsComponent name={name} />
       </View>
     )
-}
+  },
+)

src/view/screens/ProfileMembers.tsx

@@ -4,8 +4,10 @@ import {ViewHeader} from '../com/util/ViewHeader'
 import {ProfileMembers as ProfileMembersComponent} from '../com/profile/ProfileMembers'
 import {ScreenParams} from '../routes'
 import {useStores} from '../../state'
+import {register} from 'react-native-bundle-splitter'
 
-export const ProfileMembers = ({navIdx, visible, params}: ScreenParams) => {
+export const ProfileMembers = register(
+  ({navIdx, visible, params}: ScreenParams) => {
     const store = useStores()
     const {name} = params
 
@@ -21,4 +23,5 @@ export const ProfileMembers = ({navIdx, visible, params}: ScreenParams) => {
         <ProfileMembersComponent name={name} />
       </View>
     )
-}
+  },
+)

src/view/screens/Search.tsx

@@ -16,8 +16,9 @@ import {useStores} from '../../state'
 import {UserAutocompleteViewModel} from '../../state/models/user-autocomplete-view'
 import {s, colors} from '../lib/styles'
 import {MagnifyingGlassIcon} from '../lib/icons'
+import {register} from 'react-native-bundle-splitter'
 
-export const Search = ({navIdx, visible, params}: ScreenParams) => {
+export const Search = register(({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const textInput = useRef<TextInput>(null)
   const [query, setQuery] = useState<string>('')
@@ -92,7 +93,7 @@ export const Search = ({navIdx, visible, params}: ScreenParams) => {
       </View>
     </View>
   )
-}
+})
 
 const styles = StyleSheet.create({
   container: {

src/view/screens/Settings.tsx

@@ -7,11 +7,10 @@ import {s, colors} from '../lib/styles'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Link} from '../com/util/Link'
 import {UserAvatar} from '../com/util/UserAvatar'
+import {register} from 'react-native-bundle-splitter'
 
-export const Settings = observer(function Settings({
+export const Settings = register(
-  navIdx,
+  observer(function Settings({navIdx, visible}: ScreenParams) {
-  visible,
-}: ScreenParams) {
     const store = useStores()
 
     useEffect(() => {
@@ -55,7 +54,8 @@ export const Settings = observer(function Settings({
         </View>
       </View>
     )
-})
+  }),
+)
 
 const styles = StyleSheet.create({
   title: {

src/view/shell/mobile/Composer.tsx

@@ -4,8 +4,10 @@ import {Animated, Easing, StyleSheet, View} from 'react-native'
 import {ComposePost} from '../../com/composer/ComposePost'
 import {ComposerOpts} from '../../../state/models/shell-ui'
 import {useAnimatedValue} from '../../lib/useAnimatedValue'
+import {register} from 'react-native-bundle-splitter'
 
-export const Composer = observer(
+export const Composer = register(
+  observer(
     ({
       active,
       winHeight,
@@ -60,6 +62,7 @@ export const Composer = observer(
         </Animated.View>
       )
     },
+  ),
 )
 
 const styles = StyleSheet.create({

yarn.lock

@@ -10163,6 +10163,11 @@ react-native-appstate-hook@^1.0.6:
   resolved "https://registry.yarnpkg.com/react-native-appstate-hook/-/react-native-appstate-hook-1.0.6.tgz#cbc16e7b89cfaea034cabd999f00e99053cabd06"
   integrity sha512-0hPVyf5yLxCSVrrNEuGqN1ZnSSj3Ye2gZex0NtcK/AHYwMc0rXWFNZjBKOoZSouspqu3hXBbQ6NOUSTzrME1AQ==
 
+react-native-bundle-splitter@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-native-bundle-splitter/-/react-native-bundle-splitter-2.2.3.tgz#aff144fb1b7c9dbd2da334b318b86032869a7755"
+  integrity sha512-cxKb8/NUKTqAZ+nHp9PoTdRCI6+tWlUUP0Mq0UKgpVbD0KaxRIXnvdSM8Fp9ctiMyB1rk6izZzQkTJ+GcDXQLA==
+
 react-native-codegen@^0.0.17:
   version "0.0.17"
   resolved "https://registry.yarnpkg.com/react-native-codegen/-/react-native-codegen-0.0.17.tgz#83fb814d94061cbd46667f510d2ddba35ffb50ac"