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',
}
}
};
// creating a button component to click and increase number.
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: '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.