V2 Migration Guide

Install react-native-webview

The react-native-webview package is now a peer dependency and will need to be installed as well.

1## Using npm
2npm install react-native-webview
3
4## Using yarn
5yarn add react-native-webview
6
7## Using Expo
8npx expo install react-native-webview

Update your imports

The package name has been updated to @evervault/react-native.

1- import { EvervaultProvider } from '@evervault/evervault-react-native';
2+ import { EvervaultProvider } from '@evervault/react-native';

Remove top-level function calls

In the previous version, you could call init() and encrypt() directly from the package.

These functions are no longer exposed at the top level. Instead:

Initializing the SDK is now done via the <EvervaultProvider /> component.
Encrypting data is now done via the encrypt() method returned from the useEvervault hook.

1- import { init } from '@evervault/evervault-react-native';
2+ import { EvervaultProvider } from '@evervault/react-native';
3
4  function App() {
5-   useEffect(() => {
6-     init('team_id', 'app_id');
7-   }, []);
8
9    return (
10+     <EvervaultProvider teamId="team_id" appId="app_id">
11        <YourApp />
12+     </EvervaultProvider>
13    );
14  }

1- import { encrypt } from '@evervault/evervault-react-native';
2+ import { useEvervault } from '@evervault/react-native';
3
4  function App() {
5+   const { encrypt } = useEvervault();
6
7    async function handleEncrypt() {
8      const encrypted = await encrypt('data');
9    }
10  }

Update Card props

In the previous version, you could pass styles to the <Card /> component via the style prop.

The Card component no longer renders a View, so you should move the styles to a parent or child View.

1- <Card style={{ padding: 16 }} />
2+ <View style={{ padding: 16 }}>
3+   <Card />
4+ </View>

The previous version also accepted acceptedBrands via the config prop. This has been moved top-level:

1- <Card config={{ acceptedBrands: ['visa', 'mastercard'] }} />
2+ <Card acceptedBrands={['visa', 'mastercard']} />

Finally, the initialValue prop has been renamed to defaultValues:

1- <Card initialValue={{ name: 'John Doe' }} />
2+ <Card defaultValues={{ name: 'John Doe' }} />

Rename Card.CVC to Card.Cvc

The Card.CVC prop has been renamed to Card.Cvc.

1- <Card.CVC placeholder="CVC" />
2+ <Card.Cvc placeholder="CVC" />