Overview

Nano helps you to develop complex mobile apps with low code (in JSON).

Links

nanoapp.dev | Playground

What is it ?

react-native-nano helps you to quickly develop complex mobile apps with low code (in JSON). Here are some of the benefits you get out of the box when you use Nano.

1. No need to manage any state variables.
2. Ease of creating new components using JSON.
3. Easy to place components in horizontal and vertical directions.
4. Ability for every component on the screen to access and change the every other component.
5. Ability for all action/life-cycle event methods to have control over database, navigation, uiElements, notifications and session.
6. Separating Ui from Logic 100%.
7. Ability to load UI (JSON) from your own server.

DEMO

Try it here.

Documentation

For more detailed documentation please click here

How to Install ?

For Newer Apps:

For newer apps, we recommend you to create new Nano app by using below command.

for latest version

    npx use-nano init MyFirstNanoProject 

for specific versions of react-native and react-native-nano versions

    npx use-nano init MyFirstNanoProject --nano-version 1.0.171 --react-native-version 0.72.6 

For Existing Apps:

You can install react-native-nano in your react-native app by using the below command.

    npm install react-native-nano --save

The above command will install necessary packages to run react-native-nano with react-native . You can use all react-native commands to start and run in Android and IOS.

QuickStart

When using Nano, creating screens is little bit different from a typical react native project. In Nano, we create screens in the form of JSON string or javascript objects and add it to NanoApp component.

// as a string
const screens = "[{\"name\":\"Welcome\",\"screen\":{\"v1\":[{\"component\":\"text\",\"name\":\"text\",\"value\":\"Welcome to Nano\"}]},\"props\":{\"style\":{\"flex\":1,\"justifyContent\":\"center\",\"alignItems\":\"center\"}}}]"

// as a JS object
const text = {
  component: 'text',
  name: 'text',
  value: 'Welcome to Nano',
};

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

And after that simply add it to the NanoApp component like below

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

export  default  App;

Both the above methods display a simple text "Welcome to Nano"

How to use ?

Adding single screen:

Below is text component rendered in a single screen

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

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


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;

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;

Simple Counter App

There are two ways to build Simple Counter App.

1. We can either give our app code as a string to NanoApp (very useful to load apps from server)

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

// below string contains entire simple counter app code
const screens = "[{\"name\":\"CountScreen\",\"screen\":{\"v1\":[{\"component\":\"text\",\"name\":\"text\",\"value\":1,\"props\":{\"style\":{\"fontSize\":50,\"alignSelf\":\"center\",\"justifyContent\":\"center\"}}},{\"component\":\"button\",\"value\":\"CLICK ME TO INCREASE\",\"onPress\":\"({setUi, getUi}) => {\\n      \\n      const textObj = getUi(\\\"text\\\")\\n          textObj.value = textObj.value + 1\\n          setUi(\\\"text\\\", textObj)\\n    }\"}]},\"props\":{\"style\":{\"flex\":1,\"justifyContent\":\"center\"}}}]"

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

2. We can build our app using js objects. The following code is an app that increases number on button clicks.

import { NANO } from  'react-native-nano';
	
// creating a text component to display numbers starting from 1.
const  countText = {
    component:  NANO.TEXT,
    name:'text',
    value:  1,
    props: {
	style: {
	    fontSize:  50,
	    alignSelf:  'center',
	    justifyContent:  'center',
	}
    }
};

// creating a button component to click and increase numbers.
const  increaseCountButton = {
    component:  NANO.BUTTON,
    value:  'CLICK ME TO INCREASE',
    onPress: ({setUi, getUi}) => {

            // increase count by 1
            const textObj = getUi("text")
            textObj.value = textObj.value + 1
            setUi("text", textObj)

    }
};

// Finally adding both components to screen with v1(vertical) tag.
const screen = {
    name: 'CountScreen',
    screen: {
	v1: [countText, increaseCountButton],
    },
    props:{
        style: { flex: 1, justifyContent: 'center' },
    }
};

Nano makes it easy to place components in horizontal and vertical directions in a screen. it uses keys v1, v2, v3, v4, v5 ..... vn to place components vertically and uses keys h1, h2, h3, h4, h5 ..... hn to place components horizontally.

Now add the above screen to the NanoApp component as shown below in the App.js file.

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

The above code displays text and button. When button is clicked the count text gets increased.

Dependencies

react-native-nano depends on following packages

1. react navigation
2. react native paper
3. realm
4. recyclerlistview
5. react native vector icons
6. react native animatable
7. react native reanimated