Code & Load Mobile Apps from Cloud.

Easiest low code framework for building and updating native mobile apps in realtime

PLAY LIVE

Try it Live

Edit code below

const submitButton = {
    component: "icon_button",
    value: 'check',
    props: {
        size: 20,
        style: {
            backgroundColor: "#6559cc",
            color: "white"
        },
        iconColor: 'white',
        containerColor: '#6559cc',
    },
    hide: false,
    onPress: ({ uiElements, setUi, getUi }) => {
        const textInputObj = getUi("text_input")
        const listViewObj = getUi("list_view")

if (textInputObj.value != "") {
            const existing = listViewObj.listData;
            const updated = [...existing, { todo: textInputObj.value, completed: false }];
            listViewObj.listData = updated;
            textInputObj.value = "";
        }
        setUi("text_input", textInputObj, false);
        setUi("list_view", listViewObj);
    }
};

const textInput = {
    component: "text_input",
    value: '',
    name: "text_input",
    props: {
        style: {
            width: 150,
            backgroundColor: "white",
            borderColor: "#800460",
            color: "red",
            fontSize: 12

},
        theme: {
            colors:
            {
                primary: '#6559cc',
                placeholder: '#6559cc'
            }
        },
        mode: "outlined",
        label: "New Todo",
        placeholder: "Add new by typing ...",
    },
    hide: false,
    onChangeText: ({ uiElements, setUi, getUi, methodValues }) => {
        const textInputObj = getUi("text_input")
        textInputObj.value = methodValues;
        setUi("text_input", textInputObj);
    }
};

const view = {
    component: "view",
    content: [textInput, submitButton],
    props: {
        style: {
            flex: 1,
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "center",
            position: "absolute",
            bottom: 10,
            width: 250
        }
    }
};

const todoData = [
    { todo: "Clean House", completed: false },
    { todo: "Paint Walls", completed: false },
];

const todoText = {
    component: "text",
    name: 'todo',
    value: 'Normal',
    props: {
        style: {
            flexGrow: 1,
            color: "black",
            fontWeight: "700",
            fontSize: 12
        }
    }
};

const completedCheckbox = {
    component: "checkbox",
    value: false,
    name: "completed",
    props: {
        style: {

},
        color: "black",
        uncheckedColor: "black"
    },
    onPress: ({ setUi, getUi, componentParams }) => {

const { index, itemJson, itemData, listData } = componentParams
    
        const listViewObj = getUi("list_view")
        const updatedList = listData.map((item, i) => {
          if (index == i) {
            return {
              "todo": item.todo,
              "completed": !item.completed
            }
          } else {
            return item
          }
        })
        listViewObj['listData'] = updatedList
    
        setUi("list_view", listViewObj);  
    }

};

const cancelIcon = {
    component: "icon_button",
    value: 'delete',
    props: {
        size: 20,
        color: 'white',
        iconColor: "#6559cc"
    },
    onPress: ({ setUi, getUi, componentParams }) => {

const { index, itemJson, itemData, listData } = componentParams
    
        const listViewObj = getUi("list_view")
        const newListData = listData.filter((dataObject) => dataObject['todo'] !== itemData.todo);
        listViewObj['listData'] = newListData;
        setUi("list_view", listViewObj);
        
    }

};

const headerText = {
    component: "text",
    value: 'Todo App',
    props: {
        style: {
            fontSize: 16,
            fontWeight: "bold",
            textAlign: "center",
            color: "white",
            paddingVertical: 12,
            backgroundColor: "#6559cc",
            position: "absolute",
            top: 0,
            left: 0,
            right: 0,
            zIndex: 3
        }
    }
};

const screen = {
    name: "Todo App",
    screen: {
        v1: [headerText,list],
        h1: [view]
    },
    props:{
        screenProps: {
            options: {
                "headerShown": false
            }
        },
        style: { flex: 1, backgroundColor: "white" }
    }
};

Code & Load Mobile Apps from Cloud.

PLAY LIVE

Try it Live

Demos

Todo App

Gallery App

Counter App

Weather App