Implement Hero animation like shoutem About extension

Question

I try to implement the hero animation like in the shoutem About extension. Basically, I add animationName to NavigationBar and the Image like in the extension. I also had to add ScrollDriver because it would error-ed otherwise. But it seems the NavigationBar does not pass the driver down to its child components, so I still got this error. Is it possible to implement the hero animation like what was demonstrated here? https://medium.com/shoutem/declare-peace-with-react-native-animations-e947332fa9b1

Thanks,

import { ScrollDriver } from '@shoutem/animation';


getNavBarProps() {
  const driver = new ScrollDriver();
  return {
    hasHistory: true,
    driver: driver,
    title: 'Title',
    navigateBack: () => this.props.navigation.dispatch(NavigationActions.back()),
    styleName: 'fade clear',
    animationName: 'solidify',
  };
}

render () {
  const driver = new ScrollDriver();
  return (
  <Screen styleName=" paper">
    <View style={{height:68}}>
      <NavigationBar {...this.getNavBarProps()} />
    </View>

    <ScrollView style={styles.container}>
      <Image
        styleName="large"
        source={require('../Images/spa2.jpg') }
        defaultSource={require('../Images/image-fallback.png')}
        driver={driver}
        animationName="hero"
      />
...

score 2 · Answer 1 · answered May 18 '17 at 08:52

I'm the author of the article, from you question, I'm not sure are you trying to create an extension on shoutem or you just want to recreate animation in any other React Native app.

If you are creating an extension or CardStack from @shoutem/ui/navigation, you don't event need to care for ScrollDriver. It would be pushed throught the context to the ScrollView (imported from @shoutem/ui) and NavigationBar (imported from @shoutem/ui/navigation).

If you are creating your own React Native project to be able to do it like in article I suggest the following. At the root component of your app:

import ScrollView from '@shoutem/ui';

class App extends Component {
  ...
  render() {
    return (
      <ScrollView.DriverProvider>
        <App />
      </ScrollView.DriverProvider>
    );
  }
}

Then you don't have to take care of initialization of ScrollDriver on each screen, if you use our components and a ScrollView it will push the driver where it needs to be. :) So your screen at the end would look like this:

import {
  ScrollView,
  NavigationBar,
  Image
} from '@shoutem/ui';

class MyScreen extends Class {
  render() {
    return (
      <Screen>
        <NavigationBar animationName="solidify" />
        <ScrollView>
          <Image animationName="hero" />
        </ScrollView>
      </Screen>
    );
  }
}

The whole working example is here https://github.com/shoutem/ui/tree/develop/examples/RestaurantsApp/app

Thanks, I try to recreate the animation in my own app. I add the ScrollView.DriverProvider like you said but I got error: undefined is not an object (evaluating '_ui2.default.DriverProvider') http://imgur.com/a/iiDcQ — Anh Pham, May 19 '17 at 03:07
I have the same problem. Can you please let me know if you found any solution for this? — Shanaka, Oct 16 '17 at 13:49

Implement Hero animation like shoutem About extension

1 Answers1