Kodif React Native SDK

About

comming soon ...

Here are brief instructions on how to integrate this SDK with other react native projects.

Installation Guide

1. make sure to have the following dependencies installed. run npm install or yarn add followed by (install the ones that you don't have only) @react-native-async-storage/async-storage @react-native-community/datetimepicker axios uuid react-native-flash-message react-native-get-random-values react-native-modern-datepicker react-native-paper react-native-render-html react-native-svg rollbar-react-native react-native-vector-icons.

For un-managed react native bare workflow

2. install pods

• run cd ios
• then run pod install or npx pod-install

3. add support for .jsx and other extensions.

• create metro.config.js to the root directory if you don't have one already.
• add the following to metro.config.js so support extensions.

    module.exports = {
      // ...other config,
      resolver: {
        sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs']
      },
    };

3. add icons support 'react-native-vector-icons'

• required icons: MaterialIcons.ttf and ios/MaterialCommunityIcons.ttf
• ios https://www.youtube.com/watch?v=fVoEojORQyQ
• android ``
• if react-native link is used, it can be undone by running react-native unlink react-native-vector-icons
• ios: make sure NOT to have target set for fonts in info.plist in 'xcode' under project tree while they are added under Copy bundle resources inside Build Phases of the project. possible error: Multiple commands produce ...

4. add custom fonts support

• if fonts required by your flow are not installed, errors are most likely to occur
• [ ios | android ] https://mehrankhandev.medium.com/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4
• [ ios | android ] https://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

For expo-managed workflow

1. add support for .jsx and other extensions.

• create metro.config.js to the root directory if you don't have one already.
• add the following to metro.config.js so support extensions.

    module.exports = {
      // ...other config,
      resolver: {
        sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs']
      },
    };

2. add icons support 'react-native-vector-icons'

• required icons: MaterialIcons.ttf and ios/MaterialCommunityIcons.ttf

3. add custom fonts support

• use expo's loadAsync or any other way you prefer
• if fonts required by your flow are not installed, errors are most likely to occur

import {loadAsync} from 'expo-font';
// ...
  await loadAsync({
    'font-name': require('{font_path}/{font_filename}'),
    //...
  })
// ...

Rest comming soon ...

Usage Guide

import {Kodif} from "@kodif/kodif-rn-sdk";

const ExampleScreenOrComponent = () => {
  return (
    <Kodif
      // available props
      flowUuid="" /* @required: to fetch the flow */
      handler={() =>{/* @required: to navigate the user after the flow execution ends */}}
      initialParams={{/* @optional: add it, ONLY if your flow depends on them. eg.{email:"[email protected]", id:"7128"}  */}}
      loading={{ /* @optional: if you want to customize the loading component */
        // available options
        backgroundColor: `${COLOR_CODE}`,
        text: <CustomLoadingTextComponent/>,
        component: <CustomLoadingComponent/>,
        indicator: <CustomLoadingIndicatorComponent/>,

      }}
    />
  );
}