I moved from stack navigators to native stack navigators to improve the performance, but headerTransparent no longer works in my screens. All other screen options like headerShown, headerTitleStyle, title, headerRight, etc. work as expected. Does anyone know how to get headerTransparent working?
For instance, here is a typical object used as screen options:
const restaurantScreenOptions = {
title: restaurantName,
headerTitleStyle: {
color: 'rgba(0,0,0,0)'
},
headerTransparent: false,
headerBackTitleVisible: false,
headerTintColor: colors.white1,
headerRight: userId == 1 ? () => (
<TouchableOpacity onPress={openRestaurantOptions} style={{
marginRight: 10,
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 3
},
shadowRadius: 5,
shadowOpacity: 0.3,
borderRadius: 40,
backgroundColor: colors.white2,
justifyContent: 'center',
alignItems: 'center'
}}>
<MaterialIcons name="more-horiz" size={30} color={colors.black3} />
</TouchableOpacity>
) : null
}
Here is my package.json:
{
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject",
"android-build": "eas build --platform android"
},
"dependencies": {
"@apollo/client": "^3.3.8",
"@expo/config-plugins": "^5.0.0",
"@foursquare/pilgrim-sdk-react-native": "^1.1.3",
"@gorhom/bottom-sheet": "^2",
"@react-native-async-storage/async-storage": "^1.17.9",
"@react-native-community/datetimepicker": "6.2.0",
"@react-native-community/hooks": "^2.6.0",
"@react-native-community/masked-view": "^0.1.11",
"@react-native-picker/picker": "2.4.2",
"@react-navigation/bottom-tabs": "^6.2.0",
"@react-navigation/native": "^6.0.14",
"@react-navigation/native-stack": "^6.9.2",
"@react-navigation/stack": "^5.14.2",
"@segment/analytics-react-native": "^2.7.0",
"@segment/sovran-react-native": "^0.4.5",
"@shopify/flash-list": "1.1.0",
"apollo-link-ws": "^1.0.20",
"axios": "^0.21.1",
"expo": "~46.0.17",
"expo-application": "~4.2.2",
"expo-av": "~12.0.4",
"expo-blur": "~11.2.0",
"expo-clipboard": "~3.1.0",
"expo-constants": "~13.2.4",
"expo-contacts": "~10.3.0",
"expo-dev-client": "~1.3.1",
"expo-device": "~4.3.0",
"expo-file-system": "~14.1.0",
"expo-image-picker": "~13.3.1",
"expo-linear-gradient": "~11.4.0",
"expo-linking": "~3.2.2",
"expo-location": "~14.3.0",
"expo-media-library": "~14.2.0",
"expo-notifications": "~0.16.1",
"expo-sharing": "~10.3.0",
"expo-sms": "~10.2.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"expo-store-review": "~5.3.0",
"expo-system-ui": "~1.3.0",
"expo-updates": "~0.14.7",
"firebase": "8.2.3",
"graphql": "^15.5.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-confetti-cannon": "^1.5.2",
"react-native-gesture-handler": "~2.5.0",
"react-native-google-mobile-ads": "^7.0.1",
"react-native-google-places-autocomplete": "^2.2.0",
"react-native-maps": "0.31.1",
"react-native-paper": "^4.11.2",
"react-native-progress": "^5.0.0",
"react-native-purchases": "4.6.2",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-size-matters": "^0.4.0",
"react-native-svg-transformer": "^1.0.0",
"react-native-view-shot": "3.3.0",
"react-native-web": "~0.18.7",
"react-navigation": "^4.4.4",
"sentry-expo": "~5.0.0",
"subscriptions-transport-ws": "^0.9.18",
"typescript": "^4.9.3"
},
"devDependencies": {
"@babel/core": "^7.18.6",
"@types/react": "~18.0.0",
"@types/react-native": "~0.69.1"
},
"private": true,
"name": "simmer2",
"version": "1.0.0"
}
Let me know if you have any thoughts :)
