https://github.com/ojaynico/ojaynico-kotlin-react-native-navigation
Kotlin wrapper for react native navigation by wix.
https://github.com/ojaynico/ojaynico-kotlin-react-native-navigation
kotlin react react-native react-native-navigation react-native-navigation-drawer
Last synced: 5 months ago
JSON representation
Kotlin wrapper for react native navigation by wix.
- Host: GitHub
- URL: https://github.com/ojaynico/ojaynico-kotlin-react-native-navigation
- Owner: ojaynico
- License: mit
- Archived: true
- Created: 2020-12-26T18:05:13.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-12-01T20:05:52.000Z (over 4 years ago)
- Last Synced: 2024-11-17T13:45:00.442Z (over 1 year ago)
- Topics: kotlin, react, react-native, react-native-navigation, react-native-navigation-drawer
- Language: Kotlin
- Homepage:
- Size: 109 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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-react-native-navigation
[](https://search.maven.org/artifact/com.github.ojaynico/ojaynico-kotlin-react-native-navigation/1.1.0/pom)
[](http://kotlinlang.org)
[](https://www.npmjs.com/package/react)
[](https://www.npmjs.com/package/react-native)
[](https://www.npmjs.com/package/react-native-navigation)
[](https://www.npmjs.com/package/react-native-navigation-drawer-extension)
[](https://kotl.in/jsirsupported)
Kotlin wrappers for react-native-navigation by wix and react-native-navigation-drawer-extension
**Follow instructions in this repository on how to setup a fully working react native app**
https://github.com/ojaynico/ojaynico-kotlin-react-native
**After check out the following links on how to install and use navigation and navigation drawer**
https://wix.github.io/react-native-navigation/docs/before-you-start
https://github.com/aspect-apps/react-native-navigation-drawer-extension#readme
## `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 --save react-native-navigation`
In your react native application shared module (a kotlin gradle project), update your gradle file to include the following in the respective blocks.
```kotlin
repositories {
mavenCentral()
jcenter()
}
dependencies {
implementation("com.github.ojaynico:ojaynico-kotlin-react-native-navigation:1.1.0")
}
```
### `Example of code snippet for a react native app using the above wrapper`
```kotlin
import ojaynico.kotlin.react.*
import ojaynico.kotlin.react.native.AppRegistry
import react.*
import ojaynico.kotlin.react.native.navigation.Navigation
val styles = StyleSheet.create(object {
val body = object {
val backgroundColor = "#FFF"
}
val text = object {
val fontSize = 24
val fontWeight = "600"
val color = "#000"
}
}
class App : RComponent() {
override fun RBuilder.render() {
scrollView {
attrs.contentInsetAdjustmentBehavior = "automatic"
view {
attrs.style = styles.body
text("Welcome to Kotlin React Native With Navigation Support") {
style = styles.text
}
}
}
}
}
fun main() {
Navigation.registerComponent("MainScreen") { App::class.js }
Navigation.setDefaultOptions(object {
val statusBar = object {
val backgroundColor = "#4d089a"
}
val topBar = object {
val title = object {
val color = "white"
}
val backButton = object {
val color = "white"
}
val background = object {
val color = "#4d089a"
}
}
})
Navigation.events().registerAppLaunchedListener {
Navigation.setRoot(object {
val root = object {
val stack = object {
val children = arrayOf(
object {
val component = object {
val name = "MainScreen"
val options = object {
val topBar = object {
val title = object {
val text = "Home"
val color = "white"
}
val background = object {
val color = "#4d089a"
}
}
}
}
}
)
}
}
})
}
}
```
**NOTE**: We no-longer use AppRegistry to register our components but we use Navigation component to register it as above
**A fully set up and working example can be found in the repository below.**
https://github.com/ojaynico/KotlinReactNativeNavigation