title: Property 'category' does not exist on type 'Readonly<unknown>' and Property 'data' does not exist on type 'Readonly<unknown>'
body: <p>I am trying to access the data from route.params sent from navigation screen, App is running fine but typescript conplain about my code &quot;Property 'data' does not exist on type 'Readonly', Property 'category' does not exist on type 'Readonly'.
  if I console.log(route?.params?.category) &amp; console.log(route?.params?.data) I will get the expected result. Here are my files.</p>
  <p>types.tsx</p>
  <pre><code>import type { NativeStackScreenProps } from &quot;@react-navigation/native-stack&quot;;
  
  declare global {
    namespace ReactNavigation {
      interface RootParamList extends RootStackParamList {}
    }
  }
  
  export type RootStackParamList = {
    HomeScreen: undefined;
    CategoryDetailScreen: { category: string };
    SeachDetailScreen: { data: string[] };
  };
  
  export type RootStackScreenProps&lt;Screen extends keyof RootStackParamList&gt; =
    NativeStackScreenProps&lt;RootStackParamList, Screen&gt;;
  
  export type Props = NativeStackScreenProps&lt;RootStackParamList&gt;;
  </code></pre>
  <p>RootJokeStack.tsx</p>
  <pre><code>const RootJokeStack = () =&gt; {
    return (
      &lt;JokeSearch.Navigator initialRouteName=&quot;HomeScreen&quot;&gt;
        &lt;JokeSearch.Screen
          name=&quot;HomeScreen&quot;
          component={HomeScreen}
          options={() =&gt; ({
            headerShown: false,
          })}
        /&gt;
        &lt;JokeSearch.Screen
          name=&quot;CategoryDetailScreen&quot;
          component={CategoryDetailScreen}
          options={() =&gt; ({
            headerShown: false,
          })}
        /&gt;
  
        &lt;JokeSearch.Screen
          name=&quot;SeachDetailScreen&quot;
          component={SeachDetailScreen}
          options={() =&gt; ({
            headerShown: false,
          })}
        /&gt;
      &lt;/JokeSearch.Navigator&gt;
    );
  };
  ;
  export default RootJokeStack;
  </code></pre>
  <p>HomeScreen.tsx</p>
  <pre><code>&lt;FlatList
          data={categories}
          keyExtractor={(item) =&gt; item}
          renderItem={({ item }) =&gt; (
            &lt;TouchableWithoutFeedback
              onPress={() =&gt; {
                navigation.navigate(&quot;CategoryDetailScreen&quot;, { category: item });
              }}
            &gt;
              &lt;View style={styles.imageView}&gt;
                &lt;ImageBackground
                  style={styles.image}
                  source={{
                    uri: &quot;https://media.gettyimages.com/photos/chuck-norris-poses-with-two-uzis-his-sleeveless-denim-shirt-to-his-picture-id525603356&quot;,
                  }}
                &gt;
                  &lt;View style={styles.textView}&gt;
                    &lt;Text style={{ color: colors.cardBackground }}&gt;{item}&lt;/Text&gt;
                  &lt;/View&gt;
                &lt;/ImageBackground&gt;
              &lt;/View&gt;
            &lt;/TouchableWithoutFeedback&gt;
          )}
          showsVerticalScrollIndicator={false}
          ListHeaderComponent={&lt;Text style={styles.listHeader}&gt;Categories&lt;/Text&gt;}
          horizontal={false}
          numColumns={2}
        /&gt;
  </code></pre>
  <p>CategoryDetailScreen.tsx</p>
  <pre><code>const CategoryDetailScreen = ({ route, navigation }: Props) =&gt; {
    const [categoryDetails, setcategoryDetails] = React.useState&lt;Category&gt;();
    // console.log(route?.params?.category);
  
    const query: string = route?.params?.category;
  
    const getCategoryDetails = async () =&gt; {
      try {
        const response = await chuckNorris.get(`/random?category=${query}`);
        return response.data;
      } catch (error) {
        console.log(error);
      }
    };
  
    useEffect(() =&gt; {
      getCategoryDetails().then((data) =&gt; {
        setcategoryDetails(data);
      });
    }, [query]);
  </code></pre>
  <p>SeachDetailScreen.tsx</p>
  <pre><code>const SeachDetailScreen = ({ route }: Props) =&gt; {
    const query = route?.params?.data;
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;SearchBarTitle data={query} /&gt;
        &lt;FlatList
          data={query}
          keyExtractor={(item) =&gt; item}
          renderItem={({ item }) =&gt;
            item ? (
              &lt;View style={{ margin: 5 }}&gt;
                &lt;Text style={{ color: &quot;#fff&quot;, fontSize: 20 }}&gt;{item}&lt;/Text&gt;
              &lt;/View&gt;
            ) : null
          }
          showsVerticalScrollIndicator={false}
        /&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/GnqtM.jpg" rel="nofollow noreferrer">Click here to see the error route.params.category error</a></p>
  <p><a href="https://i.stack.imgur.com/D0pN3.jpg" rel="nofollow noreferrer">Click here to see the error route.params.data error</a></p>