Skip to content
This repository has been archived by the owner on Dec 2, 2021. It is now read-only.

ojaynico/ojaynico-kotlin-native-base

Repository files navigation

NOTE: Development on this project has been stopped. All effort will be put into improving the core React Native library which can be found in the repository https://github.com/ojaynico/ojaynico-kotlin-react-native

ojaynico-kotlin-native-base

Maven Central Maven Central Kotlin npm version npm version Kotlin JS IR supported

Kotlin Wrapper for Native Base

Available components: All native base components are available in this wrapper. Check them out using the URL below:

https://nativebase.io/

How to use the wrapper?

Use the cli tool below to generate a new Kotlin React Native application.

https://github.com/ojaynico/create-ojaynico-krn

Proceed to the next step after generating the project.

Run the following command in your projects root directory.

npm install native-base --save

In your react native application shared module (a kotlin gradle project), update your gradle file to include the following in the respective blocks.

repositories {
    mavenCentral()
}

dependencies {
    implementation("com.github.ojaynico:ojaynico-kotlin-native-base:1.0.4")
}

Example of code snippet for a native base app using the above wrapper

import ojaynico.kotlin.native.base.*
import ojaynico.kotlin.react.native.AppRegistry
import react.RBuilder
import react.RComponent
import react.RProps
import react.RState

class App : RComponent<RProps, RState>() {
    override fun RBuilder.render() {
        container {
            header {
                left {
                    button {
                        attrs.transparent = true
                        icon {
                            name = "menu"
                        }
                    }
                }
                body {
                    title("Header") {

                    }
                }
                right {  }
            }
            content {
                text("This is Content Section") {}
            }
            footer {
                footerTab {
                    button {
                        attrs.full = true
                        text("Footer") {

                        }
                    }
                }
            }
        }
    }
}

fun main() {
    AppRegistry.registerComponent("NativeBase") { App::class.js }
}