React Native navigation shared header element

I'm working with react native and react-navigation I would like to accomplish following:

I have one component Person details, where I receive some data from API: avatar, license, city

In that component I have 2 buttons that goes to separate page.

But I have a component named that is shared among all 3 of them

So when in first component PersonDetails where I recieve that data that is shared among those components.

Those props I receive in first Component Person Details I would like them to be shared among PersonExtended & PersonLocation but without passing them as props, since avatar image is base64 and can be big.

So is there any other way how this can be done ?

Person Details:

export const PersonDetails = ({navigation, route}) => {


  /** Get user ID From parameters **/
  const {userId} = route.params;

  /** Redux selectors **/
  const {person = null, loading = true} = useSelector(state => state.vehicles);


  const dispatch = useDispatch();

  // const insets = useSafeAreaInsets();




  /**
   * Mounted hook, loads vehicle info
   */
  useEffect(() => {
    dispatch(userActions.getUser({userId}));
  }, []);


  /**
   * Handle navigaton between card
   * @param {string} routeName
   */
  const handleNavigation = (routeName) => {
        navigation.navigate(routeName, {userId, 
        userInfo:
            {
              carAvatar: person.avatar,
              licencePlate: person.licencePlate,
              city: person.city
            }
        });
  };

  /**
   * Handle Click on X button in right corner
   */
  const handleBackNavigation = () => {
    navigation.goBack();
  };

  if (loading) {
    return <AnimatedLoader />;
  }
  return (
    <View style={{flex: 1, paddingBottom: insets.bottom}}>
      {/* Top header  */}
      <PersonInfo
        carAvatar={person.avatar}
        licencePlate={person.licencePlate}
      />
      {/* Top header  */}
      <ScrollView>
        <View style={styles.container}>
          <Button
            title={'extended info'} leftIcon="information-outline"
            onPress={() => handleNavigation('PersonExtendedDetails')} />
           <Button
            title={'location'} leftIcon="information-outline"
            onPress={() => handleNavigation('PersonLocation')} />
        </View>
      </ScrollView>
    </View>
  );
};


export default PersonDetails;

Person Extended:

export const PersonExtended = ({navigation, route}) => {


  /** Get user ID From parameters **/
  const {userId} = route.params;

  /** Redux selectors **/
  const {personExtended = null, loading = true} = useSelector(state => state.personExtended);


  const dispatch = useDispatch();





  /**
   * Mounted hook, loads vehicle info
   */
  useEffect(() => {
    dispatch(userActions.getUserExended({userId}));
  }, []);
  

  /**
   * Handle Click on X button in right corner
   */
  const handleBackNavigation = () => {
    navigation.goBack();
  };

  if (loading) {
    return <AnimatedLoader />;
  }
  return (
    <View style={{flex: 1}}>
      {/* Top header  */}
      <PersonInfo
        carAvatar={person.avatar}
        licencePlate={person.licencePlate}
      />
      {/* Top header  */}
     <View>
       <Text> USER Location { personLocation.locationName } </Text>
     </View>
    </View>
  );
};


export default PersonExtended;

Person Location:

export const UserLocation = ({navigation, route}) => {


  /** Get user ID From parameters **/
  const {userId} = route.params;

  /** Redux selectors **/
  const {personLocation = null, loading = true} = useSelector(state => state.location);


  const dispatch = useDispatch();





  /**
   * Mounted hook, loads vehicle info
   */
  useEffect(() => {
    dispatch(userActions.getUserLocation({userId}));
  }, []);
  

  /**
   * Handle Click on X button in right corner
   */
  const handleBackNavigation = () => {
    navigation.goBack();
  };

  if (loading) {
    return <AnimatedLoader />;
  }
  return (
    <View style={{flex: 1}}>
      {/* Top header  */}
      <PersonInfo
        carAvatar={person.avatar}
        licencePlate={person.licencePlate}
      />
      {/* Top header  */}
     <View>
       <Text> USER Location { personLocation.locationName } </Text>
     </View>
    </View>
  );
};


export default UserLocation;