Skip to main content
Version: 1.0.52

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

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

// increase count by 1
uiElements['v1'][0]['value'] = uiElements['v1'][0]['value'] + 1;


setUi(uiElements);

}
};

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

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

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

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

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