https://github.com/meinto/react-native-mirror
Library to mirror equal react-native components
https://github.com/meinto/react-native-mirror
javascript mirror react-native
Last synced: about 1 year ago
JSON representation
Library to mirror equal react-native components
- Host: GitHub
- URL: https://github.com/meinto/react-native-mirror
- Owner: meinto
- License: mit
- Created: 2017-05-18T21:52:56.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-08-06T05:35:16.000Z (almost 8 years ago)
- Last Synced: 2024-12-01T04:07:06.146Z (over 1 year ago)
- Topics: javascript, mirror, react-native
- Language: JavaScript
- Homepage:
- Size: 239 KB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-mirror
[](https://badge.fury.io/js/react-native-mirror)
[](https://david-dm.org/tobiasMeinhardt/react-native-mirror)
[](https://david-dm.org/tobiasMeinhardt/react-native-mirror?type=dev)
[](https://www.npmjs.com/package/react-native-mirror)
[](https://www.npmjs.com/package/react-native-mirror)
[](https://travis-ci.org/meinto/react-native-mirror)
# Installation
```
npm install --save react-native-mirror
```
or
```
yarn add react-native-mirror
```
# Basic Usage
With ```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.
Let's say we have a the following viewtree and a "clone" of it:
```javascript
const component = () => (
)
// it has the same structure like the component above
const cloneComponent = () => (
)
```
Now you want to forward the scroll position of the first `````` to the second ``````. All you have to do is to wrap both components with the `````` component and add the ```scrollviewBootstrap``` variable from the lib to ```mirroredProps``` like below.
```javascript
import Mirror, { scrollviewBootstrap } from 'react-native-mirror'
const component = () => (
)
// it has the same structure like the component above
const cloneComponent = () => (
)
```
## Bootstraps
At the moment there are bootstraps for basic prop-forwarding for `````` and all kinds of ``````:
* scrollviewBootstrap
* touchableBootstrap
Simply add them to the ```mirroredProps``` property of the ``````. The ```scrollviewBootstrap``` forwards the scroll position to the cloned `````` ('s) and make it scroll to the same position.
Be 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).
## Custom forwarding / injection
The ```mirroredProps``` property of the `````` takes an array of forwarding objects. The objects must have the folowing structure:
```javascript
{
// array of strings of component types. e.g.: 'ScrollView'
componentTypes: React.PropTypes.array,
// name of the property you want to forward. e.g.: 'onScroll'
fromProp: React.PropTypes.string,
// name of the clone-property which receives the data. e.g.: 'customScrollTo'
toProp: React.PropTypes.string,
// or
// name of the clone-instanceMethod which receives the data. e.g.: 'scrollTo'
toInstance: React.PropTypes.string,
// function to extract the forwarding data
dataExtractor: React.PropTypes.func,
}
```
The ```dataExtractor``` receives the plain data from the property defined in ```fromProp``` and returns the data which should be forwarded...
## Example with custom components
When 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 `````` component. Like the name sais, this functionality is experimental...
When 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**!)
If you don't set them right your app will throw a error message *"Cannot call a class as a function"*.
### Example with auto detection
```javascript
import Mirror, {
scrollviewBootstrap,
touchableBootstrap,
} from 'react-native-mirror'
export default class MirrorExample extends Component {
render() {
return (
)
}
}
```
### Example with manual component detection
In the following example i assume that the custom Component `````` is a class component.
```javascript
import Mirror, {
scrollviewBootstrap,
touchableBootstrap,
} from 'react-native-mirror'
export default class MirrorExample extends Component {
render() {
return (
)
}
}
```
# API
| prop name | functionality |
| ------------------------------ | --------------------------------------------------------------- |
| connectionId | an Id that indicates which Mirrors are connected |
| containerStyle | style the Mirror view-container (normaly not needed) |
| mirroredProps | see the description in the topic above |
| experimentalComponentDetection | mirrors custom components automatically (see description above) |
# Questions, enhancements or improvements?
... then open up an issue! :)