refactor: remove WelcomePage

 import React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
+import {
+  NavigationContainer,
+  RouteProp,
+  TabNavigationState,
+} from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { createStackNavigator } from '@react-navigation/stack';
-import Fontisto from 'react-native-vector-icons/Fontisto';
+import {
+  createStackNavigator,
+  HeaderStyleInterpolators,
+} from '@react-navigation/stack';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 import { MainTabParamList, MainStackParamList } from '../type/Navigation';
-import WelcomePage from './WelcomePage';
 import SystemInfo from './SystemInfo';
 import DesignList from './DesignList';
 import { useDynamicValue } from 'react-native-dark-mode';
 import { colorPreset } from '../design';
 import RNDeviceInfoList from './RNDeviceInfo';
+import { StyleSheet } from 'react-native';
 
 const MainTab = createBottomTabNavigator<MainTabParamList>();
 
+function getTabHeader(
+  route: RouteProp<MainStackParamList, 'MainTab'> & {
+    state?: TabNavigationState;
+  }
+) {
+  const { state } = route;
+  if (!state) return 'SystemInfo';
+  const { routeNames, index } = state;
+  const routeName = routeNames[index] as keyof MainTabParamList;
+  return routeName;
+}
+
 const Home = () => {
   const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary);
   const tintColor = useDynamicValue(colorPreset.linkColor);
@@ -25,8 +43,6 @@ const Home = () => {
         return {
           tabBarIcon: ({ focused, size, color }) => {
             switch (routeName) {
-              case 'WelcomePage':
-                return <Fontisto size={size} color={color} name={'react'} />;
               case 'SystemInfo':
                 return (
                   <Ionicons
@@ -61,7 +77,6 @@ const Home = () => {
         },
       }}
     >
-      <MainTab.Screen name="WelcomePage" component={WelcomePage} />
       <MainTab.Screen name="SystemInfo" component={SystemInfo} />
       <MainTab.Screen name="DesignList" component={DesignList} />
     </MainTab.Navigator>
@@ -71,10 +86,30 @@ const Home = () => {
 const MainStack = createStackNavigator<MainStackParamList>();
 
 export default () => {
+  const backgroundColor = useDynamicValue(colorPreset.backgroundColor.primary);
+  const primaryLabelColor = useDynamicValue(colorPreset.labelColor.primary);
+  const opaqueSeparator = useDynamicValue(colorPreset.separator.opaque);
   return (
     <NavigationContainer>
-      <MainStack.Navigator>
-        <MainStack.Screen name="MainTab" component={Home} />
+      <MainStack.Navigator
+        screenOptions={{
+          headerStyle: {
+            backgroundColor,
+            shadowOffset: { width: 0, height: 0 },
+            borderBottomColor: opaqueSeparator,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+          },
+          headerTintColor: primaryLabelColor,
+          headerStyleInterpolator: HeaderStyleInterpolators.forUIKit,
+        }}
+      >
+        <MainStack.Screen
+          name="MainTab"
+          component={Home}
+          options={({ route }) => {
+            return { headerTitle: getTabHeader(route) };
+          }}
+        />
         <MainStack.Screen
           name="RNDeviceInfoList"
           component={RNDeviceInfoList}

 import React, { useState, useCallback, useEffect } from 'react';
-import { StackNavigationProp } from '@react-navigation/stack';
 import DeviceInfo from 'react-native-device-info';
-import { ListItem, BGScroll, Card, Divider, BGList } from '../component/View';
-import { MainStackParamList } from '../type/Navigation';
-
-type NavigationProp = StackNavigationProp<
-  MainStackParamList,
-  'RNDeviceInfoList'
->;
+import { ListItem, Divider, BGList } from '../component/View';
 
 type DeviceInfoMethod = keyof typeof DeviceInfo;
 
@@ -34,10 +27,11 @@ const DeviceInfoItem = ({ k }: { k: DeviceInfoMethod }) => {
   return <ListItem title={k} subtitle={v} onPress={onEval} />;
 };
 
-const RNDeviceInfoList = ({ navigation }: { navigation: NavigationProp }) => {
+const RNDeviceInfoList = () => {
   return (
     <BGList
       data={keys}
+      ItemSeparatorComponent={Divider}
       renderItem={({ item }) => {
         return <DeviceInfoItem k={item} />;
       }}

 import React from 'react';
 import { useWindowDimensions } from 'react-native';
+import { screensEnabled } from 'react-native-screens';
 import { ListItem, BGScroll, Card, Divider } from '../component/View';
+import { MainTabScreenProps } from '../type/Navigation';
 
-export default () => {
+declare var global: { HermesInternal: null | {} };
+
+export default ({ navigation, route }: MainTabScreenProps<'SystemInfo'>) => {
   const { width, height, fontScale, scale } = useWindowDimensions();
   return (
     <BGScroll white>
       <Card shadow>
         <ListItem
+          title={'Hermes'}
+          rightTitle={global.HermesInternal ? 'enabled' : 'disabled'}
+        />
+        <Divider />
+        <ListItem
           title={'width'}
           rightTitle={`${Number.isInteger(width) ? width : width.toFixed(2)}pt`}
           rightSubtitle={`${width * scale}px`}
@@ -24,6 +33,18 @@ export default () => {
         <ListItem title={'fontScale'} rightTitle={fontScale.toString()} />
         <Divider />
         <ListItem title={'scale'} rightTitle={scale.toString()} />
+        <Divider />
+        <ListItem
+          title={'screen enabled'}
+          rightTitle={screensEnabled().toString()}
+        />
+      </Card>
+      <Card shadow>
+        <ListItem
+          title="RNDeviceInfo"
+          onPress={() => navigation.navigate('RNDeviceInfoList')}
+          chevron
+        />
       </Card>
     </BGScroll>
   );

-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * Generated with the TypeScript template
- * https://github.com/react-native-community/react-native-template-typescript
- *
- * @format
- */
-
-import React from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  ScrollView,
-  View,
-  Text,
-  StatusBar,
-} from 'react-native';
-
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-declare var global: { HermesInternal: null | {} };
-
-const WelcomePage = () => {
-  return (
-    <>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}
-        >
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.tsx</Text> to change
-                this screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-};
-
-const styles = StyleSheet.create({
-  scrollView: {
-    backgroundColor: Colors.lighter,
-  },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
-  body: {
-    backgroundColor: Colors.white,
-  },
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-    color: Colors.black,
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-    color: Colors.dark,
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
-});
-
-export default WelcomePage;

+import { CompositeNavigationProp, RouteProp } from '@react-navigation/native';
+import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
+import { StackNavigationProp } from '@react-navigation/stack';
+
 export type MainTabParamList = {
-  WelcomePage: undefined;
   SystemInfo: undefined;
   DesignList: undefined;
 };
@@ -8,3 +11,16 @@ export type MainStackParamList = {
   MainTab: undefined;
   RNDeviceInfoList: undefined;
 };
+
+export type MainTabScreenProps<RouteName extends keyof MainTabParamList> = {
+  navigation: CompositeNavigationProp<
+    BottomTabNavigationProp<MainTabParamList, RouteName>,
+    StackNavigationProp<MainStackParamList>
+  >;
+  route: RouteProp<MainTabParamList, RouteName>;
+};
+
+export type MainStackScreenProps<RouteName extends keyof MainStackParamList> = {
+  navigation: StackNavigationProp<MainStackParamList, RouteName>;
+  route: RouteProp<MainStackParamList, RouteName>;
+};