Custom component

You can create your own component according to your needs and use it as JSON in your code.

Here is a simple example to create a simple custom component called CustomView

CustomView.js

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

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

  return (
    <View
      {...elementProps['props']}
      {...elementProps}
    >
    
    // Your custom code

    </View>
  );
}

export default CustomView;

And include the CustomView in RNNano componenent like below

import {RNNano} from  'react-native-nano';
import CustomView from 'CustomView'

const customComponents = [
  {
    "name" :  "custom-view",
    "component" : CustomView
  }
]

const  App = () => {
    return <RNNano screens={[screen]} customComponents={customComponents} />;
};
export  default  App;

And use the CustomView in your JSON code while creating screen like below

const customView = {
  component: "custom-view",
  name: 'my-custom-view',
  value: '',
  props: {
    style: {
    
    },
  },
};


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