Skip to main content

EasyProvider

The EasyProvider is the main provider component that initializes the Easy SDK and secure form elements. It must wrap your application to enable Easy SDK functionality in React Native.

Props​

interface EasyProviderProps {
  apiKey: string; // Your Easy API key (required)
  __dev?: boolean; // Enable development/sandbox mode (optional)
  children: React.ReactNode; // Child components
}

apiKey (required)​

Your Easy publishable API key. This should be stored in environment variables.

Security

Never use your secret API key in client-side code! Always use the publishable key for the React Native SDK.

__dev (optional)​

Enables development/sandbox mode. Set to true in development environments.

children​

The React Native components that will have access to the Easy SDK through the useEasy hook.

Basic Usage​

Expo​

import { EasyProvider } from "@easylabs/react-native";
import Constants from "expo-constants";

function App() {
  return (
    <EasyProvider apiKey={Constants.expoConfig?.extra?.easyApiKey}>
      <YourApp />
    </EasyProvider>
  );
}

export default App;

Bare React Native​

import { EasyProvider } from "@easylabs/react-native";
import Config from "react-native-config";

function App() {
  return (
    <EasyProvider apiKey={Config.EASY_API_KEY}>
      <YourApp />
    </EasyProvider>
  );
}

export default App;

With Development Mode​

import { EasyProvider } from "@easylabs/react-native";
import Constants from "expo-constants";

function App() {
  const isDev = __DEV__; // React Native's built-in development flag

  return (
    <EasyProvider
      apiKey={Constants.expoConfig?.extra?.easyApiKey}
      __dev={isDev}
    >
      <YourApp />
    </EasyProvider>
  );
}

Environment Variables​

Expo​

Create an app.config.js:

export default {
  expo: {
    extra: {
      easyApiKey: process.env.EASY_API_KEY,
    },
  },
};

Create a .env file:

EASY_API_KEY=your_publishable_key_here

Access it with:

import Constants from "expo-constants";

const apiKey = Constants.expoConfig?.extra?.easyApiKey;

Bare React Native​

Install react-native-config:

npm install react-native-config

Create a .env file:

EASY_API_KEY=your_publishable_key_here

Access it with:

import Config from "react-native-config";

const apiKey = Config.EASY_API_KEY;

With Navigation​

If you're using React Navigation, wrap your entire navigation container:

import { NavigationContainer } from "@react-navigation/native";
import { EasyProvider } from "@easylabs/react-native";
import Constants from "expo-constants";

function App() {
  return (
    <EasyProvider apiKey={Constants.expoConfig?.extra?.easyApiKey}>
      <NavigationContainer>
        <YourNavigator />
      </NavigationContainer>
    </EasyProvider>
  );
}

Error Handling​

Handle missing API keys gracefully:

import { EasyProvider } from "@easylabs/react-native";
import { View, Text } from "react-native";
import Constants from "expo-constants";

function App() {
  const apiKey = Constants.expoConfig?.extra?.easyApiKey;

  if (!apiKey) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Error: API key not configured</Text>
      </View>
    );
  }

  return (
    <EasyProvider apiKey={apiKey}>
      <YourApp />
    </EasyProvider>
  );
}

Multiple Environments​

Manage different API keys for different environments:

import { EasyProvider } from "@easylabs/react-native";
import Constants from "expo-constants";

function App() {
  const getApiKey = () => {
    // Development
    if (__DEV__) {
      return Constants.expoConfig?.extra?.easyDevApiKey;
    }

    // Production
    return Constants.expoConfig?.extra?.easyProdApiKey;
  };

  return (
    <EasyProvider apiKey={getApiKey()} __dev={__DEV__}>
      <YourApp />
    </EasyProvider>
  );
}

In your app.config.js:

export default {
  expo: {
    extra: {
      easyDevApiKey: process.env.EASY_DEV_API_KEY,
      easyProdApiKey: process.env.EASY_PROD_API_KEY,
    },
  },
};

Best Practices​

1. Wrap at Root Level​

Place EasyProvider at the root of your app to ensure all components have access:

// ✅ Good
<EasyProvider apiKey={apiKey}>
  <NavigationContainer>
    <App />
  </NavigationContainer>
</EasyProvider>

// ❌ Bad - nested too deep
<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Payment">
      {() => (
        <EasyProvider apiKey={apiKey}>
          <PaymentScreen />
        </EasyProvider>
      )}
    </Stack.Screen>
  </Stack.Navigator>
</NavigationContainer>

2. Environment-Specific Keys​

Always use different API keys for development and production:

<EasyProvider apiKey={__DEV__ ? DEV_API_KEY : PROD_API_KEY} __dev={__DEV__}>
  <App />
</EasyProvider>

3. Secure Key Storage​

Never commit API keys to version control:

# .gitignore
.env
.env.local
.env.development
.env.production

4. Error Boundaries​

Wrap your provider with error boundaries:

import { ErrorBoundary } from "react-error-boundary";

function App() {
  return (
    <ErrorBoundary fallback={<ErrorScreen />}>
      <EasyProvider apiKey={apiKey}>
        <YourApp />
      </EasyProvider>
    </ErrorBoundary>
  );
}

Next Steps​