Add react-native-braintree-dropin-ui to EXPO project

clock icon

5 months ago Asked

message

2 Answers

eye

23 Views

I'm tring to add react-native-braintree-dropin-ui to EXPO project.

Always getting DROP_IN_CLIENT_UNINITIALIZED error.

According to readme file I should place this code somewhere in expo project... but where?

 import tech.power.RNBraintreeDropIn.RNBraintreeDropInModule;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        RNBraintreeDropInModule.initDropInClient(this);
    }
expo
braintree

2 Answers

 

TS/TSX files work out of the box with expo v31 but you'll probably want to include

Package TypeScript types

yarn add @types/expo @types/react @types/react-native -D

Custom tsconfig.json

Create tsconfig.json in the root directory next to package.json. It enforces strict mode and includes App.tsx (to replace App.js) and "custom_types" directory to add types for npm packages that don't include them.

// Defaults from https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/
// Added "jsx": "react-native".
// Added ["App.tsx", "custom_types"] to "include".
{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Output react-native code.
    "jsx": "react-native",
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
  },
  "include": ["src", "App.tsx", "custom_types"]
}
 

TS/TSX files work out of the box with expo v31 but you'll probably want to include

Package TypeScript types

yarn add @types/expo @types/react @types/react-native -D

Custom tsconfig.json

Create tsconfig.json in the root directory next to package.json. It enforces strict mode and includes App.tsx (to replace App.js) and "custom_types" directory to add types for npm packages that don't include them.

// Defaults from https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/
// Added "jsx": "react-native".
// Added ["App.tsx", "custom_types"] to "include".
{
  "compilerOptions": {
    // Target latest version of ECMAScript.
    "target": "esnext",
    // Search under node_modules for non-relative imports.
    "moduleResolution": "node",
    // Output react-native code.
    "jsx": "react-native",
    // Don't emit; allow Babel to transform files.
    "noEmit": true,
    // Enable strictest settings like strictNullChecks & noImplicitAny.
    "strict": true,
    // Disallow features that require cross-file information for emit.
    "isolatedModules": true,
    // Import non-ES modules as default imports.
    "esModuleInterop": true
  },
  "include": ["src", "App.tsx", "custom_types"]
}

Write your answer here

Top Questions

Popular Tags

expo

1

braintree

1

typescript

0

react-native

0