React-native-navigation: Question: Can shared element transitions be used to populate the background image of a topBar?

Created on 22 Apr 2020 · 2Comments · Source: wix/react-native-navigation

I'm trying to have a card component's background image be used to transition to the topBar area background of the card detail page. I'm not seeing how to reference the nativeID anywhere in the screen static options (merge params), and I'm failing to accomplish this in a custom topBar component though I believe this one is operator error.

Is this possible? If so, can anyone point me to an example or where in the docs this is referenced?

Doesn't seem to be working with topBar: background: component

Implementation incase there is a bug with this functionality

caller

<ImageBackground
  nativeID={`image${this.id}`}
  style={cardStyle}
  imageStyle={{ borderRadius: 4 }}
  source={{ uri: this.state.bgImage }}>
  <View style={{ flex: 1, flexDirection: 'row' }}>
    <View style={{ flex: 2 }}>
      <Text
        nativeID={`title${this.id}`}
        adjustsFontSizeToFit={true}
        allowFontScaling={true}
        numberOfLines={4}
        minimumFontScale={0.6}
        style={[textStyle, textColorStyle]}>
        "Test Card Name"
      </Text>
    </View>
    <View style={{ flex: 1 }}></View>
  </View>
</ImageBackground>

callee

class CustomPage extends Component {
  constructor(props) {
    super(props);
  }

  static options(passProps) {
    return {
      topBar: {
        largeTitle: {
          visible: true,
          component: {
            name: 'common.customTopBar',
            alignment: 'center',
            passProps,
          },
        }
      },
      animations: {
        push: {
          waitForRender: false,
        },
      },
      layout: {
        componentBackgroundColor: 'white',
      },
      bottomTabs: { visible: false, drawBehind: true, animate: false },
    };
  }

  ...
}

registration

Navigation.registerComponent(
    'common.customTopBar',
    () => CustomTopBar,
  );

Custom Header

export const CustomTopBar = props => {
  const { meta } = { meta: { friendlyName: "Test Page" } };
  return (
    <ImageBackground
      nativeID={`image${props.id}Dest`}
      source={{
        uri:
          'https://terrigen-cdn-dev.marvel.com/content/prod/1x/_tony_card_1.jpg',
      }}
      style={{ width: '100%' }}>
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <Text
          nativeID={`title${props.id}`}
          adjustsFontSizeToFit={true}
          allowFontScaling={true}
          numberOfLines={2}
          minimumFontScale={0.6}>
          {meta.friendlyName}
        </Text>
      </View>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignSelf: 'center',
  },
  text: {
    alignSelf: 'center',
    color: 'black',
  },
});

API Call

Navigation.push(
  this.props.componentId,
  {
    component: {
      id: 'CustomPage',
      name: 'CustomPage',
      passProps: data,
      options: {
        animations: {
          push: {
            sharedElementTransitions: [
              {
                fromId: `image${rec.id}`,
                toId: `image${rec.id}Dest`,
              },
            ],
          },
        },
      }
    }
  }
);