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.

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

iOS headerLargeTitle does not scroll into small title when background color set #2662

Open
MobileMon opened this issue Jan 30, 2025 · 2 comments
Labels
Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario Platform: iOS This issue is specific to iOS

Comments

@MobileMon
Copy link

Description

iOS headerLargeTitle does not scroll into small title when background color set

here is a working example


import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import { View, Text, FlatList, SafeAreaView } from 'react-native';

const Stack = createNativeStackNavigator();

const DATA = Array.from({ length: 20 }, (_, i) => ({ id: `${i}`, title: `Item ${i + 1}` }));

const ListScreen = () => {
  return (
    <SafeAreaView>
    <View style={{}}>
      <FlatList
        data={DATA}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={{ padding: 16, borderBottomWidth: 1, borderColor: '#ddd', backgroundColor: 'white' }}>
            <Text>{item.title}</Text>
          </View>
        )}
      />
      </View>
      </SafeAreaView>
  );
};

export default function TestNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{   
        }}
      >
        <Stack.Screen name="List" component={ListScreen}
         options={{
         title: 'Test',
         headerLargeTitle: true,

        }}
        
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

now if i set a background color on the view, the largeTitle to small title effect stops working

<SafeAreaView>
<View style={{backgroundColor: 'yellow'}}>
  <FlatList

Steps to reproduce

in description

Snack or a link to a repository

x

Screens version

4.5

React Native version

0.76

Platforms

iOS

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

@github-actions github-actions bot added the Platform: iOS This issue is specific to iOS label Jan 30, 2025
Copy link

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Snack or a link to a repository section.

@github-actions github-actions bot added Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario labels Jan 30, 2025
Copy link

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Missing info The user didn't precise the problem enough Missing repro This issue need minimum repro scenario Platform: iOS This issue is specific to iOS
Projects
None yet
Development

No branches or pull requests

1 participant