{"id":22725182,"url":"https://github.com/meinto/react-native-mirror","last_synced_at":"2025-04-13T19:08:00.898Z","repository":{"id":57338424,"uuid":"91740782","full_name":"meinto/react-native-mirror","owner":"meinto","description":"Library to mirror equal react-native components","archived":false,"fork":false,"pushed_at":"2018-08-06T05:35:16.000Z","size":245,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-01T04:07:06.146Z","etag":null,"topics":["javascript","mirror","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/meinto.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-18T21:52:56.000Z","updated_at":"2020-08-11T11:34:17.000Z","dependencies_parsed_at":"2022-09-07T10:10:23.812Z","dependency_job_id":null,"html_url":"https://github.com/meinto/react-native-mirror","commit_stats":null,"previous_names":["tobiasmeinhardt/react-native-mirror"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meinto%2Freact-native-mirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meinto%2Freact-native-mirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meinto%2Freact-native-mirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/meinto%2Freact-native-mirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/meinto","download_url":"https://codeload.github.com/meinto/react-native-mirror/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":229082285,"owners_count":18017251,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","mirror","react-native"],"created_at":"2024-12-10T15:10:09.392Z","updated_at":"2024-12-10T15:10:10.069Z","avatar_url":"https://github.com/meinto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-native-mirror\n\n[![npm version](https://badge.fury.io/js/react-native-mirror.svg)](https://badge.fury.io/js/react-native-mirror)\n[![dependencie status](https://david-dm.org/tobiasMeinhardt/react-native-mirror.svg)](https://david-dm.org/tobiasMeinhardt/react-native-mirror)\n[![dev-dependency status](https://david-dm.org/tobiasMeinhardt/react-native-mirror/dev-status.svg)](https://david-dm.org/tobiasMeinhardt/react-native-mirror?type=dev)\n[![npm](https://img.shields.io/npm/dm/react-native-mirror.svg)](https://www.npmjs.com/package/react-native-mirror)\n[![npm](https://img.shields.io/npm/dt/react-native-mirror.svg)](https://www.npmjs.com/package/react-native-mirror)\n[![travis build](https://travis-ci.org/meinto/react-native-mirror.svg?branch=master)](https://travis-ci.org/meinto/react-native-mirror)\n\n![Imgur](http://i.imgur.com/X72nd4Q.gif)\n\n# Installation\n\n```\nnpm install --save react-native-mirror\n```\n\nor \n\n```\nyarn add react-native-mirror\n```\n\n# Basic Usage\n\nWith ```react-native-mirror``` you can inject all properties of a component and forward the result of the prop-function to a clone of the component. The data can be forwarded to another prop or to an instance function of the same hirarchic component. \n\nLet's say we have a the following viewtree and a \"clone\" of it:\n\n```javascript\nconst component = () =\u003e (\n    \u003cView\u003e\n        \u003cScrollView /\u003e\n    \u003c/View\u003e\n)\n\n// it has the same structure like the component above\nconst cloneComponent = () =\u003e (\n    \u003cView\u003e\n        \u003cScrollView /\u003e\n    \u003c/View\u003e\n)\n```\n\nNow you want to forward the scroll position of the first ```\u003cScrollView /\u003e``` to the second ```\u003cScrollView /\u003e```. All you have to do is to wrap both components with the ```\u003cMirror /\u003e``` component and add the ```scrollviewBootstrap``` variable from the lib to ```mirroredProps``` like below.\n\n```javascript\nimport Mirror, { scrollviewBootstrap } from 'react-native-mirror'\n\nconst component = () =\u003e (\n    \u003cMirror mirroredProps={[scrollviewBootstrap]}\u003e\n        \u003cView\u003e\n            \u003cScrollView /\u003e\n        \u003c/View\u003e\n    \u003c/Mirror\u003e\n)\n\n// it has the same structure like the component above\nconst cloneComponent = () =\u003e (\n    \u003cMirror mirroredProps={[scrollviewBootstrap]}\u003e\n        \u003cView\u003e\n            \u003cScrollView /\u003e\n        \u003c/View\u003e\n    \u003c/Mirror\u003e\n)\n```\n## Bootstraps\n\nAt the moment there are bootstraps for basic prop-forwarding for ```\u003cScrollView /\u003e``` and all kinds of ```\u003cTouchableHighlight /\u003e```:\n\n* scrollviewBootstrap\n* touchableBootstrap\n\nSimply add them to the ```mirroredProps``` property of the ```\u003cMirror /\u003e```. The ```scrollviewBootstrap``` forwards the scroll position to the cloned ```\u003cScrollView /\u003e``` ('s) and make it scroll to the same position.\n\nBe careful with the ```touchableBootstrap```. It forwards the onPress (onPressIn, onPressOut, ...) property to the clone. Keep in mind, that this triggers the property action also on the clone (maybe a download or navigation action or something).\n\n## Custom forwarding / injection\n\nThe ```mirroredProps``` property of the ```\u003cMirror /\u003e``` takes an array of forwarding objects. The objects must have the folowing structure:\n\n```javascript\n{\n    // array of strings of component types. e.g.: 'ScrollView'\n    componentTypes: React.PropTypes.array,\n    // name of the property you want to forward. e.g.: 'onScroll'\n    fromProp: React.PropTypes.string,\n    \n    // name of the clone-property which receives the data. e.g.: 'customScrollTo'\n    toProp: React.PropTypes.string,\n    // or\n    // name of the clone-instanceMethod which receives the data. e.g.: 'scrollTo'\n    toInstance: React.PropTypes.string,\n    \n    // function to extract the forwarding data \n    dataExtractor: React.PropTypes.func,\n}\n```\n\nThe ```dataExtractor``` receives the plain data from the property defined in ```fromProp``` and returns the data which should be forwarded...\n\n## Example with custom components\n\nWhen you want to mirror custom components you have different choises. You can turn on the auto component detection with the property ```experimentalComponentDetection={true}```, set on the ```\u003cMirror /\u003e``` component. Like the name sais, this functionality is experimental...\n\nWhen you don't want to use the auto detection you have to flag your custom components with a property ```mirrorClassComponent={true}``` or ```mirrorFunctionalComponent={true}```. Be careful with this and make sure you set them properly (```mirrorClassComponent``` for **class components only** and ```mirrorFunctionalComponent``` for **functional components only**!)\n\nIf you don't set them right your app will throw a error message *\"Cannot call a class as a function\"*.\n\n### Example with auto detection\n\n```javascript\nimport Mirror, {\n  scrollviewBootstrap,\n  touchableBootstrap,\n} from 'react-native-mirror'\n\nexport default class MirrorExample extends Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cMirror\n            experimentalComponentDetection={true}\n            mirroredProps={[\n              scrollviewBootstrap,\n              touchableBootstrap,\n            ]}\n        \u003e\n          \u003cExampleView /\u003e\n        \u003c/Mirror\u003e\n        \u003cMirror \n            experimentalComponentDetection={true}\n            mirroredProps={[\n              scrollviewBootstrap,\n              touchableBootstrap,\n            ]}\n        \u003e\n          \u003cExampleView /\u003e\n        \u003c/Mirror\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n### Example with manual component detection\n\nIn the following example i assume that the custom Component ```\u003cExampleView /\u003e``` is a class component.\n\n```javascript\nimport Mirror, {\n  scrollviewBootstrap,\n  touchableBootstrap,\n} from 'react-native-mirror'\n\nexport default class MirrorExample extends Component {\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        \u003cMirror mirroredProps={[\n          scrollviewBootstrap,\n          touchableBootstrap,\n        ]}\u003e\n          \u003cExampleView mirrorClassComponent={true}/\u003e\n        \u003c/Mirror\u003e\n        \u003cMirror mirroredProps={[\n          scrollviewBootstrap,\n          touchableBootstrap,\n        ]}\u003e\n          \u003cExampleView mirrorClassComponent={true}/\u003e\n        \u003c/Mirror\u003e\n      \u003c/View\u003e\n    )\n  }\n}\n```\n\n# API\n\n| prop name                      | functionality                                                   |\n| ------------------------------ | --------------------------------------------------------------- |\n| connectionId                   | an Id that indicates which Mirrors are connected                |\n| containerStyle                 | style the Mirror view-container (normaly not needed)            |\n| mirroredProps                  | see the description in the topic above                          |\n| experimentalComponentDetection | mirrors custom components automatically (see description above) |\n\n# Questions, enhancements or improvements?\n\n... then open up an issue! :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeinto%2Freact-native-mirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmeinto%2Freact-native-mirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmeinto%2Freact-native-mirror/lists"}