Skip to content

Commit

Permalink
fix: remove setting tintColor in ios14 (#748)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
WoLewicki authored Jan 19, 2021
1 parent 75bbabf commit ce80133
Show file tree
Hide file tree
Showing 5 changed files with 111 additions and 1 deletion.
2 changes: 2 additions & 0 deletions TestsExample/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Test263 from './src/Test263';
import Test349 from './src/Test349';
import Test364 from './src/Test364';
import Test528 from './src/Test528';
import Test550 from './src/Test550';
import Test556 from './src/Test556';
import Test564 from './src/Test564';
import Test577 from './src/Test577';
Expand All @@ -23,6 +24,7 @@ import Test691 from './src/Test691';
import Test702 from './src/Test702';
import Test706 from './src/Test706';
import Test713 from './src/Test713';
import Test748 from './src/Test748';
import Test750 from './src/Test750';

enableScreens();
Expand Down
Binary file added TestsExample/assets/backButton.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 48 additions & 0 deletions TestsExample/src/Test550.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import {Button, ScrollView} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from 'react-native-screens/native-stack';

function HomeScreen({navigation}) {
return (
<ScrollView contentContainerStyle={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Button
onPress={() => navigation.navigate('Details')}
title="Go to Details"
/>
</ScrollView>
);
}

function DetailsScreen() {
return (
<ScrollView />
);
}

const RootStack = createNativeStackNavigator();

function RootStackScreen() {
return (
<RootStack.Navigator
screenOptions={{
backButtonImage: require('../assets/backButton.png'),
headerBackTitleVisible: false,
headerTintColor: 'red',
}}>
<RootStack.Screen name="Home" component={HomeScreen} options={{headerShown: false}}/>
<RootStack.Screen
name="Details"
component={DetailsScreen}
/>
</RootStack.Navigator>
);
}

export default function App() {
return (
<NavigationContainer>
<RootStackScreen />
</NavigationContainer>
);
}
53 changes: 53 additions & 0 deletions TestsExample/src/Test748.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import React from 'react';
import {Button, ScrollView, View} from 'react-native';
import {NavigationContainer, NavigationProp, ParamListBase} from '@react-navigation/native';
import {createNativeStackNavigator} from 'react-native-screens/native-stack';

function HomeScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {
return (
<Button
onPress={() => {
navigation.navigate('Details');
}}
title="Go to details"
/>
);
}

function DetailsScreen({navigation}: {navigation: NavigationProp<ParamListBase>}) {

const [visible, setVisible] = React.useState(true);

return (
<ScrollView>
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
<Button
onPress={() => {
navigation.setOptions({headerRight: visible ? () => <View style={{width: 40, height: 40, backgroundColor: 'red'}} /> : () => null})
setVisible(!visible);
}}
title="Swap headerRight"
/>
</View>
</ScrollView>
);
}

const RootStack = createNativeStackNavigator();

function RootStackScreen() {
return (
<RootStack.Navigator>
<RootStack.Screen name="Home" component={HomeScreen}/>
<RootStack.Screen name="Details" component={DetailsScreen} />
</RootStack.Navigator>
);
}

export default function App(): JSX.Element {
return (
<NavigationContainer>
<RootStackScreen />
</NavigationContainer>
);
}
9 changes: 8 additions & 1 deletion ios/RNSScreenStackHeaderConfig.m
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,14 @@ + (void)setAnimatedConfig:(UIViewController *)vc withConfig:(RNSScreenStackHeade
// This action fails when navigating to the screen with header for the second time and loads default back button.
// 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
// so we change the tint color's alpha by a very small amount and then set it to the one it should have.
[navbar setTintColor:[config.color colorWithAlphaComponent:CGColorGetAlpha(config.color.CGColor) - 0.01]];
#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_14_0) && \
__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
// 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
if (@available(iOS 14.0, *)) {} else
#endif
{
[navbar setTintColor:[config.color colorWithAlphaComponent:CGColorGetAlpha(config.color.CGColor) - 0.01]];
}
[navbar setTintColor:config.color];

#if defined(__IPHONE_OS_VERSION_MAX_ALLOWED) && defined(__IPHONE_13_0) && \
Expand Down

0 comments on commit ce80133

Please sign in to comment.