Converting JS to TS on React-Native

Question

I've been stuck on Typescript for so long now, it seems that is loved by everyone so I'm accepting that my frustration right now is due to my lack of knowledge on TS rather than TS itself.

Can someone more experienced have a look at my following code and tell me why if I hover over the name in Tab.Screen for example, it doesn't show type "string"? Same for headerShown?

Would be so much appreciated. Thank you.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import SavedScreen from '../screens/SavedScreen';
import SettingsScreen from '../screens/SettingsScreen';
import CameraScreen from '../screens/CameraScreen';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';
const savedIcon = require('../assets/saved.png') as HTMLImageElement;
const settingsIcon = require('../assets/settings.png') as HTMLImageElement;
const cameraIcon = require('../assets/camera_icon.png') as HTMLImageElement;
import COLORS from '../theme.js';

type RootStackParamList = {
  Saved: {
    name: string;
    options: {
      headerShown: string;
    }
  };
  Camera: {
    name: string;
  };
  Settings: {
    name: string;
  };
};

const Tab = createBottomTabNavigator<RootStackParamList>();

const Tabs: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarShowLabel: false,
        tabBarStyle: styles.navigatorStyle,
      }}
    >
      <Tab.Screen
        name="Saved"
        component={SavedScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <Image
                source={savedIcon}
                resizeMode="contain"
                style={{
                  width: 25,
                  height: 25,
                  tintColor: focused ? COLORS.focused : COLORS.unfocused,
                }}
              />
              <Text
                style={{
                  color: focused ? COLORS.focused : COLORS.unfocused,
                  fontSize: 12,
                }}
              >
                Saved
              </Text>
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Camera"
        component={CameraScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <Image
                source={cameraIcon}
                resizeMode="contain"
                style={{
                  width: 30,
                  height: 30,
                  tintColor: focused ? COLORS.focused : COLORS.unfocused,
                }}
              />
              <Text
                style={{
                  color: focused ? COLORS.focused : COLORS.unfocused,
                  fontSize: 12,
                }}
              >
                Camera
              </Text>
            </View>
          ),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          headerShown: false,
          tabBarIcon: ({ focused }) => (
            <View style={{ alignItems: 'center', justifyContent: 'center' }}>
              <Image
                source={settingsIcon}
                resizeMode="contain"
                style={{
                  width: 25,
                  height: 25,
                  tintColor: focused ? COLORS.focused : COLORS.unfocused,
                }}
              />
              <Text
                style={{
                  color: focused ? COLORS.focused : COLORS.unfocused,
                  fontSize: 12,
                }}
              >
                Settings
              </Text>
            </View>
          ),
        }}
      />
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  navigatorStyle: {
    position: 'absolute',
    bottom: 25,
    left: 20,
    right: 20,
    elevation: 0,
    backgroundColor: 'white',
    borderRadius: 15,
    height: 90,

    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
  },
});

export default Tabs;
```

Answer 1

RootStackParamList type defines the types for the props that are passed to the screens. You can import BottomTapScreenProps from @react-navigation/bottom-tabs and use it like this i think:

type TabProps = BottomTabScreenProps<RootStackParamList>;