Disable default animation on iOS 26

Aberta
  • Algo errado?
#430 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 2 dias

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Precisa de esclarecimento
Status de atividade
Estagnada
Stack de tecnologia
ios, react-native, typescript
Domínio
mobile-dev

Direção de pesquisa

Comece reproduzindo o problema do exemplo BottomTabsStack com disablePageAnimations no iOS 26 e, em seguida, compare o comportamento com a issue 45. Investigue o ponto de entrada nativo da animação de abas e as props disponíveis; considera-se concluído quando a animação padrão indesejada estiver desabilitada sem quebrar a navegação entre abas.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

bug
Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

Basically same as this https://github.com/callstackincubator/react-native-bottom-tabs/issues/45 but for iOS 26. Is there some native props for it? I assume yes when I check the "App Store app. See the video (it has some strange effect specially on the buttons):

https://github.com/user-attachments/assets/51282271-6450-443e-911c-fb4a7681fdb5

Library version

0.11.2

Environment info
System:
  OS: macOS 15.6.1
  CPU: (14) arm64 Apple M4 Pro
  Memory: 201.69 MB / 48.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.19.0
    path: ~/.nvm/versions/node/v22.19.0/bin/node
  Yarn:
    version: 4.9.2
    path: ~/.nvm/versions/node/v22.19.0/bin/yarn
  npm:
    version: 10.9.3
    path: ~/.nvm/versions/node/v22.19.0/bin/npm
  Watchman:
    version: 2025.02.10.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.0
      - iOS 26.0
      - macOS 26.0
      - tvOS 26.0
      - visionOS 26.0
      - watchOS 26.0
  Android SDK:
    API Levels:
      - "33"
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 33.0.1
      - 34.0.0
      - 35.0.0
      - 36.0.0
      - 36.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-29 | Google Play ARM 64 v8a
      - android-34 | Google Play ARM 64 v8a
      - android-35 | Google APIs ARM 64 v8a
      - android-35 | Pre-Release 16 KB Page Size Google Play ARM 64 v8a
      - android-36 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2025.1 AI-251.26094.121.2513.14007798
  Xcode:
    version: 26.0/17A321
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 20.0.0
    wanted: 20.0.0
  react:
    installed: 19.1.0
    wanted: 19.1.0
  react-native:
    installed: 0.81.4
    wanted: 0.81.4
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Steps to reproduce

Just adding couple of tabs and run in iOS 26.

Reproducible sample code
export const RootStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="MainBottomTabs"
        component={BottomTabsStack}
        options={{
          headerShown: false,
        }}
      />
      <Stack.Screen
        name="Modal"
        component={ModalScreen}
        options={{ presentation: 'modal' }}
      />
      <Stack.Screen
        name="Sheet"
        component={SheetScreen}
        options={{
          presentation: 'formSheet',
          sheetAllowedDetents: 'fitToContents',
        }}
      />
    </Stack.Navigator>
  );
};

export const BottomTabsStack = () => {
  return (
    <Tab.Navigator disablePageAnimations>
      <Tab.Screen
        name="Home"
        component={HomeStack}
        options={{
          tabBarIcon: () => ({ sfSymbol: 'house' }),
        }}
      />
      <Tab.Screen
        name="Settings"
        component={SettingsScreen}
        options={{
          tabBarIcon: () => ({ sfSymbol: 'gear' }),
        }}
      />
    </Tab.Navigator>
  );
};

function App() {
  return (
    <NavigationContainer theme={AppTheme}>
      <RootStack />
    </NavigationContainer>
  );
}

Also:

    "@bottom-tabs/react-navigation": "^0.11.2",
    "@react-navigation/native": "^7.1.17",
    "@react-navigation/native-stack": "^7.3.26",
    "react-native-safe-area-context": "^5.6.1",
    "react-native-screens": "^4.16.0",

Using react-native cli.

Linguagem predominante
TypeScript
Estrelas
1.5k
Forks
112
Merge médio
2d 3h
PRs com merge (30d)
13

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-bottom-tabs

Todas as issues de callstack/react-native-bottom-tabs

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.