From b3e9b7034142546c8ba6b4ad116af5f4bd79f683 Mon Sep 17 00:00:00 2001 From: Cameron Franz Date: Thu, 10 Oct 2019 15:22:21 -0400 Subject: [PATCH] react-native example app port (#223) * add readme * react-native example app * update readme * add ios-cli dep * revert package.json change * update readme * update readme * don't auto launch metro * add react native scripts * nohoist @react-native-community/** * update readme * undo wrong README change * remove react-native root dep * copyright headers * semi-style * add default gitignore * finish linting * remove test for now * fix typescript errors * fix linting * update scripts * update deps and version * update readme * remove accidental dep * update readme * bump deps * update yarn.lock * actually update yarn.lock * fix yarn.lock conflicts by updating exampleReactNative deps --- package.json | 3 + packages/exampleReactNative/.gitignore | 64 ++ packages/exampleReactNative/App.tsx | 153 +++ packages/exampleReactNative/README.md | 29 + packages/exampleReactNative/android/app/_BUCK | 55 ++ .../android/app/build.gradle | 201 ++++ .../android/app/build_defs.bzl | 19 + .../android/app/debug.keystore | Bin 0 -> 2257 bytes .../android/app/proguard-rules.pro | 10 + .../android/app/src/debug/AndroidManifest.xml | 8 + .../android/app/src/main/AndroidManifest.xml | 26 + .../com/examplereactnative/MainActivity.java | 15 + .../examplereactnative/MainApplication.java | 74 ++ .../src/main/res/mipmap-hdpi/ic_launcher.png | Bin 0 -> 3056 bytes .../res/mipmap-hdpi/ic_launcher_round.png | Bin 0 -> 5024 bytes .../src/main/res/mipmap-mdpi/ic_launcher.png | Bin 0 -> 2096 bytes .../res/mipmap-mdpi/ic_launcher_round.png | Bin 0 -> 2858 bytes .../src/main/res/mipmap-xhdpi/ic_launcher.png | Bin 0 -> 4569 bytes .../res/mipmap-xhdpi/ic_launcher_round.png | Bin 0 -> 7098 bytes .../main/res/mipmap-xxhdpi/ic_launcher.png | Bin 0 -> 6464 bytes .../res/mipmap-xxhdpi/ic_launcher_round.png | Bin 0 -> 10676 bytes .../main/res/mipmap-xxxhdpi/ic_launcher.png | Bin 0 -> 9250 bytes .../res/mipmap-xxxhdpi/ic_launcher_round.png | Bin 0 -> 15523 bytes .../app/src/main/res/values/strings.xml | 3 + .../app/src/main/res/values/styles.xml | 9 + .../exampleReactNative/android/build.gradle | 38 + .../android/gradle.properties | 21 + .../android/gradle/wrapper/gradle-wrapper.jar | Bin 0 -> 55616 bytes .../gradle/wrapper/gradle-wrapper.properties | 5 + packages/exampleReactNative/android/gradlew | 188 ++++ .../exampleReactNative/android/gradlew.bat | 100 ++ .../android/settings.gradle | 5 + packages/exampleReactNative/app.json | 4 + packages/exampleReactNative/babel.config.js | 3 + packages/exampleReactNative/index.js | 11 + packages/exampleReactNative/ios/Podfile | 54 + .../ios/exampleReactNative-tvOS/Info.plist | 53 + .../exampleReactNative-tvOSTests/Info.plist | 24 + .../project.pbxproj | 923 ++++++++++++++++++ .../exampleReactNative-tvOS.xcscheme | 129 +++ .../xcschemes/exampleReactNative.xcscheme | 129 +++ .../contents.xcworkspacedata | 10 + .../ios/exampleReactNative/AppDelegate.h | 15 + .../ios/exampleReactNative/AppDelegate.m | 42 + .../Base.lproj/LaunchScreen.xib | 42 + .../AppIcon.appiconset/Contents.json | 38 + .../Images.xcassets/Contents.json | 6 + .../ios/exampleReactNative/Info.plist | 57 ++ .../ios/exampleReactNative/main.m | 16 + .../ios/exampleReactNativeTests/Info.plist | 24 + .../exampleReactNativeTests.m | 72 ++ packages/exampleReactNative/metro.config.js | 37 + .../exampleReactNative/nodeGlobalsShim.js | 45 + packages/exampleReactNative/package.json | 65 ++ tsconfig.json | 5 +- yarn.lock | 119 ++- 56 files changed, 2945 insertions(+), 4 deletions(-) create mode 100755 packages/exampleReactNative/.gitignore create mode 100644 packages/exampleReactNative/App.tsx create mode 100644 packages/exampleReactNative/README.md create mode 100755 packages/exampleReactNative/android/app/_BUCK create mode 100755 packages/exampleReactNative/android/app/build.gradle create mode 100644 packages/exampleReactNative/android/app/build_defs.bzl create mode 100644 packages/exampleReactNative/android/app/debug.keystore create mode 100644 packages/exampleReactNative/android/app/proguard-rules.pro create mode 100644 packages/exampleReactNative/android/app/src/debug/AndroidManifest.xml create mode 100755 packages/exampleReactNative/android/app/src/main/AndroidManifest.xml create mode 100644 packages/exampleReactNative/android/app/src/main/java/com/examplereactnative/MainActivity.java create mode 100644 packages/exampleReactNative/android/app/src/main/java/com/examplereactnative/MainApplication.java create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-hdpi/ic_launcher.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-mdpi/ic_launcher.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png create mode 100644 packages/exampleReactNative/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png create mode 100755 packages/exampleReactNative/android/app/src/main/res/values/strings.xml create mode 100644 packages/exampleReactNative/android/app/src/main/res/values/styles.xml create mode 100644 packages/exampleReactNative/android/build.gradle create mode 100644 packages/exampleReactNative/android/gradle.properties create mode 100644 packages/exampleReactNative/android/gradle/wrapper/gradle-wrapper.jar create mode 100644 packages/exampleReactNative/android/gradle/wrapper/gradle-wrapper.properties create mode 100755 packages/exampleReactNative/android/gradlew create mode 100644 packages/exampleReactNative/android/gradlew.bat create mode 100755 packages/exampleReactNative/android/settings.gradle create mode 100644 packages/exampleReactNative/app.json create mode 100644 packages/exampleReactNative/babel.config.js create mode 100644 packages/exampleReactNative/index.js create mode 100644 packages/exampleReactNative/ios/Podfile create mode 100644 packages/exampleReactNative/ios/exampleReactNative-tvOS/Info.plist create mode 100644 packages/exampleReactNative/ios/exampleReactNative-tvOSTests/Info.plist create mode 100644 packages/exampleReactNative/ios/exampleReactNative.xcodeproj/project.pbxproj create mode 100644 packages/exampleReactNative/ios/exampleReactNative.xcodeproj/xcshareddata/xcschemes/exampleReactNative-tvOS.xcscheme create mode 100644 packages/exampleReactNative/ios/exampleReactNative.xcodeproj/xcshareddata/xcschemes/exampleReactNative.xcscheme create mode 100644 packages/exampleReactNative/ios/exampleReactNative.xcworkspace/contents.xcworkspacedata create mode 100644 packages/exampleReactNative/ios/exampleReactNative/AppDelegate.h create mode 100644 packages/exampleReactNative/ios/exampleReactNative/AppDelegate.m create mode 100644 packages/exampleReactNative/ios/exampleReactNative/Base.lproj/LaunchScreen.xib create mode 100644 packages/exampleReactNative/ios/exampleReactNative/Images.xcassets/AppIcon.appiconset/Contents.json create mode 100644 packages/exampleReactNative/ios/exampleReactNative/Images.xcassets/Contents.json create mode 100644 packages/exampleReactNative/ios/exampleReactNative/Info.plist create mode 100644 packages/exampleReactNative/ios/exampleReactNative/main.m create mode 100644 packages/exampleReactNative/ios/exampleReactNativeTests/Info.plist create mode 100644 packages/exampleReactNative/ios/exampleReactNativeTests/exampleReactNativeTests.m create mode 100644 packages/exampleReactNative/metro.config.js create mode 100644 packages/exampleReactNative/nodeGlobalsShim.js create mode 100644 packages/exampleReactNative/package.json diff --git a/package.json b/package.json index 922d68a6..c994d8d8 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,9 @@ "clean": "polkadot-dev-clean-build", "demo:identicon:react": "yarn build:ts && webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 8080", "demo:identicon:vue": "yarn build:ts && webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 8080", + "example:rn:packager": "yarn build:split:code && cd packages/exampleReactNative && yarn copy-workspace-packages && yarn start", + "example:rn:ios": "cd packages/exampleReactNative && cd ios && pod install && cd .. && yarn ios", + "example:rn:android": "cd packages/exampleReactNative && yarn android", "example:react": "yarn build:ts && cd packages/example-react && webpack --config webpack.config.js", "example:vue": "yarn build:ts && cd packages/example-vue && webpack --config webpack.config.js", "postinstall": "polkadot-dev-yarn-only", diff --git a/packages/exampleReactNative/.gitignore b/packages/exampleReactNative/.gitignore new file mode 100755 index 00000000..aadce1a1 --- /dev/null +++ b/packages/exampleReactNative/.gitignore @@ -0,0 +1,64 @@ +# OSX +# +.DS_Store + +# Xcode +# +build/ +*.pbxuser +!default.pbxuser +*.mode1v3 +!default.mode1v3 +*.mode2v3 +!default.mode2v3 +*.perspectivev3 +!default.perspectivev3 +xcuserdata +*.xccheckout +*.moved-aside +DerivedData +*.hmap +*.ipa +*.xcuserstate +project.xcworkspace + +# Android/IntelliJ +# +build/ +.idea +.gradle +local.properties +*.iml + +# Visual Studio Code +# +.vscode/ + +# node.js +# +node_modules/ +npm-debug.log +yarn-error.log + +# BUCK +buck-out/ +\.buckd/ +*.keystore +!debug.keystore + +# fastlane +# +# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the +# screenshots whenever they are needed. +# For more information about the recommended setup visit: +# https://docs.fastlane.tools/best-practices/source-control/ + +*/fastlane/report.xml +*/fastlane/Preview.html +*/fastlane/screenshots + +# Bundle artifact +*.jsbundle + +# CocoaPods +/ios/Pods/ diff --git a/packages/exampleReactNative/App.tsx b/packages/exampleReactNative/App.tsx new file mode 100644 index 00000000..58add3d4 --- /dev/null +++ b/packages/exampleReactNative/App.tsx @@ -0,0 +1,153 @@ +// Copyright 2017-2019 @polkadot/example-react authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import React, { useEffect, useState } from 'react'; +import { + SafeAreaView, + StyleSheet, + ScrollView, + View, + Text, + StatusBar, + Button +} from 'react-native'; + +import { + Colors +} from 'react-native/Libraries/NewAppScreen'; + +import Identicon from '@polkadot/reactnative-identicon'; +import settings from '@polkadot/ui-settings'; +import { mnemonicGenerate, cryptoWaitReady } from '@polkadot/util-crypto'; +import keyring from '@polkadot/ui-keyring'; + +const styles = StyleSheet.create({ + scrollView: { + backgroundColor: Colors.lighter + }, + body: { + backgroundColor: Colors.white + }, + sectionContainer: { + marginTop: 32, + paddingHorizontal: 24 + }, + sectionTitle: { + fontSize: 24, + fontWeight: '600', + color: Colors.black + }, + mainTitle: { + fontSize: 28, + fontWeight: '600', + color: Colors.black + }, + sectionDescription: { + marginTop: 8, + fontSize: 18, + fontWeight: '400', + color: Colors.dark + }, + buttonContainer: { + flex: 1, + flexDirection: 'column', + alignItems: 'flex-start' + } +}); + +const globalAny: any = global; + +const App = () => { + const [ready, setReady] = useState(false); + const [address, setAddress] = useState(null); + const [phrase, setPhrase] = useState(null); + const [ss58Format, setSS58Format] = useState(42); + + const _onClickNew = (): void => { + const phrase = mnemonicGenerate(12); + const { address } = keyring.createFromUri(phrase); + + setAddress(keyring.encodeAddress(address, ss58Format)); + setPhrase(phrase); + }; + + const _onChangeSS58Format = (value: string): void => { + setSS58Format(parseInt(value, 10)); + }; + + useEffect((): void => { + ready && _onClickNew(); + }, []); + + useEffect((): void => { + ready && address && setAddress(keyring.encodeAddress(address, ss58Format)); + }, [address, ss58Format]); + + const initialize = async (): Promise => { + try { + keyring.loadAll({ ss58Format: 42, type: 'sr25519' }); + } catch (e) { + console.log('Error loading keyring ', e); + } + await globalAny.localStorage.init(); + await cryptoWaitReady(); + setReady(true); + _onClickNew(); + }; + + if (!ready) { + initialize(); + } + + if (!ready || !address || !phrase) { + return null; + } + + return ( + <> + + + + + + React-Native Example + + + + + + Phrase + + {phrase} + + + + Icons + + + + Address + {address} + + + SS58 Format + + {settings.availablePrefixes + .filter((_, index): boolean => index !== 0) + .map(({ text, value }): React.ReactNode => ( +