Merge pull request #259 from klarna/fix-webview-scroll-and-example

Fix webview scroll and test app example
klarna · Jul 1, 2024 · 72333a4 · 72333a4
2 parents 524a989 + aba1a6a
commit 72333a4
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 33 deletions.
diff --git a/.github/workflows/library.yml b/.github/workflows/library.yml
@@ -14,11 +14,16 @@ jobs:
       - name: Setup
         uses: ./.github/actions/setup
 
-      - name: Lint files
+      - name: Lint Check
         run: |
           yarn lint
           (cd TestApp;yarn lint)
 
+      - name: Format Check
+        run: |
+          yarn prettier
+          (cd TestApp;yarn prettier)
+
       - name: Typecheck files
         run: yarn typecheck
 

diff --git a/TestApp/ios/Podfile.lock b/TestApp/ios/Podfile.lock
@@ -938,7 +938,7 @@ PODS:
   - React-Mapbuffer (0.74.1):
     - glog
     - React-debug
-  - react-native-klarna-inapp-sdk (2.2.5):
+  - react-native-klarna-inapp-sdk (2.3.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1431,7 +1431,7 @@ SPEC CHECKSUMS:
   React-jsitracing: 233d1a798fe0ff33b8e630b8f00f62c4a8115fbc
   React-logger: 7e7403a2b14c97f847d90763af76b84b152b6fce
   React-Mapbuffer: 11029dcd47c5c9e057a4092ab9c2a8d10a496a33
-  react-native-klarna-inapp-sdk: 4eb9e158767c3bc3cf112215b1885e8d10b66264
+  react-native-klarna-inapp-sdk: f8ab6a1e4a5511c54a0db04dfe3c2f606595e0d6
   react-native-safe-area-context: dcab599c527c2d7de2d76507a523d20a0b83823d
   React-nativeconfig: b0073a590774e8b35192fead188a36d1dca23dec
   React-NativeModulesApple: df46ff3e3de5b842b30b4ca8a6caae6d7c8ab09f

diff --git a/TestApp/package.json b/TestApp/package.json
@@ -8,7 +8,9 @@
     "start": "react-native start",
     "test": "jest",
     "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "lint:fix": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
+    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
     "bundle:android-dev": "react-native bundle --platform android --dev true --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
     "bundle:ios": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle",

diff --git a/TestApp/src/checkout/KlarnaCheckoutScreen.tsx b/TestApp/src/checkout/KlarnaCheckoutScreen.tsx
@@ -1,14 +1,7 @@
-import {
-  Keyboard,
-  ScrollView,
-  Text,
-  TextInput,
-  useColorScheme,
-  View,
-} from 'react-native';
+import {Keyboard, Text, TextInput, useColorScheme, View} from 'react-native';
 import {KlarnaCheckoutView} from 'react-native-klarna-inapp-sdk';
 import React, {useRef, useState} from 'react';
-import styles, {backgroundStyle, Colors} from '../common/ui/Styles';
+import styles, {backgroundStyle} from '../common/ui/Styles';
 import Button from '../common/ui/view/Button';
 import testProps from '../common/util/TestProps';
 
@@ -82,32 +75,27 @@ export default function KlarnaCheckoutScreen(): React.JSX.Element {
   };
 
   return (
-    <ScrollView
-      contentInsetAdjustmentBehavior="automatic"
-      style={backgroundStyle(styles.scrollView, isDarkMode)}>
-      <View
-        style={{
-          backgroundColor: isDarkMode ? Colors.black : Colors.white,
-        }}>
+    <View style={backgroundStyle(styles.column, isDarkMode)}>
+      <View style={styles.columnHeader}>
         {renderSnippetInput()}
         <View style={styles.buttonsContainer}>
           {renderSetSnippetButton()}
           {renderSuspendButton()}
           {renderResumeButton()}
         </View>
-        <KlarnaCheckoutView
-          ref={checkoutViewRef}
-          style={styles.componentView}
-          returnUrl={'returnUrl://'}
-          onEvent={klarnaProductEvent => {
-            onEvent(JSON.stringify(klarnaProductEvent));
-          }}
-          onError={error => {
-            onEvent(JSON.stringify(error));
-          }}
-        />
         <Text {...testProps('state_events')}>{eventState}</Text>
       </View>
-    </ScrollView>
+      <KlarnaCheckoutView
+        ref={checkoutViewRef}
+        style={styles.columnItemFill}
+        returnUrl={'returnUrl://'}
+        onEvent={klarnaProductEvent => {
+          onEvent(JSON.stringify(klarnaProductEvent));
+        }}
+        onError={error => {
+          onEvent(JSON.stringify(error));
+        }}
+      />
+    </View>
   );
 }
diff --git a/TestApp/src/common/ui/Styles.tsx b/TestApp/src/common/ui/Styles.tsx
@@ -26,6 +26,20 @@ const styles = StyleSheet.create({
     flex: 1,
     flexGrow: 1,
   },
+  column: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+  },
+  columnHeader: {
+    flexShrink: 0,
+  },
+  columnFooter: {
+    flexShrink: 0,
+  },
+  columnItemFill: {
+    flexGrow: 1,
+  },
   tokenInput: {
     flexDirection: 'column',
     justifyContent: 'space-around',

diff --git a/package.json b/package.json
@@ -35,7 +35,8 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"src/**/*.{js,ts,tsx}\" --fix",
-    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "clean": "del-cli android/build ios/build TestApp/android/build TestApp/android/app/build TestApp/ios/build",
     "pods": "pod-install --quiet",
     "test:android": "cd TestApp/android && ./gradlew :react-native-klarna-inapp-sdk:testDebugUnitTest && cd ../..",

diff --git a/src/KlarnaCheckoutView.tsx b/src/KlarnaCheckoutView.tsx
@@ -46,6 +46,7 @@ export class KlarnaCheckoutView extends Component<
         style={{
           width: '100%',
           height: this.state.nativeViewHeight,
+          flexShrink: 1,
         }}
         returnUrl={this.props.returnUrl || ''}
         onEvent={(

diff --git a/src/KlarnaPaymentView.tsx b/src/KlarnaPaymentView.tsx
@@ -74,6 +74,7 @@ export class KlarnaPaymentView extends Component<
         style={{
           width: '100%',
           height: this.state.nativeViewHeight,
+          flexShrink: 1,
         }}
         category={this.props.category || ''}
         returnUrl={this.props.returnUrl || ''}