# 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.

```javaScript
    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 <install the fonts required for your flow>

-   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.

```javaScript
    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 <install the fonts required for your flow>

-   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

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

**Rest**
_comming soon ..._

<!--  -->

## Usage Guide

```js
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:"ex@ex.com", id:"7128"}  */}}
      loading={{ /* @optional: if you want to customize the loading component */
        // available options
        backgroundColor: `${COLOR_CODE}`,
        text: <CustomLoadingTextComponent/>,
        component: <CustomLoadingComponent/>,
        indicator: <CustomLoadingIndicatorComponent/>,

      }}
    />
  );
}
```