Update custom webview documentation with kotlin code examples #3060

jazibjafri · 2022-04-07T06:57:41Z

This PR adds kotlin code examples in custom webview documentation.

Related to #3018

website/src/css/customTheme.scss

jazibjafri · 2022-04-07T07:02:01Z

netlify · 2022-04-07T07:03:48Z

✅ Deploy Preview for react-native ready!

Name	Link
🔨 Latest commit	`0f3365d`
🔍 Latest deploy log	https://app.netlify.com/sites/react-native/deploys/626777a420d644000898655f
😎 Deploy Preview	https://deploy-preview-3060--react-native.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

cortinico

Great stuff! 👍
Have you actually tried the code? As there are some odd fragments which I'd like to make sure they're tested before they end on the docs.

cortinico · 2022-04-07T16:29:15Z

docs/custom-webview-android.md

+        val name = "RCTCustomWebView"
+            get() = Companion.field


Make this a const val

cortinico · 2022-04-07T16:30:43Z

docs/custom-webview-android.md

+    protected class CustomWebViewClient : ReactWebViewClient()
+    protected class CustomWebView(reactContext: ThemedReactContext?) : ReactWebView(reactContext)
+
+    protected fun createReactWebViewInstance(reactContext: ThemedReactContext?): ReactWebView {


The fact that here the is no override looks odd to me. Have you tested this code?

cortinico · 2022-04-07T16:40:36Z

docs/custom-webview-android.md

+```kotlin
+class CustomWebViewManager : ReactWebViewManager() {
+    protected class CustomWebView(reactContext: ThemedReactContext?) : ReactWebView(reactContext) {
+        @Nullable var finalUrl: String? = null


@Nullable should not be used in Kotlin (that's part of the type system).

Also this can maybe be an inner class

cortinico · 2022-04-07T16:44:34Z

docs/custom-webview-android.md

+```kotlin
+// NavigationCompletedEvent.kt
+class NavigationCompletedEvent(viewTag: Int, params: WritableMap) :
+    Event<NavigationCompletedEvent?>(viewTag) {


Suggested change

Event<NavigationCompletedEvent?>(viewTag) {

Event<NavigationCompletedEvent>(viewTag) {

cortinico · 2022-04-07T16:44:49Z

docs/custom-webview-android.md

+// NavigationCompletedEvent.kt
+class NavigationCompletedEvent(viewTag: Int, params: WritableMap) :
+    Event<NavigationCompletedEvent?>(viewTag) {
+    private val mParams: WritableMap


This line can go

cortinico · 2022-04-07T16:48:37Z

docs/custom-webview-android.md

+    fun shouldOverrideUrlLoading(view: WebView, url: String?): Boolean {
+        val shouldOverride: Boolean = super.shouldOverrideUrlLoading(view, url)
+        val finalUrl: String = (view as CustomWebView).getFinalUrl()
+        if (!shouldOverride && url != null && finalUrl != null && String(url) == finalUrl) {


Suggested change

if (!shouldOverride && url != null && finalUrl != null && String(url) == finalUrl) {

if (!shouldOverride && url != null && finalUrl != null && url == finalUrl) {

cortinico · 2022-04-07T16:49:05Z

docs/custom-webview-android.md

+
+```kotlin
+class CustomWebViewManager : ReactWebViewManager() {
+    @get:Nullable


Nullable should go

cortinico · 2022-04-07T16:49:33Z

docs/custom-webview-android.md

+```kotlin
+class CustomWebViewManager : ReactWebViewManager() {
+    @get:Nullable
+    val exportedCustomDirectEventTypeConstants: Map


Suggested change

val exportedCustomDirectEventTypeConstants: Map

val exportedCustomDirectEventTypeConstants: Map<String, Any?>

cortinico · 2022-04-07T16:51:12Z

docs/custom-webview-android.md

+            var export: Map<String?, Any?> = super.getExportedCustomDirectEventTypeConstants()
+            if (export == null) {
+                export = MapBuilder.newHashMap()
+            }


Suggested change

var export: Map<String?, Any?> = super.getExportedCustomDirectEventTypeConstants()

if (export == null) {

export = MapBuilder.newHashMap()

}

val export = if (super.getExportedCustomDirectEventTypeConstants() != null) {

super.getExportedCustomDirectEventTypeConstants()

} else {

export = MapBuilder.newHashMap()

}

cortinico · 2022-04-07T16:52:09Z

docs/custom-webview-android.md

+            export.put(
+                "navigationCompleted",
+                MapBuilder.of("registrationName", "onNavigationCompleted")
+            )


Suggested change

export.put(

"navigationCompleted",

MapBuilder.of("registrationName", "onNavigationCompleted")

)

export["navigationCompleted"] = MapBuilder.of("registrationName", "onNavigationCompleted")

Not sure if you have set access here, but is worth to try.

jazibjafri · 2022-04-08T07:19:50Z

Great stuff! 👍 Have you actually tried the code? As there are some odd fragments which I'd like to make sure they're tested before they end on the docs.

I have tested some of them, but you're right. I really should've tested everything. Don't worry I will test properly and update the requested changes, as soon as I can. You can take a look again then.

cortinico · 2022-04-08T12:09:47Z

Great stuff! 👍 Have you actually tried the code? As there are some odd fragments which I'd like to make sure they're tested before they end on the docs.

I have tested some of them, but you're right. I really should've tested everything. Don't worry I will test properly and update the requested changes, as soon as I can. You can take a look again then.

Great thanks for doing that. Ping one of us again once you're done with it 👍

jazibjafri · 2022-04-10T01:43:46Z

Hey @cortinico I was thinking maybe I can use 'RNCWebview' by react native community in examples instead of ReactWebView. As the docs already recommend that, which is why I had problems testing the code in the first place because references were not resolving in the latest react native version.
So can I use react-native-community/react-native-webview?. I would need to replace some code like

ReactWebViewManager -> RNCWebViewManager
ReactWebViewClient -> RNCWebViewClient

If yes, I can maybe update the java code in a separate PR?

cortinico · 2022-04-10T10:46:19Z

If yes, I can maybe update the java code in a separate PR?

Totally. I'd say let's hold this PR for now, update the Java code to use react-native-webview and get back to this once the first one is merged.

jazibjafri · 2022-04-10T14:55:14Z

Sure, awesome. I will make a separate pr for java.

jazibjafri · 2022-04-16T11:32:02Z

@cortinico I have updated the code. Have a look when you can.

cortinico · 2022-04-19T17:42:06Z

docs/custom-webview-android.md

+
+    companion object {
+        /* This name must match what we're referring to in JS */
+        const val name = "RCTCustomWebView"


Suggested change

const val name = "RCTCustomWebView"

const val REACT_CLASS = "RCTCustomWebView"

cortinico · 2022-04-19T17:43:31Z

docs/custom-webview-android.md

+
+```kotlin
+class CustomWebViewManager : RNCWebViewManager() {
+    protected inner class CustomWebView(reactContext: ThemedReactContext?) :


Suggested change

protected inner class CustomWebView(reactContext: ThemedReactContext?) :

protected inner class CustomWebView(reactContext: ThemedReactContext?, var finalUrl: String? = null) : RNCWebView(reactContext)

cortinico · 2022-04-19T17:44:39Z

docs/custom-webview-android.md

+class NavigationCompletedEvent(viewTag: Int, val params: WritableMap) :
+    Event<NavigationCompletedEvent>(viewTag) {
+    private val eventName: String = "navigationCompleted"
+    override fun getEventName() = this.eventName


Suggested change

override fun getEventName() = this.eventName

override fun getEventName() : String = "navigationCompleted"

cortinico · 2022-04-19T17:44:45Z

docs/custom-webview-android.md

+// NavigationCompletedEvent.kt
+class NavigationCompletedEvent(viewTag: Int, val params: WritableMap) :
+    Event<NavigationCompletedEvent>(viewTag) {
+    private val eventName: String = "navigationCompleted"


You can remove this

cortinico · 2022-04-19T17:44:56Z

docs/custom-webview-android.md

+class NavigationCompletedEvent(viewTag: Int, val params: WritableMap) :
+    Event<NavigationCompletedEvent>(viewTag) {
+
+    private val eventName = "navigationCompleted"


Same as above

cortinico · 2022-04-19T17:48:21Z

docs/custom-webview-android.md

+        val export =
+            if (super.getExportedCustomDirectEventTypeConstants() != null) {
+                super.getExportedCustomDirectEventTypeConstants()
+            } else {
+                MapBuilder.newHashMap<Any, Any?>()
+            }


Suggested change

val export =

if (super.getExportedCustomDirectEventTypeConstants() != null) {

super.getExportedCustomDirectEventTypeConstants()

} else {

MapBuilder.newHashMap<Any, Any?>()

}

val super = super.getExportedCustomDirectEventTypeConstants()

val export = if (super != null) {

super

} else {

MapBuilder.newHashMap<Any, Any?>()

}

super is a keyword, it cannot be used as a variable name, should I change to something else?

Yeah my bad 🤦‍♂️ superTypeConstants also work

cortinico · 2022-04-19T17:48:43Z

docs/custom-webview-android.md

+        export?.set(
+            "navigationCompleted",
+            MapBuilder.of("registrationName", "onNavigationCompleted")
+        )


Suggested change

export?.set(

"navigationCompleted",

MapBuilder.of("registrationName", "onNavigationCompleted")

)

export["navigationCompleted"] =

MapBuilder.of("registrationName", "onNavigationCompleted")

It shows error "only safe or non-null asserted calls are allowed on receiver"

It should work once you refactor the rest of the code as export will be non nullable

jazibjafri · 2022-04-24T08:28:59Z

@cortinico, I have completed the changes. Check out when you can.

cortinico · 2022-04-24T15:05:25Z

@cortinico, I have completed the changes. Check out when you can.

Yup. Looks good but there are a couple of minor things to address still 👍

cortinico · 2022-04-26T13:31:54Z

docs/custom-webview-android.md

+        val superTypeConstants = super.getExportedCustomDirectEventTypeConstants()
+        val export = superTypeConstants ?: MapBuilder.newHashMap<Any, Any?>()
+        export["navigationCompleted"] = MapBuilder.of("registrationName", "onNavigationCompleted")


facebook-github-bot added the CLA Signed label Apr 7, 2022

jazibjafri commented Apr 7, 2022

View reviewed changes

website/src/css/customTheme.scss Outdated Show resolved Hide resolved

cortinico reviewed Apr 7, 2022

View reviewed changes

jazibjafri mentioned this pull request Apr 11, 2022

update custom webview example to use RNC webview #3069

Merged

jazibjafri added 5 commits April 16, 2022 16:07

add kotlin code for custom webview docs

92936fe

revert

4b713ee

revert

2d031df

revert

b717e5d

use rnc instead of react web view

2a942be

jazibjafri force-pushed the kotlin-webview-example branch from 588b1f2 to 2a942be Compare April 16, 2022 11:22

cortinico reviewed Apr 19, 2022

View reviewed changes

minor changes and code refactor

f345736

use elvis in export

0f3365d

cortinico reviewed Apr 26, 2022

View reviewed changes

cortinico approved these changes Apr 26, 2022

View reviewed changes

cortinico merged commit 7d976f3 into facebook:main May 3, 2022

cortinico mentioned this pull request May 3, 2022

☂️ Help us Kotlin-ify the React Native Website #3018

Closed

14 tasks

jazibjafri deleted the kotlin-webview-example branch May 3, 2022 10:38

	Event<NavigationCompletedEvent?>(viewTag) {
	Event<NavigationCompletedEvent>(viewTag) {

	if (!shouldOverride && url != null && finalUrl != null && String(url) == finalUrl) {
	if (!shouldOverride && url != null && finalUrl != null && url == finalUrl) {

	val exportedCustomDirectEventTypeConstants: Map
	val exportedCustomDirectEventTypeConstants: Map<String, Any?>

	const val name = "RCTCustomWebView"
	const val REACT_CLASS = "RCTCustomWebView"

	protected inner class CustomWebView(reactContext: ThemedReactContext?) :
	protected inner class CustomWebView(reactContext: ThemedReactContext?, var finalUrl: String? = null) : RNCWebView(reactContext)

	override fun getEventName() = this.eventName
	override fun getEventName() : String = "navigationCompleted"

Update custom webview documentation with kotlin code examples #3060

Update custom webview documentation with kotlin code examples #3060

Conversation

jazibjafri commented Apr 7, 2022

jazibjafri commented Apr 7, 2022

netlify bot commented Apr 7, 2022 • edited Loading

✅ Deploy Preview for react-native ready!

cortinico left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jazibjafri commented Apr 8, 2022

cortinico commented Apr 8, 2022

jazibjafri commented Apr 10, 2022 • edited Loading

cortinico commented Apr 10, 2022

jazibjafri commented Apr 10, 2022

jazibjafri commented Apr 16, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jazibjafri Apr 24, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jazibjafri commented Apr 24, 2022

cortinico commented Apr 24, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Apr 7, 2022 •

edited

Loading

jazibjafri commented Apr 10, 2022 •

edited

Loading

jazibjafri Apr 24, 2022 •

edited

Loading