Skip to content

Commit ce80133

Browse files
authored
fix: remove setting tintColor in ios14 (#748)
The change introduced in #552 brakes the behavior of headerRight (see Test748 without the change in native code) in iOS 14, and the bug, that #552 fixed, is not present anymore in iOS 14.
1 parent 75bbabf commit ce80133

File tree

5 files changed

+111
-1
lines changed

5 files changed

+111
-1
lines changed

TestsExample/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Test263 from './src/Test263';
88
import Test349 from './src/Test349';
99
import Test364 from './src/Test364';
1010
import Test528 from './src/Test528';
11+
import Test550 from './src/Test550';
1112
import Test556 from './src/Test556';
1213
import Test564 from './src/Test564';
1314
import Test577 from './src/Test577';
@@ -23,6 +24,7 @@ import Test691 from './src/Test691';
2324
import Test702 from './src/Test702';
2425
import Test706 from './src/Test706';
2526
import Test713 from './src/Test713';
27+
import Test748 from './src/Test748';
2628
import Test750 from './src/Test750';
2729

2830
enableScreens();

TestsExample/assets/backButton.png

803 Bytes
Loading

TestsExample/src/Test550.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import {Button, ScrollView} from 'react-native';
3+
import {NavigationContainer} from '@react-navigation/native';
4+
import {createNativeStackNavigator} from 'react-native-screens/native-stack';
5+
6+
function HomeScreen({navigation}) {
7+
return (
8+
<ScrollView contentContainerStyle={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
9+
<Button
10+
onPress={() => navigation.navigate('Details')}
11+
title="Go to Details"
12+
/>
13+
</ScrollView>
14+
);
15+
}
16+
17+
function DetailsScreen() {
18+
return (
19+
<ScrollView />
20+
);
21+
}
22+
23+
const RootStack = createNativeStackNavigator();
24+
25+
function RootStackScreen() {
26+
return (
27+
<RootStack.Navigator
28+
screenOptions={{
29+
backButtonImage: require('../assets/backButton.png'),
30+
headerBackTitleVisible: false,
31+
headerTintColor: 'red',
32+
}}>
33+
<RootStack.Screen name="Home" component={HomeScreen} options={{headerShown: false}}/>
34+
<RootStack.Screen
35+
name="Details"
36+
component={DetailsScreen}
37+
/>
38+
</RootStack.Navigator>
39+
);
40+
}
41+
42+
export default function App() {
43+
return (
44+
<NavigationContainer>
45+
<RootStackScreen />
46+
</NavigationContainer>
47+
);
48+
}

TestsExample/src/Test748.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import {Button, ScrollView, View} from 'react-native';
3+
import {NavigationContainer, NavigationProp, ParamListBase} from '@react-navigation/native';
4+
import {createNativeStackNavigator} from 'react-native-screens/native-stack';
5+
6+
function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
7+
return (
8+
<Button
9+
onPress={() => {
10+
navigation.navigate('Details');
11+
}}
12+
title="Go to details"
13+
/>
14+
);
15+
}
16+
17+
function DetailsScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
18+
19+
const [visible, setVisible] = React.useState(true);
20+
21+
return (
22+
<ScrollView>
23+
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
24+
<Button
25+
onPress={() => {
26+
navigation.setOptions({headerRight: visible ? () => <View style={{width: 40, height: 40, backgroundColor: 'red'}} /> : () => null})
27+
setVisible(!visible);
28+
}}
29+
title="Swap headerRight"
30+
/>
31+
</View>
32+
</ScrollView>
33+
);
34+
}
35+
36+
const RootStack = createNativeStackNavigator();
37+
38+
function RootStackScreen() {
39+
return (
40+
<RootStack.Navigator>
41+
<RootStack.Screen name="Home" component={HomeScreen}/>
42+
<RootStack.Screen name="Details" component={DetailsScreen} />
43+
</RootStack.Navigator>
44+
);
45+
}
46+
47+
export default function App(): JSX.Element {
48+
return (
49+
<NavigationContainer>
50+
<RootStackScreen />
51+
</NavigationContainer>
52+
);
53+
}

ios/RNSScreenStackHeaderConfig.m

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,14 @@ + (void)setAnimatedConfig:(UIViewController *)vc withConfig:(RNSScreenStackHeade
123123
// This action fails when navigating to the screen with header for the second time and loads default back button.
124124
// It looks like changing the tint color of navbar triggers an update of the items belonging to it and it seems to load the custom back image
125125
// so we change the tint color's alpha by a very small amount and then set it to the one it should have.
126-
[navbar setTintColor:[config.color colorWithAlphaComponent:CGColorGetAlpha(config.color.CGColor) - 0.01]];
126+
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_14_0) && \
127+
__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
128+
// it brakes the behavior of `headerRight` in iOS 14, where the bug desribed above seems to be fixed, so we do nothing in iOS 14
129+
if (@available(iOS 14.0, *)) {} else
130+
#endif
131+
{
132+
[navbar setTintColor:[config.color colorWithAlphaComponent:CGColorGetAlpha(config.color.CGColor) - 0.01]];
133+
}
127134
[navbar setTintColor:config.color];
128135

129136
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \

0 commit comments

Comments
 (0)