Create Package

In Nano, you can creates your own packages consisting of components and modules like below.

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

const packages = [{
  name: '<package_name>',
  components:[
  {
    name:'<component_name>',
    component:<MyComponent>,
  }],
  modules:[
  {
    name:'<module_name>',
    module:MyModule,
  }]
}]

const  App = () => {
    return <NanoApp packages={packages}  />;
};
export  default  App;

With custom components, you can use your components as JSON like below.

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

With custom modules, you can use your modules via moduleParams argument in any method like below.

const  customView = {
  name:"button",
  component:  'button',
  value:"Hello",
  props: {
      style: {
          alignSelf:  'center',
          justifyContent:  'center'
          backgroundColor:'blue',
      }
  }
  onPress:({moduleParams})=>{
    const myModule = moduleParams['<module_name>'];
  }
};

Packages are a great way of using different UI component packages in your app(rather than using the inbuilt react-native-paper components). They also allow using other third party modules such as googleSignIn, firebase, base64 , etc in inbuilt methods.

NanoApp takes packages via packages prop.

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

Each individual package object accepts

Key	Usage
name	package name useful when using custom packages in JSON code
appStart	function which gets called when app loads for the first time appStart:({moduleParams})=>{ }
components	array of component objects const components = [{ name:"custom_view", // name to use the component component:CustomView, // our actual customComponent }]
modules	array of module objects const modules = [{ name:"custom_module", module:MyModule, }]