├── ResourceSavingContainer.js ├── LICENSE ├── package.json └── README.md /ResourceSavingContainer.js: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright (c) Software Mansion 3 | // Licensed under the MIT License. See LICENSE file in the project root for full license information. 4 | // 5 | 6 | import React from 'react'; 7 | import { StyleSheet, View } from 'react-native'; 8 | 9 | const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view out of its conatiner 10 | 11 | const ResourceSavingContainer = ({ visible, children, ...rest }) => ( 12 | 13 | 14 | {children} 15 | 16 | 17 | ); 18 | 19 | const styles = StyleSheet.create({ 20 | innerAttached: { 21 | flex: 1, 22 | }, 23 | innerDetached: { 24 | flex: 1, 25 | left: FAR_FAR_AWAY, 26 | }, 27 | }); 28 | 29 | export default ResourceSavingContainer; 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Krzysztof Magiera 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-resource-saving-container", 3 | "version": "1.0.2", 4 | "description": 5 | "View container that saves resources (bitmaps, camera) by detaching native views when they are not visible", 6 | "scripts": { 7 | "start": "node node_modules/react-native/local-cli/cli.js start", 8 | "test": "jest", 9 | "precommit": "lint-staged" 10 | }, 11 | "main": "ResourceSavingContainer.js", 12 | "files": ["README.md", "ResourceSavingContainer.js"], 13 | "repository": { 14 | "type": "git", 15 | "url": 16 | "git+https://github.com/SoftwareMansion/react-native-resource-saving-container.git" 17 | }, 18 | "author": { 19 | "email": "krzys@swmansion.com", 20 | "name": "Krzysztof Magiera" 21 | }, 22 | "license": "MIT", 23 | "readmeFilename": "README.md", 24 | "bugs": { 25 | "url": 26 | "https://github.com/SoftwareMansion/react-native-resource-saving-container/issues" 27 | }, 28 | "homepage": 29 | "https://github.com/SoftwareMansion/react-native-resource-saving-container#readme", 30 | "dependencies": {}, 31 | "peerDependencies": { 32 | "react": "> 15.0.0", 33 | "react-native": ">= 0.47.0" 34 | }, 35 | "jest": { 36 | "preset": "jest-react-native" 37 | }, 38 | "devDependencies": { 39 | "babel-jest": "16.0.0", 40 | "babel-preset-react-native": "1.9.0", 41 | "husky": "^0.14.3", 42 | "jest": "16.0.2", 43 | "jest-react-native": "16.0.0", 44 | "lint-staged": "^4.0.3", 45 | "prettier": "^1.7.0", 46 | "react-test-renderer": "15.3.2", 47 | "react": "^16.0.0", 48 | "react-native": "^0.50.1" 49 | }, 50 | "lint-staged": { 51 | "*.js": [ 52 | "prettier --write --print-width 80 --tab-width 2 --single-quote --jsx-bracket-same-line=true --trailing-comma=es5", 53 | "git add" 54 | ] 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-resource-saving-container 2 | 3 | This is a very tiny React Native component that allows for saving memory by releasing resources attached to views that may are not visible on screen. 4 | 5 | ## How it works? 6 | 7 | When native views are rendered in your React Native app, the framework creates corresponding native views and mounts them in view hierarchy. Native views provides the platform with a way how they should be rendered on screen, but a part of that they can also consume memory. For example Image component keeps a reference to a bitmap that it needs to rende, Camera component keeps the camera session active which results in increased power consumption used by camera hardware and processor unit as well as memoty consumption used for buffering. When such a views are rendered but not visible on a screen (perhaps they are few levels down navigation hierarchy) they can still take up resources they need for rendering. 8 | 9 | `ResourceSavingContainer` allows for such a components to release their resources using technique that has been in React Native forever -- [`removeClippedSubviews`](https://facebook.github.io/react-native/docs/view.html#removeclippedsubviews) property. 10 | This property allows for components rendered in javascript to be instantiated in native but detached from the native view hierarchy when outside of their parent's visible bounds. 11 | 12 | ## How to use it 13 | 14 | Use `` as a container in which you want to put resource intensive components (e.g. images, or even whole screens from navigation stack). When your components are not expected to be visible (e.g. they have been covered by other navigation card) set `visible={false}` to detach all children from native view hierarchy. 15 | 16 | First import `` component like this: 17 | ```js 18 | import ResourceSavingContainer from 'react-native-resource-saving-container'; 19 | ``` 20 | 21 | Then use it in your render method: 22 | ```js 23 | 26 | 27 | 28 | ``` 29 | 30 | ## Sample usecases 31 | 32 | ### Custom made Tabs container 33 | 34 | With Tabs container you want to display a few different screens (tabs) in one place on screen and allow users to switch between them from the TabBar. 35 | One option is to render only one screen at a time and when user switches the tab we unmount the previous tab and render the new one. 36 | With this approach when user switches the tab we loos its state (e.g. scroll position, filled input fields etc). 37 | In order to keep component state one option is to keep previous Tab mounted in React, just hide it from user. 38 | Although if such a screen displays video content, uses camera or displays lots of high resolution images and on top of that we have a few such screens mounted at a time we may soon run out of resources. 39 | The solution to that problem is instead of hiding inactive tabs (e.g. using opacity or setting display property to none), we can use `` that will take care of releasing resources when its `visible` prop is set to `false`. 40 | 41 | Here is a short sketch of how the code for such a Tab component would look like. This is not a reacy (nor working) code but you can use it as a reference when writing your own Tabs component: 42 | ```js 43 | 44 | class TabsContainer extends Component { 45 | state = { 46 | activeTabID: 0, 47 | }; 48 | render() { 49 | const tabs = [ 50 | ...Array(this.props.numerOfTabs).keys() 51 | ].map(tabID => ( 52 | 53 | {this.props.renderTab(tabID)} 54 | 55 | )); 56 | return ( 57 | 58 | {tabs} 59 | this.setState({ activeTabID: tabID })}> 62 | 63 | ) 64 | } 65 | } 66 | 67 | ``` 68 | 69 | 70 | ## Caveats 71 | 72 | `` uses relative positioning to move its childrent outside of the visible bounds therefore children rendered directly under `ResourceSavingContainer` should not use absolute positioning. If you need absolute positioning you can render relatively positioned `` inside `` and then use `absolute` positioning inside of that ``. 73 | 74 | ## Troubleshooting 75 | 76 | Try searching over the issues on [GitHub here](https://github.com/SoftwareMansion/react-native-resource-saving-container/issues). If you don't find anything that would help feel free to open a new issue! 77 | 78 | You could also just read the source code - it only has [a few lines](https://github.com/SoftwareMansion/react-native-resource-saving-container/blob/master/ResourceSavingContainer.js). --------------------------------------------------------------------------------