Quickstart

Get up and running with react-native-nano

Getting Started

react-native-nano allows anyone to develop mobile apps on top of react-native with minimal and almost negligible coding. This quick start guide explains how to get started as quickly as possible.

Simple Counter App

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 = {
    name:"text",
    component:  NANO.TEXT,
    value:  1,
    props: {
        style: {
            fontSize:  50,
            alignSelf:  'center',
            justifyContent:  'center',
            color: "black"
        }
    }
};

// creating a button component to click and increase number.
const  increaseCountButton = {
    component:  NANO.BUTTON,
    value:  'CLICK ME TO INCREASE',
    props: {
        style: {
            backgroundColor: '#6559cc',
        },
        textColor:"white"
    },
    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: 'CounterApp',
    screen: {
        v1: [countText, increaseCountButton],
    },
    props: {
        style: { flex: 1, justifyContent: 'center' }
    }
};

Counter App example

Loading...

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;

Now you have an app that counts number starting from 1 on button clicks.