Code Monkey home page Code Monkey logo

reactnative-plugin-myfiziq's Introduction

MyFiziq Logo

React Native plugin of the MyFiziq SDK, allowing MyFiziq technology to be used in React Native applications.

Installation

This guide assumes the React Native is installed and configured.

  1. Create a new RN project (if not already done):
react-native init MyFiziqExample --version [email protected]
cd MyFiziqExample
  1. Install the MyFiziq RN plugin:
npm install MyFiziqApp/reactnative-plugin-myfiziq
  1. Link the plugin to the project:
react-native link react-native-my-fiziq-sdk
  1. Test that the project builds and runs (assuming iOS development):
react-native run-ios

Use Example

App.js

...

import {Platform, StyleSheet, Text, View, NativeModules, NativeEventEmitter, Alert} from 'react-native';

// Import in the MyFiziq SDK plugin
var MyFiziq = NativeModules.RNMyFiziqSdk;
var MyFiziqEvent = new NativeEventEmitter(MyFiziq)

// Setup MyFiziq service
// NOTE: Replace the KEY, SECRET, and ENVIRONMENT strings with values given by MyFiziq
async function myfiziqSetup() {
  try {
    let result = await MyFiziq.mfzSdkSetup(
      "KEY", 
      "SECRET", 
      "ENVIRONMENT");
  } catch(e) {
    Alert.alert('Error', e,[{text: 'OK', onPress: () => console.log('OK Pressed')}],{cancelable: false});
  }
}

// Answer MyFiziq event requests
MyFiziqEvent.addListener('myfiziqGetAuthToken', (data) => {
  // Answer with idP service user authentication token, as per AWS Cognito OpenID mapping.
  // See: https://docs.aws.amazon.com/cognito/latest/developerguide/open-id.html
  // NOTE: null passed in this example, however OID token would be passed or null if user not logged in.
  MyFiziq.mfzSdkAnswerLogins(null, null);
});

...

type Props = {};
export default class App extends Component<Props> {

  // Initialize MyFiziq service on App startup via the App class Constructor.
  constructor(props) {
    super(props);
    myfiziqSetup();
  }

  render() {
    return (
      ...
    );
  }

  ...

}

...

Example Project

An example React Native project is available for reference on how to integrate this plugin: https://github.com/MyFiziqApp/reactnative-plugin-myfiziq-example

Custom styling with CSS

The MyFiziqSDK UI can be customised to a high degree of flexibility using CSS. The iOS SDK uses the InterfaCSS framework to bind the CSS stylings to the native UI. By simply distributing a custom CSS file with the APP and calling the mfzSdkLoadCSS method to declare the CSS file path will cause the MyFiziq Avatar Creation Process UI to be customised. For reference, the base CSS can be refered to here.

Author

MyFiziq iOS Dev, [email protected]

reactnative-plugin-myfiziq's People

Contributors

phillipc-myfiziq avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.