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