Skip to content

Commit

Permalink
- Added support for react native web navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@ojaynico
ojaynico committed Dec 1, 2021
1 parent 9a09f93 commit e26beb7
Show file tree
Hide file tree
Showing 3 changed files with 357 additions and 28 deletions.
213 changes: 209 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# ojaynico-kotlin-react-native
[![Maven Central](https://maven-badges.herokuapp.com/maven-central/com.github.ojaynico/ojaynico-kotlin-react-native/badge.svg)](https://search.maven.org/artifact/com.github.ojaynico/ojaynico-kotlin-react-native/1.1.6/pom)
[![Kotlin](https://img.shields.io/badge/kotlin-1.5.31-blue.svg?logo=kotlin)](http://kotlinlang.org)
[![Maven Central](https://maven-badges.herokuapp.com/maven-central/com.github.ojaynico/ojaynico-kotlin-react-native/badge.svg)](https://search.maven.org/artifact/com.github.ojaynico/ojaynico-kotlin-react-native/1.1.7/pom)
[![Kotlin](https://img.shields.io/badge/kotlin-1.6.0-blue.svg?logo=kotlin)](http://kotlinlang.org)
[![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react)
[![npm version](https://img.shields.io/npm/v/react-native?color=brightgreen&label=npm%20package)](https://www.npmjs.com/package/react-native)
[![Kotlin JS IR supported](https://img.shields.io/badge/Kotlin%2FJS-IR%20supported-yellow)](https://kotl.in/jsirsupported)
Expand Down Expand Up @@ -32,11 +32,11 @@ repositories {
}

dependencies {
implementation("com.github.ojaynico:ojaynico-kotlin-react-native:1.1.6")
implementation("com.github.ojaynico:ojaynico-kotlin-react-native:1.1.7")
}
```

### `Example of code snippet for a react native app using the above wrapper`
### `Example of a react native app using the above wrapper`

```kotlin
import ojaynico.kotlin.react.*
Expand Down Expand Up @@ -75,7 +75,212 @@ fun main() {
AppRegistry.registerComponent("MyApp") { App::class.js }
// For functional components (Assume App is the functional component)
// AppRegistry.registerComponent("MyApp") { App }

// Code below will work if you have added react native web dependency to your project.
// Visit how to set up react native web in your project for a detailed instruction.
// An example project using react native web is in the link at the end of this document.
if (Platform.OS == "web") {
AppRegistry.runApplication("MyApp", json {
rootTag = document.getElementById("root")
})
}
}
```

### `Example using Navigation`

```kotlin
import ojaynico.kotlin.react.*
import ojaynico.kotlin.react.native.AppRegistry
import ojaynico.kotlin.react.native.Platform
import kotlinx.browser.document
import react.*

val Menu = functionComponent<MenuProps> { props ->
view {
this.attrs.style = json {
flex = 1
backgroundColor = "white"
marginRight = "90%"
}

button {
title = "Screen Two"
onPress = {
// props being passed through a json object
// NOTE: An interface with the props below have to be defined and used by ScreenTwo component
props.navigator.push("ScreenTwo", json {
name = "Nicodemus Ojwee"
age = 25
school = "Namilyango College"
})
}
}
button {
title = "Screen Three"
onPress = {
props.navigator.push("ScreenThree", json { })
}
}

}
}

val App = functionComponent<Props> {
navigator {
this.attrs {
// Side Menu (from above) is passed as functional component prop
sideMenu = Menu
menuPosition = "left"
}
route {
this.attrs {
name = "ScreenOne"
component = ScreenOne
}
}
// pathVariables has to be defined as below if you plan to pass props in react native web
// pathVariables names are supposed to be similar and in the order in which you have defined your props interface in ScreenTwoProps
route {
this.attrs {
name = "ScreenTwo"
component = ScreenTwo
pathVariables = "name/age/school"
}
}
route {
this.attrs {
name = "ScreenThree"
component = ScreenThree
}
}
}
}

val ScreenOne = functionComponent<NavigationProps> { props ->
view {
this.attrs.style = json {
backgroundColor = "#59C9A5"
flex = 1
}

button {
title = "Menu"
onPress = {
props.navigator.showMenu()
}
}

button {
title = "Screen Two"
onPress = {
// props being passed through a json object
// NOTE: An interface with the props below have to be defined and used by ScreenTwo component
props.navigator.push("ScreenTwo", json {
name = "Nicodemus Ojwee"
age = 25
school = "Namilyango College"
})
}
}

button {
title = "Pop"
onPress = {
props.navigator.pop()
}
}
}
}

// If using web, the props defined in the interface below have to be defined as pathVariables
// in the route {} function above in App component and they have to follow the order.
external interface ScreenTwoProps : NavigationProps {
var name: String
var age: Int
var school: String
}

val ScreenTwo = functionComponent<ScreenTwoProps> { props ->
view {
this.attrs.style = json {
backgroundColor = "#23395B"
flex = 1
alignItems = "center"
justifyContent = "center"
}

button {
title = "Screen Three"
onPress = {
props.navigator.push("ScreenThree", json { })
}
}

button {
title = "Pop"
onPress = {
props.navigator.pop()
}
}

text("Name is " + props.name) {
this.attrs {
style = json {
color = "white"
}
}
}

text("Age is " + props.age) {
this.attrs {
style = json {
color = "white"
}
}
}

text("School is " + props.school) {
this.attrs {
style = json {
color = "white"
}
}
}
}
}

val ScreenThree = functionComponent<NavigationProps> { props ->
view {
this.attrs.style = json {
backgroundColor = "#B9E3C6"
flex = 1
alignItems = "center"
justifyContent = "center"
}

button {
title = "Pop"
onPress = {
props.navigator.pop()
}
}
}
}

fun main() {
AppRegistry.registerComponent("MyApp") { App }

// Code below will work if you have added react native web dependency to your project.
// Visit how to set up react native web in your project for a detailed instruction.
// An example project using react native web is in the link at the end of this document.
if (Platform.OS == "web") {
AppRegistry.runApplication("MyApp", json {
rootTag = document.getElementById("root")
})
}
}

```

**NOTE:** In the main function, MyApp should be the same as the name of the app directory
Expand Down
18 changes: 13 additions & 5 deletions build.gradle.kts
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
plugins {
kotlin("js") version "1.5.31"
kotlin("js") version "1.6.0"
id("maven-publish")
id("io.codearte.nexus-staging") version "0.30.0"
signing
}

group = "com.github.ojaynico"
version = "1.1.6"
version = "1.1.7"

val artifactName = project.name
val artifactGroup = project.group.toString()
Expand Down Expand Up @@ -41,10 +41,10 @@ kotlin {
}

dependencies {
implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.247-kotlin-1.5.31")
implementation("org.jetbrains.kotlin-wrappers:kotlin-extensions:1.0.1-pre.247-kotlin-1.5.31")
implementation("org.jetbrains.kotlin-wrappers:kotlin-react:17.0.2-pre.274-kotlin-1.6.0")
implementation("org.jetbrains.kotlin-wrappers:kotlin-extensions:1.0.1-pre.274-kotlin-1.6.0")
implementation(npm("react", "17.0.2"))
implementation(npm("react-native", "0.65.1"))
implementation(npm("react-native", "0.66"))
}

val sourcesJar by tasks.registering(Jar::class) {
Expand Down Expand Up @@ -112,3 +112,11 @@ signing {
sign(tasks["sourcesJar"])
sign(publishing.publications["ojaynico-kotlin-react-native"])
}

rootProject.plugins.withType<org.jetbrains.kotlin.gradle.targets.js.yarn.YarnPlugin> {
rootProject.the<org.jetbrains.kotlin.gradle.targets.js.yarn.YarnRootExtension>().download = false // or true for default behavior
}

rootProject.plugins.withType<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootPlugin> {
rootProject.the<org.jetbrains.kotlin.gradle.targets.js.nodejs.NodeJsRootExtension>().download = false // or true for default behavior
}
Loading

0 comments on commit e26beb7

Please sign in to comment.