Skip to content

Commit

Permalink
Merge pull request #674 from plaid/dt-fabric-example
Browse files Browse the repository at this point in the history
  • Loading branch information
dtroupe-plaid authored Jun 3, 2024
2 parents f991343 + 1b519cf commit 9ae9399
Show file tree
Hide file tree
Showing 8 changed files with 135 additions and 70 deletions.
12 changes: 11 additions & 1 deletion FabricExample/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,14 @@
module.exports = {
root: true,
extends: '@react-native',
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
],
ignorePatterns: [
'babel.config.js',
'.eslintrc.js',
'jest.config.js',
'metro.config.js',
],
};
10 changes: 5 additions & 5 deletions FabricExample/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ PODS:
- hermes-engine (0.74.1):
- hermes-engine/Pre-built (= 0.74.1)
- hermes-engine/Pre-built (0.74.1)
- Plaid (5.5.0)
- Plaid (5.5.1)
- RCT-Folly (2024.01.01.00):
- boost
- DoubleConversion
Expand Down Expand Up @@ -936,11 +936,11 @@ PODS:
- React-Mapbuffer (0.74.1):
- glog
- React-debug
- react-native-plaid-link-sdk (11.9.0):
- react-native-plaid-link-sdk (11.10.2):
- DoubleConversion
- glog
- hermes-engine
- Plaid (~> 5.5.0)
- Plaid (~> 5.5.1)
- RCT-Folly (= 2024.01.01.00)
- RCTRequired
- RCTTypeSafety
Expand Down Expand Up @@ -1515,7 +1515,7 @@ SPEC CHECKSUMS:
fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
hermes-engine: 16b8530de1b383cdada1476cf52d1b52f0692cbc
Plaid: e2760da0ba3f71fae515b9936d20dc188681f37a
Plaid: 276eb2892728a7b33a89f54aa0d62cf532af2c1d
RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
RCTDeprecation: efb313d8126259e9294dc4ee0002f44a6f676aba
RCTRequired: f49ea29cece52aee20db633ae7edc4b271435562
Expand All @@ -1540,7 +1540,7 @@ SPEC CHECKSUMS:
React-jsitracing: 233d1a798fe0ff33b8e630b8f00f62c4a8115fbc
React-logger: 7e7403a2b14c97f847d90763af76b84b152b6fce
React-Mapbuffer: 11029dcd47c5c9e057a4092ab9c2a8d10a496a33
react-native-plaid-link-sdk: 58883da163f87ac9f7524b22cb37be497df2d417
react-native-plaid-link-sdk: aa721fc10b14926ee16f805083c2a61ad0c693a5
react-native-safe-area-context: 7f54ad0a774de306ab790c70d9d950321e5c5449
React-nativeconfig: b0073a590774e8b35192fead188a36d1dca23dec
React-NativeModulesApple: df46ff3e3de5b842b30b4ca8a6caae6d7c8ab09f
Expand Down
8 changes: 4 additions & 4 deletions FabricExample/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion FabricExample/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react": "18.2.0",
"react-native": "0.74.1",
"react-native-gesture-handler": "^2.16.2",
"react-native-plaid-link-sdk": "^11.9.0",
"react-native-plaid-link-sdk": "^11.10.2",
"react-native-safe-area-context": "4.10.1",
"react-native-screens": "3.31.1"
},
Expand Down
2 changes: 1 addition & 1 deletion FabricExample/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { PlaidLinkScreen } from './Screens/PlaidLinkScreen';

const Tab = createBottomTabNavigator();

export default function App() {
export default function App(): React.JSX.Element{
return (
<NavigationContainer>
<Tab.Navigator screenOptions={{
Expand Down
95 changes: 53 additions & 42 deletions FabricExample/src/Screens/PlaidEmbeddedLinkScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,61 @@
import * as React from 'react';
import { TextInput, Text, View } from 'react-native';
import { styles } from '../Styles';
import { EmbeddedLinkView, LinkIOSPresentationStyle, LinkEvent, LinkExit, LinkSuccess } from 'react-native-plaid-link-sdk';
import {TextInput, Text, View} from 'react-native';
import {styles} from '../Styles';
import {
EmbeddedLinkView,
LinkIOSPresentationStyle,
LinkEvent,
LinkExit,
LinkSuccess,
} from 'react-native-plaid-link-sdk';

// Simple conditional view to display Embedded Link once a token has been entered.
var EmbeddedView = ({token}: {token: string}) => {
let content
const EmbeddedView = ({token}: {token: string}) => {
let content;

if (token) {
content = <View>
<EmbeddedLinkView
token={token}
iOSPresentationStyle={LinkIOSPresentationStyle.FULL_SCREEN}
onEvent={(event: LinkEvent) => {
console.log('onEvent', event);
}}
onSuccess={(success: LinkSuccess) => {
console.log('onSuccess', success);
}}
onExit={(exit: LinkExit) => {
console.log('onExit', exit);
}}
style={styles.embedded}
/>
</View>
} else {
content = <Text style={{ fontSize: 24, color: '#2196F3', textAlign: 'center' }}>Enter Link Token</Text>
}

return <View style={{ padding: 24 }}>{content}</View>
}
if (token) {
content = (
<View>
<EmbeddedLinkView
token={token}
iOSPresentationStyle={LinkIOSPresentationStyle.MODAL}
onEvent={(event: LinkEvent) => {
console.log('onEvent', event);
}}
onSuccess={(success: LinkSuccess) => {
console.log('onSuccess', success);
}}
onExit={(exit: LinkExit) => {
console.log('onExit', exit);
}}
style={styles.embedded}
/>
</View>
);
} else {
content = (
<Text style={{fontSize: 24, color: '#2196F3', textAlign: 'center'}}>
Enter Link Token
</Text>
);
}

export function PlaidEmbeddedLinkScreen() {
return <View style={{padding: 24}}>{content}</View>;
};

const [text, setText] = React.useState('');
export function PlaidEmbeddedLinkScreen(): React.JSX.Element {
const [text, setText] = React.useState('');

return (
<>
<TextInput
style={styles.input}
onChangeText={newText => setText(newText)}
value={text}
placeholder="link-sandbox-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
placeholderTextColor={'#D3D3D3'}
/>
<EmbeddedView token={text} />
</>
);
return (
<>
<TextInput
style={styles.input}
onChangeText={newText => setText(newText)}
value={text}
placeholder="link-sandbox-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
placeholderTextColor={'#D3D3D3'}
/>
<EmbeddedView token={text} />
</>
);
}
61 changes: 45 additions & 16 deletions FabricExample/src/Screens/PlaidLinkScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,45 @@
import React from 'react';
import { TextInput, Text, TouchableOpacity } from 'react-native';
import { styles } from '../Styles';
import {TextInput, Text, TouchableOpacity} from 'react-native';
import {styles} from '../Styles';

import {
LinkExit,
LinkEvent,
LinkLogLevel,
LinkSuccess,
openLink,
dismissLink,
PlaidLinkProps,
LinkOpenProps,
usePlaidEmitter,
LinkIOSPresentationStyle,
LinkTokenConfiguration,
} from 'react-native-plaid-link-sdk';

// Create PlaidLinkProps from the provided token string.
function makeLinkTokenProps(token: string): PlaidLinkProps {
import {create, open} from 'react-native-plaid-link-sdk/dist/PlaidLink';

function isValidString(str: string): boolean {
if (str && str.trim() !== '') {
return true;
}
return false;
}

function createLinkTokenConfiguration(
token: string,
noLoadingState = false,
): LinkTokenConfiguration {
console.log(`token: ${token}`);
return {
token: token,
// Hides native activity indicator if true.
noLoadingState: noLoadingState,
};
}

function createLinkOpenProps(): LinkOpenProps {
return {
tokenConfig: {
token: token,
logLevel: LinkLogLevel.ERROR,
// Hides native activity indicator if true.
noLoadingState: false,
},
onSuccess: (success: LinkSuccess) => {
// User was able to successfully link their account.
console.log('Success: ', success);
console.log('Success: ', success);
success.metadata.accounts.forEach(it => console.log('accounts', it));
},
onExit: (linkExit: LinkExit) => {
Expand All @@ -35,10 +49,11 @@ function makeLinkTokenProps(token: string): PlaidLinkProps {
},
// MODAL or FULL_SCREEEN presentation on iOS. Defaults to MODAL.
iOSPresentationStyle: LinkIOSPresentationStyle.MODAL,
logLevel: LinkLogLevel.ERROR,
};
}

export function PlaidLinkScreen() {
export function PlaidLinkScreen(): React.JSX.Element {
// Render using the link_token integration. Refer to the docs
// https://plaid.com/docs/#create-link-token on how to create
// a new link_token.
Expand All @@ -50,6 +65,7 @@ export function PlaidLinkScreen() {
});

const [text, onChangeText] = React.useState('');
const [disabled, setDisabled] = React.useState(true);

return (
<>
Expand All @@ -63,8 +79,21 @@ export function PlaidLinkScreen() {
<TouchableOpacity
style={styles.button}
onPress={() => {
const linkTokenProps = makeLinkTokenProps(text);
openLink(linkTokenProps);
if (isValidString(text)) {
const tokenConfiguration = createLinkTokenConfiguration(text);
create(tokenConfiguration);
setDisabled(false);
}
}}>
<Text style={styles.button}>Create Link</Text>
</TouchableOpacity>
<TouchableOpacity
disabled={disabled}
style={disabled ? styles.disabledButton : styles.button}
onPress={() => {
const openProps = createLinkOpenProps();
open(openProps);
setDisabled(true);
}}>
<Text style={styles.button}>Open Link</Text>
</TouchableOpacity>
Expand Down
15 changes: 15 additions & 0 deletions FabricExample/src/Styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,21 @@ export const styles = StyleSheet.create({
textTransform: 'uppercase',
overflow: 'hidden',
},
disabledButton: {
elevation: 8,
backgroundColor: '#2196F3',
width: '90%',
margin: 4,
paddingVertical: 4,
fontSize: 16,
textAlign: 'center',
color: 'white',
borderRadius: 4,
alignSelf: 'center',
textTransform: 'uppercase',
overflow: 'hidden',
opacity: 0.5,
},
input: {
height: 40,
margin: 12,
Expand Down

0 comments on commit 9ae9399

Please sign in to comment.