Revert "using register"

This reverts commit e28093ec35.

package.json

@@ -34,7 +34,6 @@
     "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,14 +8,13 @@ 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 const Autocomplete = register(function Autocomplete({
+export function Autocomplete({
   active,
   items,
   onSelect,
@@ -53,7 +52,7 @@ export const Autocomplete = register(function Autocomplete({
       ))}
     </Animated.View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/composer/ComposePost.tsx

@@ -30,21 +30,19 @@ 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 = register(
+export const ComposePost = observer(function ComposePost({
-  observer(function ComposePost({
   replyTo,
   onPost,
   onClose,
-  }: {
+}: {
   replyTo?: ComposerOpts['replyTo']
   onPost?: ComposerOpts['onPost']
   onClose: () => void
-  }) {
+}) {
   const store = useStores()
   const textInput = useRef<TextInput>(null)
   const [isProcessing, setIsProcessing] = useState(false)
@@ -133,8 +131,7 @@ export const ComposePost = register(
   }
 
   const canPost = text.length <= MAX_TEXT_LENGTH
-    const progressColor =
+  const progressColor = text.length > DANGER_TEXT_LENGTH ? '#e60000' : undefined
-      text.length > DANGER_TEXT_LENGTH ? '#e60000' : undefined
 
   const selectTextInputLayout =
     selectedPhotos.length !== 0
@@ -290,8 +287,7 @@ export const ComposePost = register(
       </SafeAreaView>
     </KeyboardAvoidingView>
   )
-  }),
+})
-)
 
 const atPrefixRegex = /@([a-z0-9\.]*)$/i
 function extractTextAutocompletePrefix(text: string) {

src/view/com/composer/PhotoCarouselPicker.tsx

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

src/view/com/composer/Prompt.tsx

@@ -3,9 +3,8 @@ 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 const ComposePrompt = register(function ComposePrompt({
+export function ComposePrompt({
   noAvi = false,
   text = "What's up?",
   btn = 'Post',
@@ -42,7 +41,7 @@ export const ComposePrompt = register(function ComposePrompt({
       </View>
     </TouchableOpacity>
   )
-})
+}
 
 const styles = StyleSheet.create({
   container: {

src/view/com/composer/SelectedPhoto.tsx

@@ -2,16 +2,14 @@ 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 = register(
+export const SelectedPhoto = ({
-  ({
   selectedPhotos,
   setSelectedPhotos,
-  }: {
+}: {
   selectedPhotos: string[]
   setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
-  }) => {
+}) => {
   const imageStyle =
     selectedPhotos.length === 1
       ? styles.image250
@@ -50,8 +48,7 @@ export const SelectedPhoto = register(
         ))}
     </View>
   ) : null
-  },
+}
-)
 
 const styles = StyleSheet.create({
   imageContainer: {

src/view/com/discover/SuggestedFollows.tsx

@@ -22,10 +22,8 @@ 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 = register(
+export const SuggestedFollows = observer(
-  observer(
   ({
     onNoSuggestions,
     asLinks,
@@ -45,9 +43,7 @@ export const SuggestedFollows = register(
       console.log('Fetching suggested actors')
       view
         .setup()
-          .catch((err: any) =>
+        .catch((err: any) => console.error('Failed to fetch suggestions', err))
-            console.error('Failed to fetch suggestions', err),
-          )
     }, [view])
 
     useEffect(() => {
@@ -59,9 +55,7 @@ export const SuggestedFollows = register(
     const onPressTryAgain = () =>
       view
         .setup()
-          .catch((err: any) =>
+        .catch((err: any) => console.error('Failed to fetch suggestions', err))
-            console.error('Failed to fetch suggestions', err),
-          )
 
     const onPressFollow = async (item: SuggestedActor) => {
       try {
@@ -134,7 +128,6 @@ export const SuggestedFollows = register(
       </View>
     )
   },
-  ),
 )
 
 const User = ({

src/view/com/notifications/Feed.tsx

@@ -6,18 +6,16 @@ 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 = register(
+export const Feed = observer(function Feed({
-  observer(function Feed({
   view,
   onPressTryAgain,
-  }: {
+}: {
   view: NotificationsViewModel
   onPressTryAgain?: () => void
-  }) {
+}) {
   // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf
   //   VirtualizedList: You have a large list that is slow to update - make sure your
   //   renderItem function renders components that follow React performance best practices
@@ -71,5 +69,4 @@ export const Feed = register(
       )}
     </View>
   )
-  }),
+})
-)

src/view/com/notifications/FeedItem.tsx

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

src/view/com/notifications/InviteAccepter.tsx

@@ -9,13 +9,8 @@ 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 const InviteAccepter = register(function InviteAccepter({
+export function InviteAccepter({item}: {item: NotificationsViewItemModel}) {
-  item,
-}: {
-  item: NotificationsViewItemModel
-}) {
   const store = useStores()
   const [confirmationUri, setConfirmationUri] = useState<string>('')
   const isMember =
@@ -75,7 +70,7 @@ export const InviteAccepter = register(function InviteAccepter({
       )}
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   container: {

src/view/com/onboard/FeatureExplainer.tsx

@@ -16,7 +16,6 @@ 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}>
@@ -80,7 +79,7 @@ const SCENE_MAP = {
 }
 const renderScene = SceneMap(SCENE_MAP)
 
-export const FeatureExplainer = register(() => {
+export const FeatureExplainer = () => {
   const layout = useWindowDimensions()
   const store = useStores()
   const [index, setIndex] = useState(0)
@@ -154,7 +153,7 @@ export const FeatureExplainer = register(() => {
       </View>
     </SafeAreaView>
   )
-})
+}
 
 const styles = StyleSheet.create({
   container: {

src/view/com/onboard/Follows.tsx

@@ -10,10 +10,8 @@ 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 = register(
+export const Follows = observer(() => {
-  observer(() => {
   const store = useStores()
 
   const onNoSuggestions = () => {
@@ -37,8 +35,7 @@ export const Follows = register(
       </View>
     </SafeAreaView>
   )
-  }),
+})
-)
 
 const styles = StyleSheet.create({
   container: {

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

@@ -10,10 +10,12 @@ 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 = register(
+export const PostRepostedBy = observer(function PostRepostedBy({
-  observer(function PostRepostedBy({uri}: {uri: string}) {
+  uri,
+}: {
+  uri: string
+}) {
   const store = useStores()
   const [view, setView] = useState<RepostedByViewModel | undefined>()
 
@@ -77,8 +79,7 @@ export const PostRepostedBy = register(
       />
     </View>
   )
-  }),
+})
-)
 
 const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
   return (

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

@@ -8,16 +8,14 @@ import {
 import {useStores} from '../../../state'
 import {PostThreadItem} from './PostThreadItem'
 import {ErrorMessage} from '../util/ErrorMessage'
-import {register} from 'react-native-bundle-splitter'
 
-export const PostThread = register(
+export const PostThread = observer(function PostThread({
-  observer(function PostThread({
   uri,
   view,
-  }: {
+}: {
   uri: string
   view: PostThreadViewModel
-  }) {
+}) {
   const ref = useRef<FlatList>(null)
   const posts = view.thread ? Array.from(flattenThread(view.thread)) : []
   const onRefresh = () => {
@@ -88,8 +86,7 @@ export const PostThread = register(
       contentContainerStyle={{paddingBottom: 200}}
     />
   )
-  }),
+})
-)
 
 function* flattenThread(
   post: PostThreadViewPostModel,

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

@@ -18,19 +18,17 @@ 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 = register(
+export const PostThreadItem = observer(function PostThreadItem({
-  observer(function PostThreadItem({
   item,
   onPostReply,
-  }: {
+}: {
   item: PostThreadViewPostModel
   onPostReply: () => void
-  }) {
+}) {
   const store = useStores()
   const [deleted, setDeleted] = useState(false)
   const record = item.record as unknown as PostType.Record
@@ -162,10 +160,7 @@ export const PostThreadItem = register(
           </View>
           <View style={[s.pl10, s.pr10, s.pb10]}>
             <View
-                style={[
+              style={[styles.postTextContainer, styles.postTextLargeContainer]}>
-                  styles.postTextContainer,
-                  styles.postTextLargeContainer,
-                ]}>
               <RichText
                 text={record.text}
                 entities={record.entities}
@@ -282,10 +277,7 @@ export const PostThreadItem = register(
                 style={[styles.postText]}
               />
             </View>
-              <PostEmbeds
+            <PostEmbeds entities={record.entities} style={{marginBottom: 10}} />
-                entities={record.entities}
-                style={{marginBottom: 10}}
-              />
             <PostCtrls
               replyCount={item.replyCount}
               repostCount={item.repostCount}
@@ -301,8 +293,7 @@ export const PostThreadItem = register(
       </Link>
     )
   }
-  }),
+})
-)
 
 const styles = StyleSheet.create({
   outer: {

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

@@ -10,16 +10,14 @@ 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 = register(
+export const PostVotedBy = observer(function PostVotedBy({
-  observer(function PostVotedBy({
   uri,
   direction,
-  }: {
+}: {
   uri: string
   direction: 'up' | 'down'
-  }) {
+}) {
   const store = useStores()
   const [view, setView] = useState<VotesViewModel | undefined>()
 
@@ -31,9 +29,7 @@ export const PostVotedBy = register(
     console.log('Fetching voted by', uri)
     const newView = new VotesViewModel(store, {uri, direction})
     setView(newView)
-      newView
+    newView.setup().catch(err => console.error('Failed to fetch voted by', err))
-        .setup()
-        .catch(err => console.error('Failed to fetch voted by', err))
   }, [uri, view?.params.uri, store])
 
   const onRefresh = () => {
@@ -83,8 +79,7 @@ export const PostVotedBy = register(
       />
     </View>
   )
-  }),
+})
-)
 
 const LikedByItem = ({item}: {item: VotesViewItemModel}) => {
   return (

src/view/com/post/Post.tsx

@@ -22,18 +22,16 @@ 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 = register(
+export const Post = observer(function Post({
-  observer(function Post({
   uri,
   initView,
   style,
-  }: {
+}: {
   uri: string
   initView?: PostThreadViewModel
   style?: StyleProp<ViewStyle>
-  }) {
+}) {
   const store = useStores()
   const [view, setView] = useState<PostThreadViewModel | undefined>(initView)
   const [deleted, setDeleted] = useState(false)
@@ -158,11 +156,7 @@ export const Post = register(
           />
           {replyHref !== '' && (
             <View style={[s.flexRow, s.mb2, {alignItems: 'center'}]}>
-                <FontAwesomeIcon
+              <FontAwesomeIcon icon="reply" size={9} style={[s.gray4, s.mr5]} />
-                  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
@@ -194,8 +188,7 @@ export const Post = register(
       </View>
     </Link>
   )
-  }),
+})
-)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/post/PostText.tsx

@@ -5,10 +5,14 @@ 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 = register(
+export const PostText = observer(function PostText({
-  observer(function PostText({uri, style}: {uri: string; style?: StyleProp}) {
+  uri,
+  style,
+}: {
+  uri: string
+  style?: StyleProp
+}) {
   const store = useStores()
   const [model, setModel] = useState<PostModel | undefined>()
 
@@ -50,5 +54,4 @@ export const PostText = register(
       <Text style={style}>{model.text}</Text>
     </View>
   )
-  }),
+})
-)

src/view/com/posts/Feed.tsx

@@ -7,25 +7,23 @@ 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 = register(
+export const Feed = observer(function Feed({
-  observer(function Feed({
   feed,
   style,
   scrollElRef,
   onPressCompose,
   onPressTryAgain,
-  }: {
+}: {
   feed: FeedModel
   style?: StyleProp<ViewStyle>
   scrollElRef?: MutableRefObject<FlatList<any> | null>
   onPressCompose: () => void
   onPressTryAgain?: () => void
-  }) {
+}) {
   // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf
   //   VirtualizedList: You have a large list that is slow to update - make sure your
   //   renderItem function renders components that follow React performance best practices
@@ -85,5 +83,4 @@ export const Feed = register(
       )}
     </View>
   )
-  }),
+})
-)

src/view/com/posts/FeedItem.tsx

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

src/view/com/profile/ProfileCard.tsx

@@ -3,9 +3,8 @@ 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 const ProfileCard = register(function ProfileCard({
+export function ProfileCard({
   did,
   handle,
   displayName,
@@ -49,7 +48,7 @@ export const ProfileCard = register(function ProfileCard({
       </View>
     </Link>
   )
-})
+}
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/profile/ProfileFollowers.tsx

@@ -10,10 +10,12 @@ 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 = register(
+export const ProfileFollowers = observer(function ProfileFollowers({
-  observer(function ProfileFollowers({name}: {name: string}) {
+  name,
+}: {
+  name: string
+}) {
   const store = useStores()
   const [view, setView] = useState<UserFollowersViewModel | undefined>()
 
@@ -75,8 +77,7 @@ export const ProfileFollowers = register(
       />
     </View>
   )
-  }),
+})
-)
 
 const User = ({item}: {item: FollowerItem}) => {
   return (

src/view/com/profile/ProfileFollows.tsx

@@ -10,10 +10,12 @@ 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 = register(
+export const ProfileFollows = observer(function ProfileFollows({
-  observer(function ProfileFollows({name}: {name: string}) {
+  name,
+}: {
+  name: string
+}) {
   const store = useStores()
   const [view, setView] = useState<UserFollowsViewModel | undefined>()
 
@@ -75,8 +77,7 @@ export const ProfileFollows = register(
       />
     </View>
   )
-  }),
+})
-)
 
 const User = ({item}: {item: FollowItem}) => {
   return (

src/view/com/profile/ProfileHeader.tsx

@@ -21,16 +21,14 @@ 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 = register(
+export const ProfileHeader = observer(function ProfileHeader({
-  observer(function ProfileHeader({
   view,
   onRefreshAll,
-  }: {
+}: {
   view: ProfileViewModel
   onRefreshAll: () => void
-  }) {
+}) {
   const store = useStores()
   const isMember = useMemo(
     () => view.isScene && view.myState.member,
@@ -41,7 +39,7 @@ export const ProfileHeader = register(
     store.nav.tab.goBack()
   }
   const onPressSearch = () => {
-      store.nav.navigate('/search')
+    store.nav.navigate(`/search`)
   }
   const onPressToggleFollow = () => {
     view?.toggleFollowing().then(
@@ -74,7 +72,7 @@ export const ProfileHeader = register(
     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,
       ),
     )
@@ -85,7 +83,7 @@ export const ProfileHeader = register(
         did: store.me.did || '',
         rkey: new AtUri(view.myState.member).rkey,
       })
-        Toast.show('Scene left')
+      Toast.show(`Scene left`)
     }
     onRefreshAll()
   }
@@ -268,10 +266,7 @@ export const ProfileHeader = register(
         ) : undefined}
         {view.isScene && view.creator ? (
           <View style={styles.relationshipsLine}>
-              <FontAwesomeIcon
+            <FontAwesomeIcon icon={['far', 'user']} style={[s.gray5, s.mr5]} />
-                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]}
@@ -311,8 +306,7 @@ export const ProfileHeader = register(
       ) : undefined}
     </View>
   )
-  }),
+})
-)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/profile/ProfileMembers.tsx

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

src/view/com/util/DropdownBtn.tsx

@@ -17,7 +17,6 @@ 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}
 
@@ -27,18 +26,17 @@ export interface DropdownItem {
   onPress: () => void
 }
 
-export const DropdownBtn = register(
+export function DropdownBtn({
-  ({
   style,
   items,
   menuWidth,
   children,
-  }: {
+}: {
   style?: StyleProp<ViewStyle>
   items: DropdownItem[]
   menuWidth?: number
   children?: React.ReactNode
-  }) => {
+}) {
   const ref = useRef<TouchableOpacity>(null)
 
   const onPress = () => {
@@ -73,8 +71,7 @@ export const DropdownBtn = register(
       {children}
     </TouchableOpacity>
   )
-  },
+}
-)
 
 export function PostDropdownBtn({
   style,

src/view/com/util/EmptyState.tsx

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

src/view/com/util/ErrorMessage.tsx

@@ -10,26 +10,23 @@ 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 const ErrorMessage = register(
+export function ErrorMessage({
-  ({
   message,
   numberOfLines,
   dark,
   style,
   onPressTryAgain,
-  }: {
+}: {
   message: string
   numberOfLines?: number
   dark?: boolean
   style?: StyleProp<ViewStyle>
   onPressTryAgain?: () => void
-  }) => {
+}) {
   const inner = (
     <>
-        <View
+      <View style={[styles.errorIcon, dark ? styles.darkErrorIcon : undefined]}>
-          style={[styles.errorIcon, dark ? styles.darkErrorIcon : undefined]}>
         <FontAwesomeIcon
           icon="exclamation"
           style={{color: dark ? colors.red3 : colors.white}}
@@ -64,8 +61,7 @@ export const ErrorMessage = register(
     )
   }
   return <View style={[styles.outer, style]}>{inner}</View>
-  },
+}
-)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/util/ErrorScreen.tsx

@@ -2,20 +2,18 @@ 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 const ErrorScreen = register(
+export function ErrorScreen({
-  ({
   title,
   message,
   details,
   onPressTryAgain,
-  }: {
+}: {
   title: string
   message: string
   details?: string
   onPressTryAgain?: () => void
-  }) => {
+}) {
   return (
     <View style={styles.outer}>
       <View style={styles.errorIconContainer}>
@@ -44,8 +42,7 @@ export const ErrorScreen = register(
       )}
     </View>
   )
-  },
+}
-)
 
 const styles = StyleSheet.create({
   outer: {

src/view/com/util/Link.tsx

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

src/view/com/util/LoadingPlaceholder.tsx

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

src/view/com/util/Picker.tsx

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

src/view/com/util/PostCtrls.tsx

@@ -4,7 +4,6 @@ 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
@@ -22,7 +21,7 @@ const redgray = '#7A6161'
 const sRedgray = {color: redgray}
 const HITSLOP = {top: 10, left: 10, bottom: 10, right: 10}
 
-export const PostCtrls = register((opts: PostCtrlsOpts) => {
+export function PostCtrls(opts: PostCtrlsOpts) {
   const interp1 = useAnimatedValue(0)
   const interp2 = useAnimatedValue(0)
 
@@ -169,7 +168,7 @@ export const PostCtrls = register((opts: PostCtrlsOpts) => {
       <View style={s.flex1}></View>
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   ctrls: {

src/view/com/util/PostEmbeds.tsx

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

src/view/com/util/PostMeta.tsx

@@ -5,7 +5,6 @@ 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
@@ -19,7 +18,7 @@ interface PostMetaOpts {
   onDeletePost: () => void
 }
 
-export const PostMeta = register((opts: PostMetaOpts) => {
+export function PostMeta(opts: PostMetaOpts) {
   return (
     <View style={styles.meta}>
       <Link
@@ -48,7 +47,7 @@ export const PostMeta = register((opts: PostMetaOpts) => {
       </PostDropdownBtn>
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   meta: {

src/view/com/util/RichText.tsx

@@ -3,7 +3,6 @@ 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 = {
@@ -12,18 +11,17 @@ type Entity = {
   value: string
 }
 
-export const RichText = register(
+export function RichText({
-  ({
   text,
   entities,
   style,
   numberOfLines,
-  }: {
+}: {
   text: string
   entities?: Entity[]
   style?: StyleProp<TextStyle>
   numberOfLines?: number
-  }) => {
+}) {
   if (!entities?.length) {
     if (/^\p{Extended_Pictographic}+$/u.test(text) && text.length <= 5) {
       style = {
@@ -34,11 +32,8 @@ export const RichText = register(
     }
     return <Text style={style}>{text}</Text>
   }
-    if (!style) {
+  if (!style) style = []
-      style = []
+  else if (!Array.isArray(style)) style = [style]
-    } else if (!Array.isArray(style)) {
-      style = [style]
-    }
   entities.sort(sortByIndex)
   const segments = Array.from(toSegments(text, entities))
   const els = []
@@ -74,8 +69,7 @@ export const RichText = register(
       {els}
     </Text>
   )
-  },
+}
-)
 
 function sortByIndex(a: Entity, b: Entity) {
   return a.index.start - b.index.start

src/view/com/util/Selector.tsx

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

src/view/com/util/UserAvatar.tsx

@@ -10,22 +10,20 @@ 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 const UserAvatar = register(
+export function UserAvatar({
-  ({
   size,
   handle,
   avatar,
   displayName,
   onSelectNewAvatar,
-  }: {
+}: {
   size: number
   handle: string
   displayName: string | undefined
   avatar?: string | null
   onSelectNewAvatar?: (img: PickedImage) => void
-  }) => {
+}) {
   const initials = getInitials(displayName || handle)
   const gradient = getGradient(handle)
 
@@ -115,8 +113,7 @@ export const UserAvatar = register(
   ) : (
     renderSvg(size, initials)
   )
-  },
+}
-)
 
 function getInitials(str: string): string {
   const tokens = str

src/view/com/util/UserBanner.tsx

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

src/view/com/util/UserInfoText.tsx

@@ -4,10 +4,8 @@ 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 const UserInfoText = register(
+export function UserInfoText({
-  ({
   did,
   attr,
   loading,
@@ -15,7 +13,7 @@ export const UserInfoText = register(
   prefix,
   style,
   asLink,
-  }: {
+}: {
   did: string
   attr?: keyof GetProfile.OutputSchema
   loading?: string
@@ -23,7 +21,7 @@ export const UserInfoText = register(
   prefix?: string
   style?: StyleProp<TextStyle>
   asLink?: boolean
-  }) => {
+}) {
   attr = attr || 'handle'
   loading = loading || '...'
   failed = failed || 'user'
@@ -38,15 +36,11 @@ export const UserInfoText = register(
     let aborted = false
     store.profiles.getProfile(did).then(
       v => {
-          if (aborted) {
+        if (aborted) return
-            return
-          }
         setProfile(v.data)
       },
       _err => {
-          if (aborted) {
+        if (aborted) return
-            return
-          }
         setFailed(true)
       },
     )
@@ -82,5 +76,4 @@ export const UserInfoText = register(
   }
 
   return inner
-  },
+}
-)

src/view/com/util/ViewHeader.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {observer} from 'mobx-react-lite'
 import {
   ActivityIndicator,
   StyleSheet,
@@ -10,22 +11,19 @@ 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 = register(
+export const ViewHeader = observer(function ViewHeader({
-  observer(
-    ({
   title,
   subtitle,
   onPost,
-    }: {
+}: {
   title: string
   subtitle?: string
   onPost?: () => void
-    }) => {
+}) {
   const store = useStores()
   const onPressBack = () => {
     store.nav.tab.goBack()
@@ -37,7 +35,7 @@ export const ViewHeader = register(
     store.shell.openComposer({onPost})
   }
   const onPressSearch = () => {
-        store.nav.navigate('/search')
+    store.nav.navigate(`/search`)
   }
   const onPressReconnect = () => {
     store.session.connect().catch(e => {
@@ -122,9 +120,7 @@ export const ViewHeader = register(
       ) : undefined}
     </>
   )
-    },
+})
-  ),
-)
 
 const styles = StyleSheet.create({
   header: {

src/view/com/util/ViewSelector.tsx

@@ -4,14 +4,12 @@ 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 const ViewSelector = register(
+export function ViewSelector({
-  ({
   sections,
   items,
   refreshing,
@@ -21,7 +19,7 @@ export const ViewSelector = register(
   onSelectView,
   onRefresh,
   onEndReached,
-  }: {
+}: {
   sections: string[]
   items: any[]
   refreshing?: boolean
@@ -31,7 +29,7 @@ export const ViewSelector = register(
   onSelectView?: (viewIndex: number) => void
   onRefresh?: () => void
   onEndReached?: (info: {distanceFromEnd: number}) => void
-  }) => {
+}) {
   const store = useStores()
   const [selectedIndex, setSelectedIndex] = useState<number>(0)
   const panX = useAnimatedValue(0)
@@ -92,7 +90,6 @@ export const ViewSelector = register(
       />
     </HorzSwipe>
   )
-  },
+}
-)
 
 const styles = StyleSheet.create({})

src/view/screens/Contacts.tsx

@@ -7,9 +7,8 @@ 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 = register(({navIdx, visible, params}: ScreenParams) => {
+export const Contacts = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const selectorInterp = useAnimatedValue(0)
 
@@ -51,7 +50,7 @@ export const Contacts = register(({navIdx, visible, params}: ScreenParams) => {
       {!!store.me.handle && <ProfileFollowsComponent name={store.me.handle} />}
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   section: {

src/view/screens/Home.tsx

@@ -9,12 +9,14 @@ 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 = register(
+export const Home = observer(function Home({
-  observer(({navIdx, visible, scrollElRef}: ScreenParams) => {
+  navIdx,
+  visible,
+  scrollElRef,
+}: ScreenParams) {
   const store = useStores()
   const [hasSetup, setHasSetup] = useState<boolean>(false)
   const {appState} = useAppState({
@@ -55,9 +57,7 @@ export const Home = register(
       store.nav.setTitle(navIdx, 'Home')
       console.log('Fetching home feed')
       defaultFeedView.setup().then(() => {
-          if (aborted) {
+        if (aborted) return
-            return
-          }
         setHasSetup(true)
       })
     }
@@ -107,8 +107,7 @@ export const Home = register(
       ) : undefined}
     </View>
   )
-  }),
+})
-)
 
 const styles = StyleSheet.create({
   loadLatest: {

src/view/screens/Login.tsx

@@ -27,7 +27,6 @@ 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,
@@ -590,12 +589,6 @@ 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,9 +2,8 @@ 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 = register(() => {
+export const NotFound = () => {
   const stores = useStores()
   return (
     <View>
@@ -20,4 +19,4 @@ export const NotFound = register(() => {
       </View>
     </View>
   )
-})
+}

src/view/screens/Notifications.tsx

@@ -5,9 +5,8 @@ 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 = register(({navIdx, visible}: ScreenParams) => {
+export const Notifications = ({navIdx, visible}: ScreenParams) => {
   const store = useStores()
 
   useEffect(() => {
@@ -37,4 +36,4 @@ export const Notifications = register(({navIdx, visible}: ScreenParams) => {
       <Feed view={store.me.notifications} onPressTryAgain={onPressTryAgain} />
     </View>
   )
-})
+}

src/view/screens/Onboard.tsx

@@ -5,10 +5,8 @@ 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 = register(
+export const Onboard = observer(() => {
-  observer(() => {
   const store = useStores()
 
   useEffect(() => {
@@ -32,5 +30,4 @@ export const Onboard = register(
       <Com />
     </View>
   )
-  }),
+})
-)

src/view/screens/PostDownvotedBy.tsx

@@ -5,10 +5,8 @@ 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 = register(
+export const PostDownvotedBy = ({navIdx, visible, params}: ScreenParams) => {
-  ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -25,5 +23,4 @@ export const PostDownvotedBy = register(
       <PostLikedByComponent uri={uri} direction="down" />
     </View>
   )
-  },
+}
-)

src/view/screens/PostRepostedBy.tsx

@@ -5,10 +5,8 @@ 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 = register(
+export const PostRepostedBy = ({navIdx, visible, params}: ScreenParams) => {
-  ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -25,5 +23,4 @@ export const PostRepostedBy = register(
       <PostRepostedByComponent uri={uri} />
     </View>
   )
-  },
+}
-)

src/view/screens/PostThread.tsx

@@ -6,10 +6,8 @@ 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 = register(
+export const PostThread = ({navIdx, visible, params}: ScreenParams) => {
-  ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const [viewSubtitle, setViewSubtitle] = useState<string>(`by ${name}`)
@@ -57,5 +55,4 @@ export const PostThread = register(
       </View>
     </View>
   )
-  },
+}
-)

src/view/screens/PostUpvotedBy.tsx

@@ -5,10 +5,8 @@ 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 = register(
+export const PostUpvotedBy = ({navIdx, visible, params}: ScreenParams) => {
-  ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name, rkey} = params
   const uri = makeRecordUri(name, 'app.bsky.feed.post', rkey)
@@ -25,5 +23,4 @@ export const PostUpvotedBy = register(
       <PostLikedByComponent uri={uri} direction="up" />
     </View>
   )
-  },
+}
-)

src/view/screens/Profile.tsx

@@ -18,14 +18,12 @@ 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 = register(
+export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
-  observer(({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const [hasSetup, setHasSetup] = useState<boolean>(false)
   const uiState = useMemo(
@@ -45,9 +43,7 @@ export const Profile = register(
       console.log('Fetching profile for', params.name)
       store.nav.setTitle(navIdx, params.name)
       uiState.setup().then(() => {
-          if (aborted) {
+        if (aborted) return
-            return
-          }
         setHasSetup(true)
       })
     }
@@ -79,10 +75,10 @@ export const Profile = register(
     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`)
         },
       ),
     )
@@ -258,8 +254,7 @@ export const Profile = register(
       )}
     </View>
   )
-  }),
+})
-)
 
 const styles = StyleSheet.create({
   container: {

src/view/screens/ProfileFollowers.tsx

@@ -4,10 +4,8 @@ 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 = register(
+export const ProfileFollowers = ({navIdx, visible, params}: ScreenParams) => {
-  ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 
@@ -23,5 +21,4 @@ export const ProfileFollowers = register(
       <ProfileFollowersComponent name={name} />
     </View>
   )
-  },
+}
-)

src/view/screens/ProfileFollows.tsx

@@ -4,10 +4,8 @@ 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 = register(
+export const ProfileFollows = ({navIdx, visible, params}: ScreenParams) => {
-  ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 
@@ -23,5 +21,4 @@ export const ProfileFollows = register(
       <ProfileFollowsComponent name={name} />
     </View>
   )
-  },
+}
-)

src/view/screens/ProfileMembers.tsx

@@ -4,10 +4,8 @@ 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 = register(
+export const ProfileMembers = ({navIdx, visible, params}: ScreenParams) => {
-  ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const {name} = params
 
@@ -23,5 +21,4 @@ export const ProfileMembers = register(
       <ProfileMembersComponent name={name} />
     </View>
   )
-  },
+}
-)

src/view/screens/Search.tsx

@@ -16,9 +16,8 @@ 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 = register(({navIdx, visible, params}: ScreenParams) => {
+export const Search = ({navIdx, visible, params}: ScreenParams) => {
   const store = useStores()
   const textInput = useRef<TextInput>(null)
   const [query, setQuery] = useState<string>('')
@@ -93,7 +92,7 @@ export const Search = register(({navIdx, visible, params}: ScreenParams) => {
       </View>
     </View>
   )
-})
+}
 
 const styles = StyleSheet.create({
   container: {

src/view/screens/Settings.tsx

@@ -7,10 +7,11 @@ 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 = register(
+export const Settings = observer(function Settings({
-  observer(function Settings({navIdx, visible}: ScreenParams) {
+  navIdx,
+  visible,
+}: ScreenParams) {
   const store = useStores()
 
   useEffect(() => {
@@ -54,8 +55,7 @@ export const Settings = register(
       </View>
     </View>
   )
-  }),
+})
-)
 
 const styles = StyleSheet.create({
   title: {

src/view/shell/mobile/Composer.tsx

@@ -4,10 +4,8 @@ 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 = register(
+export const Composer = observer(
-  observer(
   ({
     active,
     winHeight,
@@ -62,7 +60,6 @@ export const Composer = register(
       </Animated.View>
     )
   },
-  ),
 )
 
 const styles = StyleSheet.create({

yarn.lock

@@ -10163,11 +10163,6 @@ 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"