Dev Standards
  • Untitled
  • project-standards
    • project-success
      • index
      • production.s
    • taking-over-project
      • index
      • migrate-to-new-ios-certificates.mo
    • technical-agility
      • react-native-test.s
      • code-vocabulary-identical-business-vocabulary.s
      • under-15-minutes-project-installation.s
      • index
      • up-to-date-dependencies.s
  • react-native
    • react
      • get-element-size-or-position-with-onLayout.mo
      • binding-functions-in-react-component.s
      • enable-overflow-android.mo
    • setup
      • setup-code-push.mo
      • setup-facebook-login.mo
      • setup-and-deploy-new-project-to-staging.mo
      • add-cocoapods.mo
      • deploy-script.mo
      • setup-and-deploy-new-project-to-staging-with-hockeyapp.mo
      • add-native-module.mo
      • setup_firebase_multiple_envs.mo
      • remove-unnecessary-android-permissions.mo
      • deploy-to-production-android.mo
      • deploy-project-to-production
      • overriding-existing-app.s
      • patch-react-native-android.mo
      • setup-stripe-dev-standard.mo
    • features
      • icomoon.mo
      • lock-device-orientation.mo
      • clean-logout.s
      • deep-linking
      • offline-redux.mo
      • asyncstorage.mo
      • offline-mobx.mo
    • debugging
      • analyse-bug.mo
      • debug-network-calls.mo
      • debug-javascript-ios-device.mo
      • get-ios-logs.mo
      • debug-javascript.mo
      • handle-gradle-dependencies-clash.mo
      • debug-native-ios.mo
      • debug-two-ios-apps-simultaneously.mo
      • debug-native-android.mo
      • debug-webviews.mo
    • firebase
      • debug-events.mo
    • architecture
      • project-architecture.s
      • default-stack.s
      • file-naming.s
    • update
      • upgrade-react-native.mo
    • tests
      • setup-detox-jest.mo
    • use_http_links_in_react_native.mo
    • react-navigation
      • unmount-compoenent-on-page-change.mo
    • package-dependencies
      • handle-dependencies-with-yarn-override.mo
    • animations
      • react-native-animations.s
  • successful-sprint
    • coding
      • plan-your-ticket-to-improve-efficency.s
  • code-quality
    • components-state-testing.mo
    • mock-with-jest.mo
    • pull-request-template.s
    • pull_request_template
    • test-files-indentation.s
  • security
    • import_certificates_match.mo
    • 2FA.mo
  • contributing
    • contributing.mo
    • mo.s
    • standard.s
  • backend
    • graphql-js
      • getting-started-with-apollo-server-dataloader-knex.mo
    • node-js
      • handle-errors-and-exceptions-in-javascript.s
      • add-multiple-environments-configuration-on-loopback.s
    • django
      • deploy-to-aws.mo
      • create-user-model.mo
      • getting-started.mo
      • create-model-and-api.mo
  • performance
    • backend
      • cache-routes-using-varnish.mo
      • serve-images-as-static-files.mo
      • minimize-number-sql-queries.mo
      • python-investigation-tools.mo
      • how-to-investigate-performance.mo
      • output-sql-alchemy-orm-query.mo
    • front
      • how-to-investigate-performance.mo
      • table-and-chart-with-good-performance.mo
      • react-native-performance.s
      • simulate-network-iphone.mo
    • performance-decision-flow.s
  • git
    • merge-or-rebase-a-branch
  • editors
    • vscode
      • setup-vscode.mo
  • ops
    • docker
      • deploy-with-https.mo
  • templates
    • mo
  • react
    • redux
      • custom-redux-form-field.mo
      • pass-props-to-container.mo
    • component.s
    • lifecycle
      • trigger-action-on-props-update.mo
  • flowtype
    • flowtype.s
  • LICENCE
  • README
  • scrum
    • timebox.s
  • SUMMARY
Powered by GitBook
On this page
  • Owner: Louis Lagrange
  • Why
  • Checks
  • Good examples
  • useNativeDriver
  • Style interpolation
  • Bad examples
  • useNativeDriver
  • Style interpolation
  1. react-native
  2. animations

react-native-animations.s

PreviousanimationsNextsuccessful-sprint

Last updated 6 years ago

Owner:

Why

Animations are a great way to improve the User Experience by :

  • easing the interactions, so that they may seem more natural

  • giving a clear visual feedback on an action's success or failure, and on its nature (tap / long press / slide / pinch)

  • educating the user on possible interactions on an element

  • helping the user wait while content is loading

  • giving a sensation of speed and minimizing small performance problems

  • show more content on the page in a fluid manner

Checks

  • In order to improve how we create animations, I send a quick message to the owner "Hey it's , I'm going to make an animation on "

  • Creating an animation should not take more than half a day of design and development time. If it takes more time, I andon the owner who will help me or find someone to help me.

  • I know of the resources that can help me:

    • similar animations that BAM made previously with the : this can help me showcase examples for my PO, estimate the time needed for the design and the development, and find a technical strategy for my animation

    • the tools that are available in order to create a React Native animation with

    • the on animations

  • If I use Animated:

    • I make sure to use the parameter useNativeDriver in Animated.timing, Animated.spring, Animated.decay and Animated.event (see )

    • I only use Animated.interpolate on styles of type opacity or transform (otherwise useNativeDriver won't work)

  • If I use any third party library, I look at the documentation and/or code, and if a useNativeDriver prop exists, I use it

  • When my animation is finished, I make a GIF of it (with : brew cask install kap) and add it to the catalog (10 min)

Good examples

Please andon and/or create an issue if you need one!

useNativeDriver

<Animated.ScrollView
    scrollEventThrottle={1}
    onScroll={
      Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }], {
        useNativeDriver: true,
      })
    }
>

Style interpolation

<Animated.View
  style={{
    transform: [{ translateY: contentOffsetY.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 200],
      extrapolate: 'clamp',
    }) }],
    position: 'absolute',
  }}
>

Bad examples

Please andon and/or create an issue if you need one!

useNativeDriver

<Animated.ScrollView
    scrollEventThrottle={1}
    onScroll={
      Animated.event([{ nativeEvent: { contentOffset: { y: contentOffsetY } } }])
    }
>

Style interpolation

<Animated.View
  style={{
    transform: [{ height: contentOffsetY.interpolate({
      inputRange: [0, 100],
      outputRange: [0, 200],
      extrapolate: 'clamp',
    }) }],
  }}
>
Louis Lagrange
catalog
this table
official guide
React Native performance
Kap
here