Member-only story

React-Native Title Bar is Not Visible on iOS 15

Ananda

--

After upgrading to iOS 15 version the bar of react-native-navigation became transparent and the title is hardly visible. Since my app uses legacy version of react-native (0.61.2) there’s no option to update navigation package to the latest version. A quick fix was to update the RNNComponentViewController.m source file of react-native-navigation package (react-native-navigation/lib/ios/RNNComponentViewController.m):

iOS 15 fix

In the bottom of initWithLayoutInfo method just add these lines as it’s shown in the picture above:

// a quick fix for iOS 15 version
if (@available(iOS 15, *)){
UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
[appearance configureWithOpaqueBackground];
appearance.titleTextAttributes = @{NSForegroundColorAttributeName : UIColor.whiteColor};
appearance.backgroundColor = [UIColor colorWithRed:0.0/255.0 green:125/255.0 blue:0.0/255.0 alpha:1.0];
self.navigationItem.standardAppearance = appearance;
self.navigationItem.scrollEdgeAppearance = appearance;
self.navigationController.navigationBar.tintColor = UIColor.whiteColor;
}

--

--

No responses yet