Menu or Drawer component can not be according on pageinit

[Valar103769]

 expo start --ios 

these component is invalid when project start, bug it normal when modily component, like add new Item to menu, the newitem is correct, and oldMenu is invalid

HomeScreen

export default function HomeScreen({ navigation }: RootDrawerScreenProps<'Home'>) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <SideMenuDrawer />
      <Button onPress={() => navigation.navigate('HomeScreen')} title="HomeScreen" />
    </View>
  )
}

SideMenuDrawer

import { DrawerContentComponentProps } from '@react-navigation/drawer'
import { FC } from 'react'
import * as React from 'react'
import { Avatar, Drawer, DrawerGroup, DrawerItem, Icon, Text } from '@ui-kitten/components'
import { SafeAreaLayout } from 'components/SafeAreaLayout'
import { View, StyleSheet } from 'react-native'

const SmartphoneIcon = (props) => <Icon {...props} name="smartphone-outline" />

const BrowserIcon = (props) => <Icon {...props} name="browser-outline" />

const ColorPaletteIcon = (props) => <Icon {...props} name="color-palette-outline" />

const StarIcon = (props) => <Icon {...props} name="star" />

export const SideMenuDrawer: FC<DrawerContentComponentProps> = (props) => {
  // console.log('SideMenuDrawer', props)

  const [selectedIndex, setSelectedIndex] = React.useState<any>(null)

  return (
    <Drawer
      header={renderHeader}
      selectedIndex={selectedIndex}
      onSelect={(indexPath) => {
        setSelectedIndex(indexPath)
      }}
      {...props}
    >
      <DrawerGroup title="菜单1" accessoryLeft={SmartphoneIcon} key={1}>
        <DrawerItem title="1-1" accessoryLeft={StarIcon} />
        <DrawerItem title="1-2" accessoryLeft={StarIcon} />
      </DrawerGroup>

      <DrawerGroup title="菜单2" accessoryLeft={BrowserIcon} key={2}>
        <DrawerItem title="2-1" accessoryLeft={StarIcon} />
        <DrawerItem title="2-2" accessoryLeft={StarIcon} />
        <DrawerItem title="2-3" accessoryLeft={StarIcon} />
      </DrawerGroup>
      <DrawerGroup title="菜单3" accessoryLeft={ColorPaletteIcon} key={3}>
        <DrawerItem title="3-1" accessoryLeft={StarIcon} />
        <DrawerItem title="3-2" accessoryLeft={StarIcon} />
      </DrawerGroup>
      <DrawerGroup title="菜单4" accessoryLeft={ColorPaletteIcon} key={4}>
        <DrawerItem title="4-1" accessoryLeft={StarIcon} />
        <DrawerItem title="4-2" accessoryLeft={StarIcon} />
      </DrawerGroup>
      <DrawerGroup title="菜单5" accessoryLeft={ColorPaletteIcon} key={5}>
        <DrawerItem title="5-1" accessoryLeft={StarIcon} />
        <DrawerItem title="5-2" accessoryLeft={StarIcon} />
      </DrawerGroup>
      <DrawerGroup title="菜单6" accessoryLeft={ColorPaletteIcon} key={6}>
        <DrawerItem title="6-1" accessoryLeft={StarIcon} />
        <DrawerItem title="6-2" accessoryLeft={StarIcon} />
      </DrawerGroup>
    </Drawer>
  )

  function renderHeader() {
    return (
      <SafeAreaLayout insets="top" level="2" style={styles.header}>
        <View style={styles.profileContainer}>
          <Avatar size="giant" source={require('assets/images/icon.png')} />
          <Text style={styles.profileName} category="h6">
            Hello World
          </Text>
        </View>
      </SafeAreaLayout>
    )
  }
}

const styles = StyleSheet.create({
  header: {
    height: 128,
    paddingHorizontal: 16,
    justifyContent: 'center',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    marginLeft: 16,
  },
  profileContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  profileName: {
    marginHorizontal: 16,
  },
})

export default SideMenuDrawer

[Valar103769]

@artyorsh

[greenfrvr]

@Valar103769 can you please share more details, what's the issue here? it's not clear from description and screenshot what exactly is invalid on project start.