chore(js): include React Native Expo example app

Signed-off-by: berendsliedrecht <blu3beri@proton.me>

.gitignore

@@ -8,3 +8,11 @@ target
 *.so
 .npmrc
 out
+
+# react Native Libraries
+wrappers/javascript/packages/aries-askar-react-native/native/mobile/
+
+# Example app
+wrappers/javascript/packages/aries-askar-react-native-example/android
+wrappers/javascript/packages/aries-askar-react-native-example/ios
+wrappers/javascript/packages/aries-askar-react-native-example/.expo

wrappers/javascript/packages/aries-askar-react-native-example/app.json

@@ -0,0 +1,27 @@
+{
+  "expo": {
+    "name": "aries-askar-react-native-example",
+    "slug": "aries-askar-react-native-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "org.hyperledger.aries_askar.example"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "org.hyperledger.aries_askar.example"
+    }
+  }
+}

wrappers/javascript/packages/aries-askar-react-native-example/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+  api.cache(true)
+  return {
+    presets: ['babel-preset-expo'],
+  }
+}

wrappers/javascript/packages/aries-askar-react-native-example/metro.config.js

@@ -0,0 +1,18 @@
+const { getDefaultConfig } = require('expo/metro-config')
+const path = require('path')
+
+const projectRoot = __dirname
+const workspaceRoot = path.resolve(projectRoot, '../..')
+
+const config = getDefaultConfig(projectRoot)
+
+config.watchFolders = [workspaceRoot]
+
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
+]
+
+config.resolver.disableHierarchicalLookup = true
+
+module.exports = config

wrappers/javascript/packages/aries-askar-react-native-example/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "aries-askar-react-native-example",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./src/index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
+    "prebuild": "expo prebuild"
+  },
+  "dependencies": {
+    "@hyperledger/aries-askar-react-native": "workspace:*",
+    "expo": "~51.0.2",
+    "expo-status-bar": "~1.12.1",
+    "react": "18.2.0",
+    "react-native": "0.74.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/runtime": "^7.22.15",
+    "@types/react": "~18.2.45",
+    "typescript": "~5.4.5"
+  }
+}

wrappers/javascript/packages/aries-askar-react-native-example/src/App.tsx

@@ -0,0 +1,17 @@
+import { ariesAskar } from '@hyperledger/aries-askar-react-native'
+import { StyleSheet, Text, View } from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+})
+
+export const App = () => (
+  <View style={styles.container}>
+    <Text>{ariesAskar.version()}</Text>
+  </View>
+)

wrappers/javascript/packages/aries-askar-react-native-example/src/index.js

@@ -0,0 +1,5 @@
+import { registerRootComponent } from 'expo'
+
+import { App } from './App'
+
+registerRootComponent(App)

wrappers/javascript/packages/aries-askar-react-native-example/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["react-native"],
+    "jsx": "react-native"
+  },
+  "include": ["src"]
+}

wrappers/javascript/packages/aries-askar-react-native/android/build.gradle

@@ -81,7 +81,7 @@ android {
   }
 
   defaultConfig {
-    minSdkVersion 21 
+    minSdkVersion 23
     targetSdkVersion getExt('targetSdkVersion')
 
     externalNativeBuild {