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: Nicolas Djambazian
  • Motivation
  • Prerequisites (~5min)
  • Steps (~5min)
  1. react-native
  2. react-navigation

unmount-compoenent-on-page-change.mo

Previousreact-navigationNextpackage-dependencies

Last updated 7 years ago

Owner: Nicolas Djambazian

Motivation

React-navigation doesn't unmount your page when you go on the next one. That allow fast transition when you go back.

But if you are using a Camera component, a WebView or every component which use a lot of resources and can have side effect if it continue to run background, you need to unmount them when you leave the page.

For that, you can use the .

Prerequisites (~5min)

  • The page have a container.

    -You must have a main stack navigation exported in src/Routing.js

Steps (~5min)

  • Add a props myFeatureIsActivated on the component with default value at true

  • In the render method, display you component only if myFeatureIsActivated is at true:

    return ( 
    <View>
     {this.props.cameraIsActivated && <Camera />}
    </View>
    );
  • Test is your component still work (nothing should have change)

  • Import your main stack navigation

  • In the mapDispatchToProps, compare the path given by the getPathAndParamsForState to the path of your page, you should have something like:

import { RootNavigator } from '../../../Routing';

const mapStateToProps = state => ({
  cameraActivated: RootNavigator.router.getPathAndParamsForState(state.navigation).path === 'path/of/the/page/in/navigation/stacks',
});

The path is given by your navigation stacks. In the following example, the path of SIMCardScan is activate/simCardScan

const ActivateStack = StackNavigator(
  {
    welcome: {
      screen: Pages.SignUp.RequiredToActivateSim,
    },
    simCardScan: {
      screen: Pages.SignUp.SIMCardScan,
    },
  },
  {
    initialRouteName: 'welcome,
  }
);

export const RootNavigator = StackNavigator(
  {
    landing: {
      screen: LandingPage,
    },
    activate: {
      screen: ActivateStack,
    },
  },
  {
    initialRouteName: 'landing',
    navigationOptions: {
      headerStyle: styles.header,
      headerTintColor: theme.headerTextColor,
    },
    headerMode: 'screen',
  }
);
  • Test a last time, your component should disappear at the beginning of the page transition.

getPathAndParamsForState of a Router