[go: nahoru, domu]
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Unable to explicitly type Native Stack Screen options #28975

Open
itsramiel opened this issue May 19, 2024 · 6 comments
Open

Unable to explicitly type Native Stack Screen options #28975

itsramiel opened this issue May 19, 2024 · 6 comments
Labels
needs review Issue is ready to be reviewed by a maintainer Router expo-router

Comments

@itsramiel
Copy link

Minimal reproducible example

https://github.com/itsramiel/expo-router-repro/tree/untyped-options

Which package manager are you using? (Yarn is recommended)

yarn

If the issue is web-related, please select the bundler (web.bundler in the app.json)

metro

Summary

I would like to be able to define a variable and type it with the type of the options of the Screen.Stack to do something like this:

const SCREEN_OPTIONS: NativeStackNavigationOptions = { title: "Index" };

export default function () {
  return <Stack.Screen options={SCREEN_OPTIONS} />; }

The type of options is NativeStackNavigationOptions | undefined. I tried to import NativeStackNavigationOptions and the only auto import I got was from react-native-screens/lib/typescript/native-stack/types but using that shows an error.

A workaround is to use:

const ScreenOptions: NonNullable<
  ComponentProps<(typeof Stack)["Screen"]>["options"]
> = {
  headerShown: false,
};

I would like to know where can I import the types for options.

Environment

  expo-env-info 1.2.0 environment info:
    System:
      OS: macOS 14.3.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
      Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.1/bin/yarn
      npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
      Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
    Managers:
      CocoaPods: 1.14.3 - /Users/itsramiel/.rbenv/shims/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
    IDEs:
      Android Studio: 2023.1 AI-231.9392.1.2311.11330709
      Xcode: 15.2/15C500b - /usr/bin/xcodebuild
    npmPackages:
      expo: ~51.0.8 => 51.0.8
      expo-router: ~3.5.14 => 3.5.14
      react: 18.2.0 => 18.2.0
      react-dom: 18.2.0 => 18.2.0
      react-native: 0.74.1 => 0.74.1
      react-native-web: ~0.19.10 => 0.19.11
    npmGlobalPackages:
      eas-cli: 7.3.0
    Expo Workflow: managed
    ```
@itsramiel itsramiel added needs validation Issue needs to be validated Router expo-router labels May 19, 2024
@expo-bot expo-bot added needs review Issue is ready to be reviewed by a maintainer and removed needs validation Issue needs to be validated labels May 19, 2024
@DavideSegullo
Copy link

You should import it from @react-navigation/native-stack:

import { NativeStackNavigationOptions } from '@react-navigation/native-stack';

const screenOptions: NativeStackNavigationOptions = {
  headerShown: false,
};

@itsramiel
Copy link
Author
itsramiel commented May 19, 2024 •
edited
Loading

You should import it from @react-navigation/native-stack:

import { NativeStackNavigationOptions } from '@react-navigation/native-stack';

const screenOptions: NativeStackNavigationOptions = {
  headerShown: false,
};

As you can see from the repo's package.json there is no @react-navigation/native-stack. The expo app was created using the expo cli, so these are the dependencies that were added by default. While the app uses @react-navigation/native-stack under the hood in expo router, it doesnt make sense to install only for the type.

Either make @react-navigation/native-stack a peer dep of expo-router and have it installed in the template or expose the type some other way. Or what do yout think?

@cyanChill

This comment was marked as duplicate.

Sign in to view
@DavideSegullo
Copy link

You should import it from @react-navigation/native-stack:

import { NativeStackNavigationOptions } from '@react-navigation/native-stack';

const screenOptions: NativeStackNavigationOptions = {
  headerShown: false,
};

As you can see from the repo's package.json there is no @react-navigation/native-stack. The expo app was created using the expo cli, so these are the dependencies that were added by default. While the app uses @react-navigation/native-stack under the hood in expo router, it doesnt make sense to install only for the type.

Either make @react-navigation/native-stack a peer dep of expo-router and have it installed in the template or expose the type some other way. Or what do yout think?

Ye but you can install the same package with the same version, actually you're already installing it inside your deps so it isn't an extra dependency (it'll be included anyway in your final bundle)

@itsramiel
Copy link
Author

You and I know that cause we've been working with rn for a while to know the history, but that's not clear to a new dev coming directly to expo router.

If that's the solution and no improvements is wanted to be taken by expo, then they can close the issue

@ljukas
Copy link
ljukas commented May 20, 2024

This is related to #28251 since the screen options exposed internally by ExpoRouter for screens are wrong as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs review Issue is ready to be reviewed by a maintainer Router expo-router
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@ljukas @DavideSegullo @expo-bot @itsramiel @cyanChill