Learn R Programming

⚠️There's a newer version (2.0.1) of this package.Take me there.

shinyMobile

Develop outstanding {shiny} apps for iOS, Android, desktop as well as beautiful {shiny} gadgets. {shinyMobile} is built on top of the latest Framework7 template.

Installation

# from CRAN
install.packages("shinyMobile")
# for the latest version
devtools::install_github("RinteRface/shinyMobile")

Demo

A running demo is available here.

Progressive Web App (PWA)

Configuration

{shinyMobile} is PWA capable, meaning that it can be displayed full screen on many mobile devices. This feature is automatically handled by f7Page() if allowPWA is TRUE (it leverages the Google PWA compatibility script).

To setup the necessary assets for your PWA, you may run:

remotes::install_github("RinteRface/charpente")
library(charpente)
set_pwa(APP_PATH, ...)

where APP_PATH is the app location. It only works if the app is inside a package like with {golem}. Alternatively, you may copy the www folder of the gallery app, which provides:

  • A valid service worker.
  • A valid offline.html fallback.
  • A valid web manifest. Don't forget to change the start_url property to the path of your app.

For instance, the following app hosted at https://dgranjon.shinyapps.io/rstudio-global-2021-calendar/, has the /rstudio-global-2021-calendar/ path.

those custom icons and splash screens, if you need to.

It is really easier with {charpente}, the reason why we strongly recommend to develop your app inside a package.

Add the PWA to your desktop Apps

Copy the url of your app in your mobile web browser (iOS: Safari and Andoid: Chrome). In this example this is: https://dgranjon.shinyapps.io/miniUI2Demo/. It opens like a classic web app, with top and bottom ugly navigation bars.

  • Select the share button located in the bottom bar of your Iphone/Ipad. For Android,

you may do something similar. Importantly, Chrome for iOS does not support this feature, that's why I recommend using Safari.

  • Click on "Add to Home Screen"
  • Choose a relevant name and click on OK.
  • The app will be added to your IOS/Android Apps. In case you want custom icons, replace the content of the www folder with your own.

Limitations

It is actually quite complex to guarantee that all mobile platforms are supported. The PWA compatibility script will work in most of the case. If not, please open an issue here, to help improving it!

Acknowledgement

A special thanks to Vladimir Kharlampidi for creating this amazing framework7 HTML template.

Code of Conduct

Please note that the shinyMobile project is released with a Contributor Code of Conduct. By contributing to this project, you agree to abide by its terms.

Copy Link

Version

Install

install.packages('shinyMobile')

Monthly Downloads

671

Version

1.0.1

License

GPL-2

Issues

Pull Requests

Stars

Forks

Maintainer

David Granjon

Last Published

March 1st, 2024

Functions in shinyMobile (1.0.1)

f7Checkbox

Framework7 checkbox
f7BlockFooter

Framework7 block footer
f7DatePicker

Framework7 date picker
f7ColorPicker

Create a Framework7 color picker input
f7Float

Framework7 float utility
f7BlockTitle

Framework7 block title
f7Found

Utility to display an item when the search is successful.
f7Dialog

Framework7 dialog window
f7Icon

Framework7 icons
f7Item

Framework7 body item
f7Align

Framework7 align utility
class2f7

Get CSS class based on cell class
f7HideOnSearch

Utility to hide a given tag on search
f7Items

Framework7 item container
f7Badge

Framework7 badge
f7DownloadButton

Create a download button
f7Col

Framework7 column container
f7File

File Upload Control
create_app_ui

Create the app UI
create_app_link

Create shinylive iframe
f7FabClose

Framework7 FAB close
f7Chip

Framework7 chips
f7Searchbar

Framework 7 searchbar
f7SearchIgnore

Utility to ignore an item from search.
f7ListItem

Create a Framework 7 contact item
f7Notif

Framework7 notification
f7NotFound

Utility to display an item when the search is unsuccessful.
f7Flex

Framework7 flex container
f7Padding

Framework7 padding utility
f7Margin

Framework7 margin utility
f7Link

Framework7 link
f7List

Create a framework 7 contact list
f7Gallery

Launch the shinyMobile Gallery
f7checkBox

Deprecated functions
f7Page

Framework7 page container
f7Skeleton

Framework 7 skeleton effect
f7Password

Create an f7 password input
f7PhotoBrowser

Framework7 photo browser
f7Popup

Framework7 popup
f7Row

Framework7 row container
f7SearchbarTrigger

Framework 7 searchbar trigger
f7Segment

Framework7 segmented button container
f7Tab

Create a Framework7 tab item
f7TabLayout

Framework7 tab layout
f7Toolbar

Framework7 Toolbar
f7Slide

Framework7 slide
f7TapHold

Framework7 tapHold module
f7Toast

Framework7 toast
f7Tabs

Create a Framework7 tabs
f7Navbar

Framework7 Navbar
insertF7Tab

Framework7 tab insertion
%>%

Pipe operator
f7Gauge

Framework7 gauge
addF7Popover

Add Framework7 popover
f7ListGroup

Create a framework 7 group of contacts
getF7Colors

Function to get all colors available in shinyMobile
f7HideOnEnable

Utility to hide a given tag when f7Searchbar is enabled.
f7Shadow

Framework7 shadow effect
f7SingleLayout

Framework7 single layout
f7Menu

Framework7 menu container
showF7Preloader

Framework7 preloader
f7Panel

Framework7 panel
f7Fab

Framework7 floating action button (FAB)
f7MessageBar

Framework7 message bar.
removeF7Tab

Framework7 tab deletion
f7SubNavbar

Framework7 sub navbar
f7SplitLayout

Framework7 split layout
f7Table

Framework7 table
f7Picker

Framework7 picker input
f7PanelMenu

Framework7 sidebar menu
f7TabLink

Special button/link to insert in the tabbar
f7Fabs

Framework7 container for floating action button (FAB)
f7Messages

Framework7 messages container
f7Select

Framework7 select input
f7ListIndex

Create a Framework 7 list index
preview_mobile

Allow to preview a given app on different devices.
f7Swipeout

Framework7 swipeout element
f7Sheet

Framework7 sheet
f7Progress

Framework7 progress bar
f7TextArea

Framework7 text area input
f7Swiper

Framework7 swiper
f7Text

Framework7 text input
f7Slider

Framework7 range slider
f7Radio

Framework7 radio input
f7Toggle

Framework7 toggle input
f7Stepper

Framework7 stepper input
f7Timeline

Framework7 timeline
f7SmartSelect

Framework7 smart select
f7Tooltip

Framework7 tooltip
validateF7Input

Framework7 input validation
f7VirtualList

Framework7 virtual list
updateF7App

Update Framework7 configuration
validate_tabName

Validate a tab name
updateF7VirtualList

Update an f7VirtualList on the server side
updateF7Entity

Update Framework7 entity
updateF7Tabs

Update a Framework 7 tabsetPanel
f7ActionSheet

Framework7 action sheet
add_pwa_deps

PWA dependencies utils
f7Appbar

Framework7 appbar
f7Accordion

Framework7 accordion container
add_shinyMobile_deps

shinyMobile dependencies utils
f7Login

Framework7 login screen
add_framework7_deps

framework7 dependencies utils
add_f7icons_deps

Framework7 icon dependencies
app_container

Create an iframe container for app demo
add_pwacompat_deps

pwacompat dependencies utils
add_dependencies

Attach all created dependencies in the ./R directory to the provided tag
f7Button

Framework7 action button
f7Block

Framework7 block
f7AutoComplete

Framework7 autocomplete input
f7CheckboxGroup

Framework7 checkbox group
f7Card

Framework7 card
createRadioOptions

Generates a list of option for f7Radio
createSelectOptions

Create option html tag based on choice input