Skip to main content
Version: 1.0.161

Connect to server

You can ping to server more easily now.

Request server and get data:

you can create network object for any component and use fetch or axios to ping server.

For example, below is the button component in a screen. Whenever it is pressed, a request will go to server and get data.


const buttonPress = {
component: NANO.BUTTON,
value: 'CLICK ME',
onPress: ({ moduleParams }) => {
// this will get called first if network request action is 'onPress'
},
network:{
use: "fetch", // use `axios` if you want to use axios
action: "onPress" // use `onStart` if you want this request to be executed when component is mounted.
props:{
url: "",
method: "POST",
headers:{
},
body: {
}
// add more fetch parameters here
},
onSuccess: ({setUi, getUi, moduleParams, methodValues}) => {
const response = methodValues
console.log(response)

},
onFailure: ({setUi, getUi, moduleParams, methodValues}) => {
const response = methodValues
console.log(response)
}
}
};

const screen = {
name: 'HomeScreen',
screen: {
h1: [buttonPress]
}
};

Dynamic network props

In case if you want to dynamically create network props, you can do like below


const buttonPress = {
component: NANO.BUTTON,
value: 'CLICK ME',
onPress: ({ moduleParams }) => {
// this will get called first if network request action is 'onPress'
},
network:{
use: "fetch", // use `axios` if you want to use axios
action: "onPress" // use `onStart` if you want this request to be executed when component is loaded.
props:{
url: ({ moduleParams }) => {
// You can build a dynamic url here by using moduleParams data and return it
const url = "https://www.xxxx.com"
return url
},
method: "POST",
headers:({moduleParams}) => {
// You can build a dynamic headers here by using moduleParams data and return it

const headers = {
Authorization: "JWT " + moduleParams["database"].getValue("token")["value"]
}
return headers
},
body: ({getUi, moduleParams}) => {
// You can build a dynamic body here by using getUi data and return it
const textObj = getUi("text")

const body = {
name : textObj.value
}
return body
}
// add more fetch parameters here
},
onSuccess: ({setUi, getUi, moduleParams, methodValues}) => {
const response = methodValues
console.log(response)
},
onFailure: ({setUi, getUi, moduleParams, methodValues}) => {
const response = methodValues
console.log(response)
}
}
};

const screen = {
name: 'HomeScreen',
screen: {
h1: [buttonPress]
}
};