Creating a screen

Easy way to create a Screen

Adding single screen:

When using Nano, creating components is little bit different from a typical react native project. In Nano, we create component in the form of JSON and add it to NanoApp component. Nano will render the component on screen.

For example, below is the text component.

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

const text = {
  component: NANO.TEXT,
  name: 'text',
  value: 'This is the sample text',
  props: {
    style: {
    
    }
  }
};


const screen = {
    name: 'WelcomeScreen',
    screen: {
        v1: [text],
    },
    props : {
        style: { flex: 1, justifyContent: 'center' },
    }
};

nano makes it easy to place components in horizontal and vertical directions in a screen. it uses horizontal and vertical keys read more about them here. And after that simply add it to the NanoApp component like below

import {NanoApp} from  'react-native-nano';
...
const  App = () => {
    return <NanoApp screens={[screen]} />;
};
export  default  App;

Nano uses react-native-paper components by default.

Adding multiple Screens:

You can actually add as many screens as you want to NanoApp component just like below

const  App = () => {
    return <NanoApp screens={[
                             screen1, 
                             screen2, 
                             screen3, 
                             screen4
                             ...
                             
                             ]} />;
};
export  default  App;

Component Parameters:

While creating components in JSON structure, these are the keys can be implemented.

 

Keys	Required	Description
name	yes	The unique name one must provide for later use with no spaces.
component	yes	The name of the inbuilt  component see here for the whole list.
package	no	By default it uses `react-native-paper`, mention here if you want to load component from any other package.
value	no	The default value of the component if it is input component, otherwise leave it.
props	no	props related to that component, see react-native-paper
content	no	it takes another component as JSON. It will be nested inside. It will only be used when there is possibility of nesting. Ex: NANO.VIEW
animation	no	Nano has simple and advanced keys to implement complex animations, for example animation value can be { simple:{ animation: 'bounce', iterationCount: 'infinite', }, advanced: [ { runIn: 'series', run: [ { type: 'timing', componentProps: { style: { fontSize: 10, }, } } ] } ] }
hide	no	if hide is 'true', component will be removed
platform	no	You can set this for rendering component only for specfific platforms. Example, `android|ios|web`, `android`, `ios`, `ios|android` etc. if not specified, component will be rendered in all platforms(web, android and ios).
network	no	You can connect to remote server see here for more deatils
onPress	no	onPress method is called when user clicks on the component.
onLongPress	no	onLongPress method is called when user long clicks on the component.

Screen Parameters:

While creating screen components in JSON structure, these are the keys can be implemented.

Keys	Required	Description
name	yes	The unique name of the screen in with no spaces, example WelcomeScreen and LoginScreen .etc.
screen	yes	Add all the screen components to this key in either using vertical (v1, v2, v3, v4, v5 ..... vn ) or horizontal (h1, h2, h3, h4, h5 ..... hn) keys. for more details check here.
props	no	The props to apply for the screen.
onStart	no	This method is called when screen is mounted.
onEnd	no	This method is called when screen is unmounted.
onResume	no	This method is called whenever screen is focused.
onPause	no	This method is called whenever screen is out of focus.
props	no	props: { screenProps: { options: { headerShown: true, headerTitle: "Sign In", headerBackTitleVisible: false }, }, style: { flex: 1, backgroundColor: '#ffffff', alignItems: 'center', paddingTop: 100, justifyContent: "center", }, scrollViewProps: { contentContainerStyle: { paddingTop: 100, paddingBottom: 300, alignItems: 'center', justifyContent: "center", }, }, scroll: true // }
logic	no	Instead of implementing methods to onPress or onLongPress or any other methods directly in JSON structure for a component, you can provide those methods here in an object. For example, { "onButtonPress": ({setUi, getUi, moduleParams}) => { // do something here } } and then you can reference this method in your component like this const button = { component: NANO.BUTTON, name: 'button', onPress: 'onButtonPress' };