react-native-remote-view v1.0.0
react-native-remote-view
React Native Remote View
Installation
npm install react-native-remote-view
How to use
withRemote(ComponentName)(fetchParams, [remoteProps])
ComponentName
: Required. Name of component.fetchParams
: Required. `{ url: string; method?: string; headers?: {}; key: string: any; }.
remoteProps
: Optional. It is an object which is passed as prop to remote component and is accessibe in remote code as one of the props.
Let's say, you have component called Button
which you want to render using remote code and it is located at Components/Button.js
.
NOTE: Steps can be followed in any order.
Step - Wrap component
import withRemote from '../Remote'
function Button(props) {}
export default withRemote(Button)({ url: '' }, {
someKey: someValue,
})
Step - Copy-Paste component's code in CMS
Make sure, you remove the withRemote
from copied code. Component's code in CMS must not contain withRemote
.
function Button(props) {}
export default Button
Step - Provide dependencies
Dependency is module that is imported in component using import
.
Open file Remote/dependenciesMap.js
The file has 3 sections. First section import node_modules
, second section import those modules which are reusable and shared among multiple remote components and the third one is to import modules that are specific to some remote component. The sections are just for readabilty.
/* node_modules. */
import React from 'react'
import * as ReactNative from 'react-native'
/* Local modules - used in multiple places. */
import * as Themes from '../Themes'
/* Specific to component. */
// Components/Button.js
// Import Button dependencies here.
export default {
// node_modules
react: React,
'react-native': ReactNative,
// Shared local modules.
'../Themes': Themes,
// Components/Button.js
// Add Button dependencies here.
}
How to identify the dependencies for component
Check the Button
compoenent below.
import React from 'react'
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native'
import { Colors, Fonts } from '../Themes'
import styles from './Styles/ButtonStyles'
function Button(props) {}
export default Button
4 modules are imported. In transpiled code, module's path after from
becomes an identifier. For example, for import React from 'react'
, react
will become an identifier and for import { Colors, Fonts } from '../Themes'
, ../Themes
will become a identifier.
Now, import these 4 modules in file dependenciesMap.js
and add them to exported object.
- You do not need to import and add module as dependency if it is already included.
- Destructured import like
import { Colors, Fonts } from '../Themes'
must be imported likeimport * as Themes from '../Themes'
import React from 'react'
import * as ReactNative from 'react-native'
import * as Themes from '../Themes'
import styles from '../Components/Styles/ButtonStyles'
export default {
// node_modules
react: React,
'react-native': ReactNative,
// Shared local modules.
'../Themes': Themes,
// Components/Button.js
'./Styles/ButtonStyles': styles,
}
Transpile into AMD
The remote code is transpiled into AMD. In case, if you want to check the dependencies then check the first arg of type array
in define
function of transpiled code. Do not worry about exports
value. It is automatically added by RemoteHOC.
define([
"exports",
"prop-types",
"react",
"react-native-elements",
"react-native",
"../Themes",
], function (
_exports,
_propTypes,
_react,
_reactNativeElements,
_reactNative,
_Themes
) {
"use strict";
//...
}