How to do navigation.setOptions in typescript-CodePudding

I'm setting up stack navigation using typescript and it's my first time working with typescript. I have a screen Login.tsx in which I want to customize the navigation bar.

import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import React from 'react';
import { SafeAreaView, Text } from 'react-native';
import { RootStackParamList } from '../typings';

type loginScreenProps = StackNavigationProp<RootStackParamList, 'Login'>;

const Login = () => {

  const navigation = useNavigation<loginScreenProps>();

  navigation.setOptions  = {
    headerTitle: 'Demo', // <-- ERROR
  }

  return (
    <SafeAreaView>
        <Text>Login</Text>
    </SafeAreaView>
  )
}

export default Login

The error I'm going is:

Type '{ headerTitle: string; }' is not assignable to type '(options: Partial) => void'. Object literal may only specify known properties, and 'headerTitle' does not exist in type '(options: Partial) => void'.

The RootStackParamList is simple expor type RootStackParamList = { Login: undefined;...

How do I achieve it in typescript?

CodePudding user response：

navigation.setOptions is a function which takes object as an input

Try making this change and let me know if its fixed

navigation.setOptions({
  headerTitle: 'Demo',
})