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.
- No need to manage any
state variables.
- Ease of creating new components using
JSON.
- Easy to place components in
horizontal and vertical directions.
- Ability for every component on the screen to access and change the every other component.
- Ability for all action/life-cycle event methods to have control over
database, navigation, uiElements, notifications and session.
- Separating Ui from Logic 100%.
- 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\"}}}]"
OR
```javascript
// 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
``` javascript
import {NanoApp} from 'react-native-nano';
...
const App = () => {
return ;
};
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
``` javascript
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](https://docs.nanoapp.dev/docs/guide/understanding-layout).
And after that simply add it to the NanoApp component like below
``` javascript
import {NanoApp} from 'react-native-nano';
...
const App = () => {
return ;
};
export default App;
```
### Adding multiple Screens
You can actually add as many screens as you want to NanoApp component just like below
``` javascript
const App = () => {
return ;
};
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)
```javascript
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 ;
};
export default App;
```
2. We can build our app using js objects. The following code is an app that increases number on button clicks.
``` javascript
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.
``` javascript
import {NanoApp} from 'react-native-nano';
...
const App = () => {
return ;
};
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](https://reactnavigation.org/)
2. [react native paper](https://reactnativepaper.com/)
3. [realm](https://realm.io/)
4. [recyclerlistview](https://github.com/Flipkart/recyclerlistview)
4. [react native vector icons](https://oblador.github.io/react-native-vector-icons/)
5. [react native animatable](https://github.com/oblador/react-native-animatable)
6. [react native reanimated](https://github.com/software-mansion/react-native-reanimated)