{shinyMobile} provides a set of tools specifically
designed to help you develop user-friendly mobile applications and
leverage certain actions on mobile phones. The tools we discuss here
are:
preview_mobile(): a function to preview your app in a
large range of mobile devicespullToRefresh: a feature to refresh the page content by
pulling from top to bottomSince V0.2.0, {shinyMobile} has a function to preview
your app in a large range of mobile devices: iPhone X, iPhone 8+,
iPhone8, iPhone 5s, iPhone 4s, iPad, Samsung galaxy S5, Samsung galaxy
Note 8, … either locally on online:
library(shiny)
library(shinyMobile)
preview_mobile(appPath = system.file("examples/gallery/app.R", package = "shinyMobile"), device = "iphoneX")
# This also works with a remote app url hosted on shinyapps.io ...The local preview is a 4 steps process:
preview_mobile() with appPathR -e "shiny::runApp('appPath', port = 3838)" in a terminal
to launch the apppreview_mobile() has other options such as color and
landscape (to preview in landscape mode).
{shinyMobile} introduces the pull to refresh feature. It
may be used to refresh the page content by pulling from top to bottom.
This feature is disabled by default but passing
pullToRefresh = TRUE in f7Page() options will
activate it. On the server side, an input, namely input$ptr
is TRUE when ptr is refreshed and becomes NULL
at the end of the animation (you may run the app below in full screen
mode and hold a left click with your mouse from top to bottom):
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
title = "My app",
options = list(pullToRefresh = TRUE, dark = FALSE),
f7SingleLayout(
navbar = f7Navbar(
title = "Pull to Refresh",
hairline = FALSE
),
toolbar = f7Toolbar(
position = "bottom",
f7Link(label = "Link 1", href = "https://www.google.com"),
f7Link(label = "Link 2", href = "https://www.google.com")
),
# main content
f7List(
lapply(1:3, function(j) {
f7ListItem(
letters[j],
media = f7Icon("alarm_fill"),
right = "Right Text",
header = "Header",
footer = "Footer"
)
})
)
)
),
server = function(input, output, session) {
observe(print(input$ptr))
observeEvent(input$ptr, {
ptrStatus <- if (input$ptr) "on"
f7Dialog(
text = paste('ptr is', ptrStatus),
type = "alert"
)
})
}
){shinyMobile} contains functionality to retrieve
information about the device displaying your app, the last input that
was used and other information about the running Shiny session. This
information helps you to set the layout as best as possible.
{shinyMobile} has a predefined input, namely
input$deviceInfo.
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
options = list(dark = FALSE),
title = "My app",
f7SingleLayout(
navbar = f7Navbar(
title = "Access device info",
hairline = FALSE
),
# main content
verbatimTextOutput("info")
)
),
server = function(input, output) {
output$info <- renderPrint({
input$deviceInfo
})
}
)All this information is related to the device running the application. The following information is returned:
input$deviceInfo$ios: TRUE for iOS deviceinput$deviceInfo$android: TRUE for Android deviceinput$deviceInfo$androidChrome: TRUE for Android
Chromeinput$deviceInfo$desktop: TRUE for desktop browserinput$deviceInfo$iphone: TRUE for iPhoneinput$deviceInfo$ipod: TRUE for iPodinput$deviceInfo$ipad: TRUE for iPadinput$deviceInfo$cordova: TRUE when app running in
cordova environmentinput$deviceInfo$capacitor: TRUE when app running in
capacitor environmentinput$deviceInfo$windows: TRUE for desktop windowsinput$deviceInfo$macos: TRUE for desktop macOSinput$deviceInfo$ie: TRUE for Internet Explorer
browserinput$deviceInfo$edge: TRUE for MS Edge browserinput$deviceInfo$firefox: TRUE for FireFox browserinput$deviceInfo$electron: TRUE when app is running
under Electron environmentinput$deviceInfo$nwjs: TRUE when app is running under
NW.js environmentinput$deviceInfo$webView: TRUE if app runs in web view
- webapp installed to home screen, valid for desktop PWAs installed to
desktopinput$deviceInfo$standalone: Same as webViewinput$deviceInfo$os: Contains OS can be ios, android,
macos, windowsinput$deviceInfo$osVersion: Contains OS version,
e.g. 11.2.0input$deviceInfo$pixelRatio: Device pixel ratioBelow an example that displays a card only when the app is on desktop:
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
options = list(dark = FALSE),
title = "My app",
f7SingleLayout(
navbar = f7Navbar(
title = "Access device info",
hairline = FALSE
),
# main content
uiOutput("card"),
textOutput("userAgent"),
)
),
server = function(input, output) {
output$userAgent <- renderText(input$deviceInfo$desktop)
# generate a card only for desktop
output$card <- renderUI({
req(input$deviceInfo$desktop)
f7Card(
"This is a simple card with plain text,
but cards can also contain their own header,
footer, list view, image, or any other element."
)
})
}
){shinyMobile} has input$lastInputChanged
which returns the name, value and type of the last changed input:
library(shiny)
library(shinyMobile)
shinyApp(
ui = f7Page(
options = list(dark = FALSE),
title = "My app",
f7SingleLayout(
navbar = f7Navbar(
title = "Single Layout",
hairline = FALSE
),
toolbar = f7Toolbar(
position = "bottom",
f7Link(label = "Link 1", href = "https://www.google.com"),
f7Link(label = "Link 2", href = "https://www.google.com")
),
# main content
f7Card(verbatimTextOutput("infos")),
f7Card(
f7Text(inputId = "text", label = "Text"),
f7Slider(inputId = "range1", label = "Range", min = 0, max = 2, value = 1, step = 0.1),
f7Stepper(inputId = "stepper1", label = "Stepper", min = 0, max = 10, value = 5),
verbatimTextOutput("lastChanged")
)
)
),
server = function(input, output) {
output$infos <- renderPrint(input$shinyInfo)
output$lastChanged <- renderPrint(input$lastInputChanged)
}
)This is convenient since usually, there is no shortcut to get the last changed value and this needs to be done server side in Shiny.
input$shinyInfo gives the current
workerId (for shinyapps.io, Shiny Server Pro, Posit
Connect) and the unique sessionId (equal to
session$token on the server side).