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