{"id":28092983,"url":"https://github.com/flexa/flexa-react-native","last_synced_at":"2025-05-13T13:59:33.356Z","repository":{"id":253281939,"uuid":"843009156","full_name":"flexa/flexa-react-native","owner":"flexa","description":"Flexa SDK for React Native","archived":false,"fork":false,"pushed_at":"2025-04-07T17:44:00.000Z","size":2060,"stargazers_count":23,"open_issues_count":0,"forks_count":2,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-05-09T16:24:14.928Z","etag":null,"topics":["android","flexa","ios","javascript","react","react-native"],"latest_commit_sha":null,"homepage":"https://flexa.co","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flexa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-15T15:27:23.000Z","updated_at":"2025-04-07T17:39:54.000Z","dependencies_parsed_at":"2025-02-19T14:42:06.234Z","dependency_job_id":null,"html_url":"https://github.com/flexa/flexa-react-native","commit_stats":null,"previous_names":["flexa/flexa-react-native"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexa%2Fflexa-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexa%2Fflexa-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexa%2Fflexa-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flexa%2Fflexa-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flexa","download_url":"https://codeload.github.com/flexa/flexa-react-native/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253957534,"owners_count":21990534,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","flexa","ios","javascript","react","react-native"],"created_at":"2025-05-13T13:59:32.907Z","updated_at":"2025-05-13T13:59:33.337Z","avatar_url":"https://github.com/flexa.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flexa Components for React Native\n\nWith Flexa Components, you can quickly and easily add new layers of functionality to your wallet app.\n\nIn the current release, Flexa offers a privacy-focused payments experience for in-person and online spending anywhere Flexa is accepted (SpendKit), along with a simple scanner module for parsing QR code–formatted payment requests (ScanKit).\n\n## Modules\n\n| Module        | Description                                            |\n| ------------- | ------------------------------------------------------ |\n| Flexa   | Core functionality required by all other modules       |\n| FlexaScanKit  | Camera-based parsing of QR codes for payments and more |\n| FlexaSpendKit | Instant retail payments, powered by Flexa              |\n\n## Developer Setup (Pre-Installation guide)\n\n#### SSH Key Configuration:\n\n1. **Generate SSH Key (if you haven't already):**\n\n   If you don't have an SSH key already, you can generate one using the following command:\n\n```bash\nssh-keygen -t rsa -b 4096 -C \"your_email@example.com\"\n```\n\nReplace \"your_email@example.com\" with your actual email address.\n\n2. **Copy SSH Key to Clipboard:**\n\n   After generating the SSH key, you'll need to copy the public key to your clipboard. You can do this using the following command:\n\n```bash\npbcopy \u003c ~/.ssh/id_rsa.pub\n ```\n\nThis command copies the contents of your public key to the clipboard.\n\n3. **Add SSH Key to GitHub:**\n\n   Log in to your GitHub account and go to Settings \u003e SSH and GPG keys. Then, click on the \"New SSH Key\" button. Paste the copied SSH key into the \"Key\" field and give it a relevant title, such as \"My SSH Key for Cocoapods Repo\". Click \"Add SSH Key\" to save it.\n\n4. **Test SSH Connection:**\n\n   To ensure that your SSH key is set up correctly, you can test the connection to GitHub:\n\n```bash\nssh -T git@github.com\n```\n\nIf everything is set up correctly, you should see a message like \"Hi username! You've successfully authenticated...\".\n\n### Android:\n\nIn your `android/local.properties` directory, add the Github username and a classic personal access token key which\ncan be generated on Github -\u003e Settings -\u003e Developer settings -\u003e Generate a personal access token (classic) :\n\n```text\ngpr.user=\u003cgithubUsername\u003e\ngpr.key=\u003cpersonalAccessToken\u003e\n```\n\nAfter adding that, add the function to read from the local.properties file and add the maven repository for Flexa Android packages in your `android/build.gradle` file:\n\n```\n// Load local.properties file\ndef localProperties = new Properties()\ndef localPropertiesFile = rootProject.file('local.properties')\nif (localPropertiesFile.exists()) {\n    localPropertiesFile.withInputStream { stream -\u003e\n        localProperties.load(stream)\n    }\n}\n...\n\nbuildscript {\n    ext {\n    ...\n    }\n}\n\nallprojects {\n    repositories {\n\n    ...\n\n      maven {\n          name = \"GitHubPackages\"\n          url = uri(\"https://maven.pkg.github.com/flexa/flexa-android\")\n          credentials {\n              username = localProperties.getProperty(\"gpr.user\")\n              password = localProperties.getProperty(\"gpr.key\")\n          }\n      }\n    }\n}\n```\n\nOr\n\nYou can build a mavenLocal repo to use it in this stage. Follow the following steps in order to build it:\n\n1. Clone the following android sdk repo:\n\n```\nhttps://github.com/flexa/flexa-android.git\n```\n\n2. Run the next buildScript from the SDK root folder:\n\n```groovy\n./gradlew core:assembleDebug \u0026\u0026 ./gradlew core:publishToMavenLocal \u0026\u0026 ./gradlew \u0026\u0026 ./gradlew scankit:assembleDebug \u0026\u0026 ./gradlew scankit:publishToMavenLocal \u0026\u0026 ./gradlew spendkit:assembleDebug \u0026\u0026 ./gradlew spendkit:publishToMavenLocal\n```\n\n3. Add `mavenLocal()` repository to your React Native App `./android/build.gradle`:\n\n```groovy\n   allprojects {\n    repositories {\n      ...\n      mavenLocal()\n    }\n   }\n```\n\n### iOS:\n\nAdd the private cocoapods repo from flexa in your Podfile `./ios/Podfile`:\n\n```ruby\nsource 'git@github.com:flexa/flexa-cocoapods.git'\n```\n\n#### Using pod repo add:\n\nYou can use the `pod repo add` command to add the source. Here's how:\n\n```bash\npod repo add flexa-cocoapods git@github.com:flexa/flexa-cocoapods.git\n```\n\n## Installation\n\nTo install the private developer GitHub package registry you would need to download the release compressed package and\nstore it in a local directory and run the following command:\n\n```sh\nyarn add @flexa/flexa-react-native@\"./\u003clocaldir\u003e/\u003cflexa-flexa-react-native-\u003cversion\u003e.tgz\"\n```\n\nor with a GitHub personal access token (classic)\n\n```sh\nnpm config set \"@flexa:registry\" \"https://npm.pkg.github.com/\" \u0026\u0026 \\\nnpm config set \"//npm.pkg.github.com/:_authToken\" \"YOUR_AUTH_TOKEN\" \u0026\u0026 \\\nyarn add @flexa/flexa-react-native\n```\n\nWhen published on NPM, the package will be available to install:\n\n```sh\nnpm install @flexa/flexa-react-native\n```\nor\n```sh\nyarn add @flexa/flexa-react-native\n```\n\nand finally install the pods for the ios platform\n\n```sh\ncd ios\npod install\n```\n\n## Usage\n\n### Initialization\n\nExecute the following SDK init function on the top level parent component of your App.\nYou can obtain a publishableKey for the app integration from Flexa.\n\n```js\nimport { init } from '@flexa/flexa-react-native';\n\npublishableKey = \"publishable_test_xyz\"\n\ninit(publishableKey, assetAccounts, webViewThemingData) // assetAccounts and webViewThemingData are optional\n\n```\nor wrap the main App component with the SpendContextProvider component\n\n```js\n\u003cFlexaContext.FlexaContextProvider\n  publishableKey={publishableKey}\n  assetAccounts={assetAccounts} //optional\n  webViewThemingData={webViewThemingData} //optional\n\u003e\n  \u003cApp /\u003e\n\u003c/FlexaContext.FlexaContextProvider\u003e\n```\n\n\nPlease check out [Theming](#theming) for the webViewThemingData\n\n### Universal Links\n\nTo implement a seamless Flexa login with Linking in React Native, the following settings should be applied:\n\n#### iOS\n\nMake sure to add the correct entitlements using\n\nXCode -\u003e select Project -\u003e Signing and Capabilities -\u003e Add Capability -\u003e Associated Domains\n\nand then add `applinks:\u003capp-name\u003e.flexa.link` in the Associated Domains Capability\n\nIn your `ios/\u003cprojectDirectory\u003e/AppDelegate.mm`\n\nfirst import the React RCTLinkingManager\n\n```#import \u003cReact/RCTLinkingManager.h\u003e```\n\nand then add the following functions before the `@end` of the file\n\n```objective-c\n- (BOOL)application:(UIApplication *)application\n   openURL:(NSURL *)url\n   options:(NSDictionary\u003cUIApplicationOpenURLOptionsKey,id\u003e *)options\n{\n  return [RCTLinkingManager application:application openURL:url options:options];\n}\n\n- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity\n restorationHandler:(nonnull void (^)(NSArray\u003cid\u003cUIUserActivityRestoring\u003e\u003e * _Nullable))restorationHandler\n{\n return [RCTLinkingManager application:application\n                  continueUserActivity:userActivity\n                    restorationHandler:restorationHandler];\n}\n```\n\n#### Android\n\nIn your `android/app/src/main/AndroidManifest.xml` add the following intent-filter under the .MainActivity\n\n```xml\n        \u003cintent-filter android:autoVerify=\"true\"\u003e\n          \u003caction android:name=\"android.intent.action.VIEW\" /\u003e\n          \u003ccategory android:name=\"android.intent.category.DEFAULT\" /\u003e\n          \u003ccategory android:name=\"android.intent.category.BROWSABLE\" /\u003e\n          \u003cdata\n                  android:host=\"\u003capp-name\u003e.flexa.link\"\n                  android:scheme=\"https\" /\u003e\n        \u003c/intent-filter\u003e\n```\n\n#### React Native\n\nThe `\u003cFlexaContext.FlexaContextProvider /\u003e` functionality includes deeplink processing by default\n\nIn order to enable the processing of the universal links by the Flexa SDK, you would need to use the React hook provided by the SDK in the App.tsx or parent level Component.\n\n```js\n  const link = useFlexaLinks()\n```\n\nOr add the following functionality in the App.tsx or parent level Component.\n\n\n```js\n  useEffect(() =\u003e {\n    const handleUrlEvents = urlEvent =\u003e {\n      if (urlEvent.url) processUniversalLink(urlEvent.url);\n    };\n    const linkSubscription = Linking.addEventListener('url', handleUrlEvents);\n\n    Linking.getInitialURL().then((url) =\u003e url \u0026\u0026 processUniversalLink(url));\n    return () =\u003e linkSubscription.remove();\n  }, []);\n```\n\n\n### Payments only View\n\nThe following example shows how to open the Flexa SDK screen for the Flexa payments.\n\nThe first argument in the payment() function is a list of assetAccounts passed from the parent app.\n\nA callback is passed which will return a TransactionRequest object when the Flexa SDK Pay is clicked.\n\n\n```js\nimport { payment, TransactionRequest } from '@flexa/flexa-react-native';\n\nconst paymentCallback = (transactionRequest: TransactionRequest) =\u003e {\n  //execute the transaction depending on parent app logic here\n  const {transaction, transactionSent, transactionFailed } = transactionRequest;\n\n  /* transaction contains\n    destinationAddress: string; eip155:1:0x123... destination address for payment\n    amount: string; // the fee price in decimals string representation\n    feePriorityPrice: string; the fee priority price in decimals string representation\n    feePrice: string; the fee price in decimals string representation\n    size: string; // transaction size bigint (i.e. gasLimit)\n    assetId: string; // assetId CAIP19 notation of the asset that is to be sent\n    assetAccountHash: string; // which assetAccountHash was used for the payment (i.e which wallet to send from)\n  */\n\n  const TX_SIGNATURE = yourTransactionSendFunction({ ...transaction })\n\n  // This helps Flexa confirm the transaction quickly for self-custody wallets. It is a callback sent back to the SDK with the transaction signature i.e hash\n  transactionSent(TX_SIGNATURE)\n\n  // Or call transactionFailed to close the commerce session initiated in the Flexa SDK\n  transactionFailed();\n\n}\n\nconst manualPayment = async () =\u003e {\n  const assetAccounts = [\n    {\n      displayName: 'Wallet 1',\n      assetAccountHash: '0x1..', // this is the sha256 of the wallet address\n      custodyModel: CUSTODY_MODEL.LOCAL,\n      availableAssets: [\n        {\n          assetId: 'eip155:1/slip44:60',\n          symbol: 'ETH',\n          displayName: \"Ether\",\n          balance: 0.5,\n          balanceAvailable: 0.5, // add it if different from the balance due to pending transactions etc.\n          icon: undefined\n        },\n        { assetId: 'eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7', symbol: 'USDT', displayName: \"USDT\", balance: 200, icon: undefined },\n        { assetId: 'eip155:1/erc20:0xff20817765cb7f73d4bde2e66e067e58d11095c2', symbol: 'AMP', displayName: \"AMP\", balance: 300, icon: undefined },\n      ],\n    },\n    {\n      displayName: 'Wallet 2',\n      assetAccountHash: '0x2..',\n      custodyModel: 'LOCAL', // this can be LOCAL or MANAGED depending on the wallet type (self custody, or custodial)\n      availableAssets: [\n        { assetId: 'eip155:1/slip44:60', symbol: 'ETH', displayName: \"Ether\", balance: 0.25, icon: \"https://cdn.myweb/ethLogoURL.png\" },\n        { assetId: 'eip155:1/erc20:0x6b175474e89094c44da98b954eedeac495271d0f', symbol: 'DAI', displayName: \"DAI\", balance: 120, icon: undefined },\n        { assetId: 'eip155:1/erc20:0x0d8775f648430679a709e98d2b0cb6250d2887ef', symbol: 'BAT', displayName: \"BAT\", balance: 4000, icon: undefined },\n      ],\n    },\n  ];\n\n  await payment(assetAccounts, paymentCallback);\n};\n\n```\n\nYou can also use the built-in FlexaButton component like the following code sample\n\n```js\n\u003cFlexaButton\n        assetAccounts={assetAccounts}\n        paymentCallback={paymentCallback}\n        width={32}\n        height={32}\n        borderRadius={4}\n/\u003e\n```\n\n### Theming\n\nFlexa SDK allows great customization of the SDK look and feel within the screens.\n\nIt works both with the native iOS and Android screens\n\nThe following format should be passed `webViewThemingData` with the following example structure:\n\n```js\nwebViewThemingData = {\n  android: {\n    light: {\n      backgroundColor: \"rgba(252, 248, 253, 0.5)\",\n      sortTextColor: \"#333333\",\n      titleColor: \"#007bff\",\n      primary: \"#28a745\",\n      cardColor: \"#ffffff\",\n      borderRadius: \"8px\"\n    },\n    dark: {\n      backgroundColor: \"rgba(19, 19, 22, 0.96)\",\n      sortTextColor: \"#ffffff\",\n      titleColor: \"#ffcc00\",\n      primary: \"#dc3545\",\n      cardColor: \"#2d2d2d\",\n      borderRadius: \"12px\"\n    },\n  },\n  iOS: {\n    light: {\n      backgroundColor: \"rgba(0, 0, 0, 0.04)\",\n      sortTextColor: \"#666666\",\n      titleColor: \"#ff6600\",\n      primary: \"#007bff\",\n      cardColor: \"#ffffff\",\n      borderRadius: \"10px\"\n    },\n    dark: {\n      backgroundColor: \"rgba(0, 0, 0, 0.96)\",\n      sortTextColor: \"#cccccc\",\n      titleColor: \"#ffffff\",\n      primary: \"#28a745\",\n      cardColor: \"#2d2d2d\",\n      borderRadius: \"8px\"\n    },\n  },\n}\n\n```\n\n## Permissions\n\nThe Flexa SDK requires Camera (QR Scanner) and Internet (Flexa Payments, advanced scanner) access.\n\nFor iOS, you can additionally enable the FaceID permission in XCode :\n\nin the `ios/\u003cproject\u003e/Info.plist` add the following key/string pair:\n\n```\n\u003ckey\u003eNSFaceIDUsageDescription\u003c/key\u003e\n\u003cstring\u003eWe need this to confirm the transaction\u003c/string\u003e\n```\n\n## Privacy\n\nFlexa will **never** attempt to access your users’ private keys, wallet addresses, a history of any actions taken in-app, or other sensitive wallet details. There is no method that enables you to provide any of this information to Flexa, and Flexa does not automatically extract any of this information from your app.\n\nIn order to enable payments for your users, federal regulations require Flexa to collect some personal information. This information typically consists of a user’s full name and date of birth. For higher-value payments, it can also include a photo ID document and photograph. This information is used only for verification purposes, and Flexa will never share this information with you or with any of the business your users pay.\n\nPlease note that making any modifications to your app or any of Flexa’s code with the intent to gather, retain, or otherwise access this personal information is expressly prohibited by the Flexa Developer Agreement, and will result in a permanent ban from using Flexa software for your business and any related individuals.\n\n## Contributing\n\nWe welcome and appreciate contributions to Flexa Components from the open source community.\n\n- For larger changes, please open an issue describing your objectives so that we can coordinate efforts.\n- Or, if you would like to make a minor edit (such as a single-line modification or to fix a typo), please feel free to open a pull request with your changes and we will review it promptly.\n\n## License\n\nFlexa Components for React Native is [available under the MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexa%2Fflexa-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflexa%2Fflexa-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflexa%2Fflexa-react-native/lists"}