Skip to content

YPE-1124: Implement Android view modules with Kotlin SDK composables #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mic-mart wants to merge 1 commit into
base: main
Choose a base branch
from
Open

YPE-1124: Implement Android view modules with Kotlin SDK composables #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 35 additions & 19 deletions android/src/main/java/com/youversion/reactnativesdk/views/YVPBibleReaderView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
package com.youversion.reactnativesdk.views

import android.content.Context
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.youversion.platform.core.bibles.domain.BibleReference
import com.youversion.platform.reader.BibleReader
import expo.modules.kotlin.AppContext
import expo.modules.kotlin.views.ComposeProps
import expo.modules.kotlin.views.ExpoComposeView
Expand All @@ -37,18 +32,39 @@ class YVPBibleReaderView(context: Context, appContext: AppContext) :

@Composable
override fun Content(modifier: Modifier) {
// TODO: Replace with actual BibleReaderView composable when Kotlin SDK is ready
Box(
modifier = modifier
.fillMaxSize()
.padding(16.dp),
contentAlignment = Alignment.Center
) {
Text(
text = "BibleReaderView placeholder\n" +
"App: ${props.appName.value}\n" +
"Reference: ${props.bookUSFM.value} ${props.chapter.value}",
color = Color.Gray
BibleReader(
appName = props.appName.value ?: "",
appSignInMessage = props.signInMessage.value ?: "",
bibleReference = bibleReference(),
)
}

private fun bibleReference(): BibleReference? {
if (props.hasReference.value != true) {
return null
}

val versionId = props.versionId.value ?: return null
val bookUSFM = props.bookUSFM.value ?: return null
val chapter = props.chapter.value ?: return null

val verseStart = props.verseStart.value
val verseEnd = props.verseEnd.value

return if (verseStart != null && verseEnd != null) {
BibleReference(
versionId = versionId,
bookUSFM = bookUSFM,
chapter = chapter,
verseStart = verseStart,
verseEnd = verseEnd,
)
} else {
BibleReference(
versionId = versionId,
bookUSFM = bookUSFM,
chapter = chapter,
verse = props.verse.value,
)
}
}
Expand Down
97 changes: 82 additions & 15 deletions android/src/main/java/com/youversion/reactnativesdk/views/YVPBibleTextView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
package com.youversion.reactnativesdk.views

import android.content.Context
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.unit.sp
import com.youversion.platform.core.bibles.domain.BibleReference
import com.youversion.platform.ui.views.BibleText
import com.youversion.platform.ui.views.BibleTextFootnoteMode
import com.youversion.platform.ui.views.BibleTextOptions
import expo.modules.kotlin.AppContext
import expo.modules.kotlin.viewevent.EventDispatcher
import expo.modules.kotlin.views.ComposeProps
Expand Down Expand Up @@ -44,17 +45,83 @@ class YVPBibleTextView(context: Context, appContext: AppContext) :

@Composable
override fun Content(modifier: Modifier) {
// TODO: Replace with actual BibleText composable when Kotlin SDK is ready
Box(
modifier = modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(
text = "BibleTextView placeholder - versionId: ${props.versionId.value}, " +
"book: ${props.bookUSFM.value}, chapter: ${props.chapter.value}",
color = Color.Gray
val reference = bibleReference() ?: return

BibleText(
reference = reference,
textOptions = textOptions(),
onVerseTap = { bibleRef, _ ->
onTap(
mapOf(
"bibleReference" to mapOf(
"versionId" to bibleRef.versionId,
"bookUSFM" to bibleRef.bookUSFM,
"chapter" to bibleRef.chapter,
"verse" to bibleRef.verseStart,
"type" to "verse",
),
),
)
},
)
}

private fun bibleReference(): BibleReference? {
val versionId = props.versionId.value ?: return null
val bookUSFM = props.bookUSFM.value ?: return null
val chapter = props.chapter.value ?: return null

val verseStart = props.verseStart.value
val verseEnd = props.verseEnd.value

return if (verseStart != null && verseEnd != null) {
BibleReference(
versionId = versionId,
bookUSFM = bookUSFM,
chapter = chapter,
verseStart = verseStart,
verseEnd = verseEnd,
)
} else {
BibleReference(
versionId = versionId,
bookUSFM = bookUSFM,
chapter = chapter,
verse = props.verse.value,
)
}
}
Comment on lines +69 to 93
Copy link

@greptile-apps greptile-apps bot Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

identical bibleReference() logic duplicated across YVPBibleTextView, YVPBibleReaderView, and YVPBibleWidgetView - consider extracting to shared utility

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Prompt To Fix With AI 
This is a comment left during a code review.
Path: android/src/main/java/com/youversion/reactnativesdk/views/YVPBibleTextView.kt
Line: 69:93

Comment:
identical `bibleReference()` logic duplicated across YVPBibleTextView, YVPBibleReaderView, and YVPBibleWidgetView - consider extracting to shared utility

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.

Copy link
Collaborator Author

@mic-mart mic-mart Feb 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My opinion, given that:

  1. iOS (the reference implementation) doesn't extract it
  2. The logic is trivial and stable
  3. It's only 3 files

I lean toward not extracting in this case. The duplication is minimal and the code is clear.


private fun textOptions(): BibleTextOptions {
return BibleTextOptions(
fontFamily = fontFamily(),
fontSize = (props.fontSize.value ?: 16f).sp,
lineSpacing = props.lineSpacing.value?.sp,
textColor = props.textColor.value?.let { Color(it) },
wocColor = props.wocColor.value?.let { Color(it) } ?: Color(0xFFFF3D4D),
renderVerseNumbers = props.renderVerseNumbers.value ?: true,
footnoteMode = footnoteMode(),
)
}

private fun fontFamily(): FontFamily {
return when (props.fontFamily.value?.lowercase()) {
"serif" -> FontFamily.Serif
"sansserif", "sans-serif" -> FontFamily.SansSerif
"monospace" -> FontFamily.Monospace
"cursive" -> FontFamily.Cursive
else -> FontFamily.Serif
}
}

private fun footnoteMode(): BibleTextFootnoteMode {
return when (props.footnoteMode.value?.lowercase()) {
"none" -> BibleTextFootnoteMode.NONE
"inline" -> BibleTextFootnoteMode.INLINE
"marker" -> BibleTextFootnoteMode.MARKER
"letters" -> BibleTextFootnoteMode.LETTERS
"image" -> BibleTextFootnoteMode.IMAGE
else -> BibleTextFootnoteMode.NONE
}
}
}
57 changes: 40 additions & 17 deletions android/src/main/java/com/youversion/reactnativesdk/views/YVPBibleWidgetView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,16 @@ package com.youversion.reactnativesdk.views

import android.content.Context
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.youversion.platform.core.bibles.domain.BibleReference
import com.youversion.platform.ui.views.widget.BibleWidget
import expo.modules.kotlin.AppContext
import expo.modules.kotlin.views.ComposeProps
import expo.modules.kotlin.views.ExpoComposeView
Expand All @@ -37,23 +36,47 @@ class YVPBibleWidgetView(context: Context, appContext: AppContext) :

@Composable
override fun Content(modifier: Modifier) {
val isDark = when (props.colorScheme.value) {
val reference = bibleReference() ?: return

val isDark = when (props.colorScheme.value?.lowercase()) {
"dark" -> true
"light" -> false
else -> isSystemInDarkTheme()
}

// TODO: Replace with actual BibleWidget composable when Kotlin SDK is ready
Box(
modifier = modifier
.fillMaxWidth()
.padding(16.dp)
MaterialTheme(
colorScheme = if (isDark) darkColorScheme() else lightColorScheme(),
) {
Text(
text = "BibleWidgetView placeholder\n" +
"${props.bookUSFM.value} ${props.chapter.value}:${props.verse.value ?: "${props.verseStart.value}-${props.verseEnd.value}"}",
color = if (isDark) Color.White else Color.DarkGray,
fontSize = (props.fontSize.value ?: 23f).sp
BibleWidget(
reference = reference,
fontSize = (props.fontSize.value ?: 23f).sp,
modifier = modifier,
)
}
}

private fun bibleReference(): BibleReference? {
val versionId = props.versionId.value ?: return null
val bookUSFM = props.bookUSFM.value ?: return null
val chapter = props.chapter.value ?: return null

val verseStart = props.verseStart.value
val verseEnd = props.verseEnd.value

return if (verseStart != null && verseEnd != null) {
BibleReference(
versionId = versionId,
bookUSFM = bookUSFM,
chapter = chapter,
verseStart = verseStart,
verseEnd = verseEnd,
)
} else {
BibleReference(
versionId = versionId,
bookUSFM = bookUSFM,
chapter = chapter,
verse = props.verse.value,
)
}
}
Expand Down
24 changes: 6 additions & 18 deletions android/src/main/java/com/youversion/reactnativesdk/views/YVPVotdView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,11 @@ package com.youversion.reactnativesdk.views

import android.content.Context
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.youversion.platform.ui.views.votd.VerseOfTheDay
import expo.modules.kotlin.AppContext
import expo.modules.kotlin.views.ComposeProps
import expo.modules.kotlin.views.ExpoComposeView
Expand All @@ -28,22 +23,15 @@ class YVPVotdView(context: Context, appContext: AppContext) :

@Composable
override fun Content(modifier: Modifier) {
val isDark = when (props.colorScheme.value) {
val isDark = when (props.colorScheme.value?.lowercase()) {
"dark" -> true
"light" -> false
else -> isSystemInDarkTheme()
}

// TODO: Replace with actual VerseOfTheDay composable when Kotlin SDK is ready
Box(
modifier = modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(
text = "VotdView placeholder - versionId: ${props.bibleVersionId.value}",
color = if (isDark) Color.White else Color.DarkGray
)
}
VerseOfTheDay(
bibleVersionId = props.bibleVersionId.value ?: 111,
dark = isDark,
)
}
}