After migrating to v5 image resize not working

Question

Current Behavior

In react navigation v4 I used this code and worked just fine. It did adjust my logo image (300x80) to fit perfectly and scale into my 80px header.

Now after migrating to v5 it no longer scale. It's just like the 'resizeMode' stopped working.

const navigationOptions = { headerTitle: <Image style={{height: 45}} resizeMode="contain" source={require('../assets/images/encabezado-1.png')}/>, headerStyle: { backgroundColor: 'white', shadowColor: 'none', }, headerTitleAlign: 'center', headerTitleStyle: { fontWeight: 'normal', fontFamily: 'Montserrat-SemiBold', }, }

Expected Behavior

I expect my image to be contained and scaled properly. Like in v4:

How to reproduce

Add an image to headerTitle and try resizeMode.

Your Environment

• Android 9
  • @react-navigation/native 5.2.2
  • @react-navigation/stack 5.2.3
  • react-native-gesture-handler 1.6.1
  • react-native-safe-area-context 0.7.3
  • react-native-screens 2.4.0
  • react-native 0.61.5
  • node 12.6.1

Answer 1

resizeMode is still working. you can use in Stack.Screen -> options -> title prop.

code example:

<TakeSendStack.Navigator initialRouteName={"TakeSend"}>
      <TakeSendStack.Screen name="TakeSend" options={{ title: <Image style={{height: 45}} source={require('../assets/logo/logo.png')}/> }} component={TakeSend} />
</TakeSendStack.Navigator>

add resizeMode

<TakeSendStack.Navigator initialRouteName={"TakeSend"}>
      <TakeSendStack.Screen name="TakeSend" options={{ title: <Image style={{height: 45}} resizeMode="contain" source={require('../assets/logo/logo.png')}/> }} component={TakeSend} />
</TakeSendStack.Navigator>