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
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
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' }
}
};