{"id":16952669,"url":"https://github.com/nunogois/proxy-client-react-native","last_synced_at":"2025-07-20T11:31:29.022Z","repository":{"id":65524943,"uuid":"504645625","full_name":"nunogois/proxy-client-react-native","owner":"nunogois","description":"React Native / Expo interface for working with Unleash. DEPRECATED: This repository is no longer maintained. Please use https://github.com/nunogois/unleash-react-native instead.","archived":true,"fork":false,"pushed_at":"2024-12-02T08:51:55.000Z","size":221,"stargazers_count":2,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T22:46:27.906Z","etag":null,"topics":["deprecated","hacktoberfest","proxy","proxy-client","react","react-native","unleash"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nunogois.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-17T19:08:53.000Z","updated_at":"2024-12-02T11:51:56.000Z","dependencies_parsed_at":"2023-01-27T08:01:30.628Z","dependency_job_id":null,"html_url":"https://github.com/nunogois/proxy-client-react-native","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nunogois/proxy-client-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nunogois%2Fproxy-client-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nunogois%2Fproxy-client-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nunogois%2Fproxy-client-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nunogois%2Fproxy-client-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nunogois","download_url":"https://codeload.github.com/nunogois/proxy-client-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nunogois%2Fproxy-client-react-native/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266117052,"owners_count":23878997,"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":["deprecated","hacktoberfest","proxy","proxy-client","react","react-native","unleash"],"created_at":"2024-10-13T22:04:00.391Z","updated_at":"2025-07-20T11:31:24.011Z","avatar_url":"https://github.com/nunogois.png","language":"TypeScript","readme":"# proxy-client-react-native\n\nPoC for a React Native / Expo SDK for [Unleash](https://www.getunleash.io/) based on the official [proxy-client-react](https://github.com/Unleash/proxy-client-react).\n\nYou can check an example/demo here: [proxy-client-react-native-demo](https://github.com/nunogois/proxy-client-react-native-demo).\n\nThis should be very similar to [proxy-client-react](https://github.com/unleash/proxy-client-react) but with any specific React Native / Expo caveats built-in, providing more of a plug and play experience for end-users.\n\nSee: [unleash-proxy-client-js #87](https://github.com/Unleash/unleash-proxy-client-js/issues/87).\n\n# DISCLAIMER:\n\nThis library is meant to be used with the [unleash-proxy](https://github.com/Unleash/unleash-proxy). The proxy application layer will sit between your unleash instance and your client applications, and provides performance and security benefits. DO NOT TRY to connect this library directly to the unleash instance, as the datasets follow different formats because the proxy only returns evaluated toggle information.\n\n# Installation\n\n```bash\nnpm install @nunogois/proxy-client-react-native unleash-proxy-client\n// or\nyarn add @nunogois/proxy-client-react-native unleash-proxy-client\n```\n\n# Initialization\n\nImport the provider like this in your entrypoint file (typically index.js/ts):\n\n```jsx\nimport { createRoot } from 'react-dom/client';\nimport { FlagProvider } from '@nunogois/proxy-client-react-native';\n\nconst config = {\n  url: 'https://HOSTNAME/proxy',\n  clientKey: 'PROXYKEY',\n  refreshInterval: 15,\n  appName: 'your-app-name',\n  environment: 'dev',\n};\n\nconst root = createRoot(document.getElementById('root'));\n\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cFlagProvider config={config}\u003e\n      \u003cApp /\u003e\n    \u003c/FlagProvider\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\nAlternatively, you can pass your own client in to the FlagProvider:\n\n```jsx\nimport { createRoot } from 'react-dom/client';\nimport { FlagProvider, UnleashClient, defaultStorageProvider } from '@nunogois/proxy-client-react-native';\n\nconst config = {\n  url: 'https://HOSTNAME/proxy',\n  clientKey: 'PROXYKEY',\n  refreshInterval: 15,\n  appName: 'your-app-name',\n  environment: 'dev',\n  storageProvider: defaultStorageProvider()\n};\n\nconst client = new UnleashClient(config);\nconst root = createRoot(document.getElementById('root'));\n\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cFlagProvider unleashClient={client}\u003e\n      \u003cApp /\u003e\n    \u003c/FlagProvider\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\n## Deferring client start\n\nBy default, the Unleash client will start polling the Proxy for toggles immediately when the `FlagProvider` component renders. You can delay the polling by:\n- setting the `startClient` prop to `false`\n- passing a client instance to the `FlagProvider`\n\n```jsx\nroot.render(\n  \u003cReact.StrictMode\u003e\n    \u003cFlagProvider unleashClient={client} startClient={false}\u003e\n      \u003cApp /\u003e\n    \u003c/FlagProvider\u003e\n  \u003c/React.StrictMode\u003e\n);\n```\n\nDeferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance.\n\nTo start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function.\n\n``` jsx\nconst client = new UnleashClient({ /* ... */ })\n\nuseEffect(() =\u003e {\n  const asyncProcess = async () =\u003e {\n\t// do async work ...\n\tclient.start()\n    }\n    asyncProcess()\n  }, [])\n\nreturn (\n  // Pass client as `unleashClient` and set `startClient` to `false`\n  \u003cFlagProvider unleashClient={client} startClient={false}\u003e\n    \u003cApp /\u003e\n  \u003c/FlagProvider\u003e\n)\n```\n\n# Usage\n\n## Check feature toggle status\n\nTo check if a feature is enabled:\n\n```jsx\nimport { useFlag } from '@nunogois/proxy-client-react-native';\n\nconst TestComponent = () =\u003e {\n  const enabled = useFlag('travel.landing');\n\n  if (enabled) {\n    return \u003cSomeComponent /\u003e\n  }\n  return \u003cAnotherComponent /\u003e\n};\n\nexport default TestComponent;\n```\n\n## Check variants\n\nTo check variants:\n\n```jsx\nimport { useVariant } from '@nunogois/proxy-client-react-native';\n\nconst TestComponent = () =\u003e {\n  const variant = useVariant('travel.landing');\n\n  if (variant.enabled \u0026\u0026 variant.name === \"SomeComponent\") {\n    return \u003cSomeComponent /\u003e\n  } else if (variant.enabled \u0026\u0026 variant.name === \"AnotherComponent\") {\n    return \u003cAnotherComponent /\u003e\n  }\n  return \u003cDefaultComponent /\u003e\n};\n\nexport default TestComponent;\n```\n\n## Defer rendering until flags fetched\n\nuseFlagsStatus retrieves the ready state and error events.\nFollow the following steps in order to delay rendering until the flags have been fetched.\n\n```jsx\nimport { useFlagsStatus } from '@nunogois/proxy-client-react-native'\n\nconst MyApp = () =\u003e {\n  const { flagsReady, flagsError } = useFlagsStatus();\n\n  if (!flagsReady) {\n    return \u003cLoading /\u003e\n  }\n  return \u003cMyComponent error={flagsError}/\u003e\n}\n\n```\n\n## Updating context\n\nFollow the following steps in order to update the unleash context:\n\n```jsx\nimport { useUnleashContext, useFlag } from '@nunogois/proxy-client-react-native'\n\nconst MyComponent = ({ userId }) =\u003e {\n  const variant = useFlag(\"my-toggle\");\n  const updateContext = useUnleashContext();\n\n  useEffect(() =\u003e {\n    // context is updated with userId\n    updateContext({ userId })\n  }, [userId])\n\n  useEffect(() =\u003e {\n    async function run() {\n    // Can wait for the new flags to pull in from the different context\n      await updateContext({ userId });\n      console.log('new flags loaded for', userId);\n    }\n    run();\n  }, [userId]);\n}\n\n```\n\n## Use unleash client directly\n\n```jsx\nimport { useUnleashContext, useUnleashClient } from '@nunogois/proxy-client-react-native'\n\nconst MyComponent = ({ userId }) =\u003e {\n  const client = useUnleashClient();\n\n  const updateContext = useUnleashContext();\n\n  const login = () =\u003e {\n    // login user\n    if (client.isEnabled(\"new-onboarding\")) {\n      // Send user to new onboarding flow\n    } else (\n      // send user to old onboarding flow\n    )\n  }\n\n  return \u003cLoginForm login={login}/\u003e\n}\n```\n\n## Usage with class components\nSince this library uses hooks you have to implement a wrapper to use with class components. Beneath you can find an example of how to use this library with class components, using a custom wrapper:\n\n```jsx\nimport React from \"react\";\nimport {\n  useFlag,\n  useUnleashClient,\n  useUnleashContext,\n  useVariant,\n  useFlagsStatus\n} from \"@nunogois/proxy-client-react-native\";\n\ninterface IUnleashClassFlagProvider {\n  render: (props: any) =\u003e React.ReactNode;\n  flagName: string;\n}\n\nexport const UnleashClassFlagProvider = ({\n  render,\n  flagName\n}: IUnleashClassFlagProvider) =\u003e {\n  const enabled = useFlag(flagName);\n  const variant = useVariant(flagName);\n  const client = useUnleashClient();\n\n  const { updateContext } = useUnleashContext();\n  const { flagsReady, flagsError } = useFlagsStatus();\n\n  const isEnabled = () =\u003e {\n    return enabled;\n  };\n\n  const getVariant = () =\u003e {\n    return variant;\n  };\n\n  const getClient = () =\u003e {\n    return client;\n  };\n\n  const getUnleashContextSetter = () =\u003e {\n    return updateContext;\n  };\n\n  const getFlagsStatus = () =\u003e {\n    return { flagsReady, flagsError };\n  };\n\n  return (\n    \u003c\u003e\n      {render({\n        isEnabled,\n        getVariant,\n        getClient,\n        getUnleashContextSetter,\n        getFlagsStatus\n      })}\n    \u003c/\u003e\n  );\n};\n```\n\nWrap your components like so: \n```jsx\n    \u003cUnleashClassFlagProvider\n      flagName=\"demoApp.step1\"\n      render={({ isEnabled, getClient }) =\u003e (\n        \u003cMyClassComponent isEnabled={isEnabled} getClient={getClient} /\u003e\n      )}\n    /\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnunogois%2Fproxy-client-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnunogois%2Fproxy-client-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnunogois%2Fproxy-client-react-native/lists"}