Chore: improve hello example apps (example/js) (#177)

This PR moves the `hello` example app using Expo from
`example/js/react-native/hello` to `example/js/expo/hello`, and modifies
the `new-app` Makefile rule to create new apps in the new
`example/js/expo` directory.

We also recreate `example/js/react-native/hello` from scratch following
the react-native guide, to create a new `hello` app without Expo. Then
we integrated gnonative files without the gnonative NPM package. The
steps to accomplish that are written in the
`example/js/react-native/hello/README.md` file so anyone can integrate
gnonative in its bare React-Native app.

---------

Signed-off-by: D4ryl00 <[email protected]>

Author: D4ryl00

.tool-versions

@@ -1,4 +1,4 @@
-nodejs 21.7.3
+nodejs 22.8.0
 ruby 3.2.2
 cocoapods 1.15.2
 java openjdk-17.0.2

Makefile

@@ -190,19 +190,19 @@ asdf.install_tools: asdf.add_plugins
 # Script to create a new app
 
 npm_basic_dependencies := @gnolang/gnonative
-OUTPUT_DIR := $(make_dir)/examples/js/react-native
+OUTPUT_DIR := $(make_dir)/examples/js/expo
 
 new-app:
 ifndef APP_NAME
 	$(error APP_NAME is undefined. Please set APP_NAME to the name of your app)
 endif
 	$(call check-program, npm)
 	npm config set @buf:registry https://buf.build/gen/npm/v1/
-	$(MAKE) new-react-native-app OUTPUT_DIR=$(make_dir)/examples/js/react-native
-	$(MAKE) copy-js-files APP_NAME=$(APP_NAME) APP_OUTPUT_DIR=$(make_dir)/examples/js/react-native
+	$(MAKE) new-expo-app OUTPUT_DIR=$(make_dir)/examples/js/expo
+	$(MAKE) copy-js-files OUTPUT_DIR=$(make_dir)/examples/js/expo APP_NAME=$(APP_NAME)
 
-# creates a new react native app using Expo script. Also creates ios and android folders
-new-react-native-app:
+# creates a new Expo app using Expo script. Also creates ios and android folders
+new-expo-app:
 	$(call check-program, npm)
 	$(call check-program, npx)
 	@mkdir -p $(OUTPUT_DIR)
@@ -212,12 +212,10 @@ new-react-native-app:
 	cd $(OUTPUT_DIR)/$(APP_NAME) && npx expo prebuild
 	@echo "Installing npm dependencies"
 	cd $(OUTPUT_DIR)/$(APP_NAME) && npm install ${npm_basic_dependencies}
-	@echo "Building GnoCore.xcframework for the new app"
-	$(MAKE) build.ios APP_NAME=$(APP_NAME) APP_OUTPUT_DIR=$(OUTPUT_DIR)/$(APP_NAME)
 
 # copy js files from gnoboard to the new app
 copy-js-files:
 	@echo "Copying js files"
 	@cp $(expo_dir)/example/App.tsx $(OUTPUT_DIR)/$(APP_NAME)/App.tsx
 
-.PHONY: new-app configure-npm new-react-native-app copy-js-files
+.PHONY: new-app configure-npm new-expo-app copy-js-files

examples/js/expo/hello/.gitignore

@@ -0,0 +1,39 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# native folders
+android/
+ios/
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

examples/js/expo/hello/App.tsx

@@ -0,0 +1,65 @@
+import { GnoNativeProvider, useGnoNativeContext } from '@gnolang/gnonative';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+const config = {
+  remote: 'https://gno.berty.io',
+  chain_id: 'dev',
+};
+
+export default function App() {
+  return (
+    <GnoNativeProvider config={config}>
+      <InnerApp />
+    </GnoNativeProvider>
+  );
+}
+
+const InnerApp = () => {
+  const { gnonative } = useGnoNativeContext();
+  const [greeting, setGreeting] = useState('');
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const accounts = await gnonative.listKeyInfo();
+        console.log(accounts);
+
+        const remote = await gnonative.getRemote();
+        const chainId = await gnonative.getChainID();
+        console.log('Remote %s ChainId %s', remote, chainId);
+
+        const phrase = await gnonative.generateRecoveryPhrase();
+        const address = await gnonative.addressFromMnemonic(phrase);
+        const addressStr = await gnonative.addressToBech32(address);
+
+        console.log('Phrase:', phrase);
+        console.log('Address:', addressStr);
+
+        setGreeting(await gnonative.hello('Gno'));
+
+        for await (const res of await gnonative.helloStream('Gno')) {
+          console.log(res.greeting);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+    })();
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Text>Gnonative App</Text>
+      <Text>{greeting}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

examples/js/expo/hello/app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "hello",
+    "slug": "hello",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "land.gno.hello"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "land.gno.hello"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

examples/js/react-native/hello/assets/adaptive-icon.png renamed to examples/js/expo/hello/assets/adaptive-icon.png

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