While we are working on native iOS, Android, and Flutter SDKs there are still ways to utilize Joyfill within a mobile WebView. We recommend reading up on our Embedded solution before diving in as our Embed Portal is the example we will be working with.

Examples

We currently only recommend you use the Embed Portal with a mode of "fill" or "readonly", within a WebView and please reach out to us or to your dedicated product specialist for assistance if needed.

React-Native

Install your needed packages: React Native WebView or Expo WebView (Expo only).

Example

This shows Joyfill used with Expo and Joyfill React-Native examples however the concepts are the same with non-Expo projects.

If looking for where you can go this routeStack Overflow Thread. Using our CDN you can add it to your HTML source passed to the WebView and then utilize more native listeners.

import * as React from 'react';
import { WebView } from 'react-native-webview';

export default function App() {
  return (
    <WebView
      style={styles.container}
      source={{
       uri: `http://app-joy.joyfill.io/embedded/userAccessToken=${userAccessToken}&mode=${'fill'}' 
			}}
    />
  );
}

Flutter

Joyfill's Flutter example shows how you could implement this with Flutter & Dart. See Flutter WebView Usage for more on WebViews.

Example

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
class WebViewContainer extends StatefulWidget {
  final url;
  WebViewContainer(this.url);
  @override
  createState() => _WebViewContainerState(this.url);
}
class _WebViewContainerState extends State<WebViewContainer> {
  var _url;
  final _key = UniqueKey();
  _WebViewContainerState(this._url);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Column(
          children: [
            Expanded(
                child: WebView(
                    key: _key,
                    javascriptMode: JavascriptMode.unrestricted,
                    initialUrl: _url))
          ],
        ));
  }
}

import 'package:flutter/material.dart';
import 'web_view_container.dart';
class Home extends StatelessWidget {
  final _links = ['http://app-joy.joyfill.io/embedded/userAccessToken=<your_userAccessToken>&mode=fill'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: SingleChildScrollView(
                child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: _links.map((link) => _urlButton(context, link)).toList(),
    ))));
  }
  Widget _urlButton(BuildContext context, String url) {
    return Container(
        padding: EdgeInsets.all(20.0),
        child: FlatButton(
          color: Theme.of(context).primaryColor,
          padding: const EdgeInsets.symmetric(horizontal: 50.0, vertical: 15.0),
          child: Text(url),
          onPressed: () => _handleURLButtonPress(context, url),
        ));
  }
  void _handleURLButtonPress(BuildContext context, String url) {
    Navigator.push(context,
        MaterialPageRoute(builder: (context) => WebViewContainer(url)));
  }
}

import 'package:flutter/material.dart';
import 'home.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Views',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          fontFamily: "Arial",
          textTheme: TextTheme(
              button: TextStyle(color: Colors.white, fontSize: 18.0),
              title: TextStyle(color: Colors.red))),
      home: Home(),
    );
  }
}

iOS

Example

import UIKit
import WebKit

class ViewController: UIViewController, WKUIDelegate {
    
    var webView: WKWebView!
    
    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.uiDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string:"http://app-joy.joyfill.io/embedded/userAccessToken=<your_userAccessToken>&mode=fill")
        let myRequest = URLRequest(url: myURL!)
        webView.load(myRequest)
    }
}

Android

Coming soon...