React Native plugin of the MyFiziq SDK, allowing MyFiziq technology to be used in React Native applications.
This guide assumes the React Native is installed and configured.
- Create a new RN project (if not already done):
react-native init MyFiziqExample --version [email protected]
cd MyFiziqExample
- Install the MyFiziq RN plugin:
npm install MyFiziqApp/reactnative-plugin-myfiziq
- Link the plugin to the project:
react-native link react-native-my-fiziq-sdk
- Test that the project builds and runs (assuming iOS development):
react-native run-ios
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 (
...
);
}
...
}
...
An example React Native project is available for reference on how to integrate this plugin: https://github.com/MyFiziqApp/reactnative-plugin-myfiziq-example
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.
MyFiziq iOS Dev, [email protected]