Skip to main content
Version: Next

Custom Component

As we have seen the structure of package, lets actually use it to include our own custom component in Nano.

With custom components, you can use your own customly built components as JSON in Nano .

For example, lets add our own customComponent called CustomViewComponent and use it in Nano.

Lets define CustomViewComponent.js as

CustomViewComponent.js

import React, {useEffect} from 'react';
import {View} from 'react-native';

function CustomViewComponent({elementProps, getViewItems, onElementLoaded}) {

useEffect(() => {
onElementLoaded(elementProps);
}, []);

return (
<View
{...elementProps['props']}
{...elementProps}
>

// Your custom code

</View>
);
}

export default CustomViewComponent;

Now, to use this CustomViewComponent in our Nano app, we have to give it via the packages props of NanoApp component.

We know packages prop accepts an array of objects with each object representing a single package.

so lets define a customPackage and give it to packages

CustomPackage.js
import CustomViewComponent from 'CustomViewComponent'

const customPackage = {
name:'my_custom_package',
components:[
{
name:'custom_view_component', // name to use the component
component:CustomViewComponent, // our actual customComponent
}
],
};
export default customPackage;

And now lets provide this customPackage to packages prop of NanoApp.

packages prop takes an array of custompackages.

import {NanoApp} from  'react-native-nano';

import CustomPackage from 'CustomPackage'

const App = () => {
return <NanoApp packages={[CustomPackage]} screens={[screen]} />;
};
export default App;

Now, lets use our CustomView component via JSON.


const customView = {
package:'my_custom_package',
name:"my_custom_view",
component: 'custom_view_component',
content:[]
props: {
style: {
alignSelf: 'center',
justifyContent: 'center'
backgroundColor:'blue',
}
}
};


const screen = {
name: 'HomeScreen',
screen: {
v1: [customView],
},
props: {
style: { flex: 1, justifyContent: 'center' }
}
};