React Viro 備忘録

# React Viro 備忘録 (iOS)

Viro Reactを使ってReact NativeでARのデモを動かしてみる。
もしリポジトリみたい方がいたらコメントください。汚いんでまだpublicにはしてないです。

汚いオフィスですみません。
![https://i.gyazo.com/ba19a43d5377f27042f0d074fbaa8f6a.gif](https://i.gyazo.com/ba19a43d5377f27042f0d074fbaa8f6a.gif)




## Refs
https://docs.viromedia.com/docs/tutorial-ar

## Environment
Xcode: 10.0.0
react-native: 0.57.3(もしかしたら56に後で下げるかも)
react: 16.6.0
react-viro: 2.11.0

## Steps
#### 1. 空のRNプロジェクトを作って走らせる
https://facebook.github.io/react-native/docs/getting-started.html
![Screen Shot 2018-10-23 at 12.49.41.png](https://qiita-image-store.s3.amazonaws.com/0/145134/973d2633-791a-a5bf-1e8a-43f45555ee1c.png)



#### 2. 実機で空のプロジェクトを動かす
https://facebook.github.io/react-native/docs/running-on-device
![IMG_0117.JPG](https://qiita-image-store.s3.amazonaws.com/0/145134/5a805c2e-11c8-f9e8-b594-0502bd8bcacb.jpeg)



#### 3. `yarn add react-viro` して、 `App.js`に追加してみる


```javascript
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

import {
  ViroARScene,
  ViroText,
  ViroConstants,
} from 'react-viro';

```

:warning: エラーが出た :warning: 

``` 
Loading dependency graph, done.
error: bundling failed: Error: Unable to resolve module `react-native/Libraries/StyleSheet/normalizeColor` from
```

これみて直した
https://github.com/viromedia/viro/issues/412#issuecomment-422481825

つまり `package.json`を

``` javascript
"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "fixReactViro": "find ./node_modules/react-viro/components -type f -exec sed -i '' 's#^import normalizeColor from \"react-native/Libraries/StyleSheet/normalizeColor\"#// import normalizeColor from \"react-native/Libraries/StyleSheet/normalizeColor\"#g' {} \\;",
    "postinstall": "yarn run fixReactViro"
  },
```

こうして

```
$ rm -rf node_modules/
$ yarn
```

で赤画面はなくなった。

...

#### 4. 何も考えずにコピペ

```javascript

export default class App extends Component<Props> {
  constructor(props) {
    super(props);

    this.state = {
      text : "Initializing AR..."
    };

    this.onInitialized = (state, reason) => {
      if (state == ViroConstants.TRACKING_NORMAL) {
      this.setState({
        text : "Hello World!"
      });
      } else if (state == ViroConstants.TRACKING_NONE) {
        // Handle loss of tracking
      }
    }
  }
  render() {
    const { text } = this.state;
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
        <Text>{text}</Text>
        <ViroARScene onTrackingUpdated={this.onInitialized} >
          <ViroText
            text={this.state.text}
            scale={[.5, .5, .5]}
            position={[0, 0, -1]}
            style={styles.helloWorldTextStyle} />
        </ViroARScene>
      </View>
    );
  }
}

```

見事に赤画面
![Screen Shot 2018-10-23 at 14.06.30.png](https://qiita-image-store.s3.amazonaws.com/0/145134/e75affe3-f1a2-eaf4-133c-51f379c18775.png)

Issueはあったけど、Androidだった
https://github.com/viromedia/viro/issues/298
https://github.com/viromedia/viro/issues/177

そもそも、Set up Xcode with ViroReactをちゃんと読んでなかった。

https://docs.viromedia.com/docs/starting-a-new-viro-project-1

大人しく　`npm install -g react-viro-cli` して　`react-viro init ViroSample --verbose` すればよかったのかなと思いつつ
https://docs.viromedia.com/docs/quick-start

頑張って自力でやってみる

##### 4-1. `setup-ide.sh` をプロジェクトルートに配置

```shell

#!/usr/bin/env bash

#
# Copyright © 2017 Viro Media. All rights reserved.
#

SETUP_ANDROID_STUDIO=false
SETUP_XCODE=false

printHelp() {
  printf "\n  ================== setup-ide.sh =================
  This script sets up IDEs based on the the following arguments:
    --all        - sets up all IDEs we support
    --android    - sets up Android Studio
    --ios        - sets up XCode\n"
}

case $1 in
  all|--all)
    SETUP_XCODE=true
    SETUP_ANDROID_STUDIO=true
  ;;
  android|--android)
    SETUP_ANDROID_STUDIO=true
  ;;
  ios|--ios)
    SETUP_XCODE=true
  ;;
  help|-h|--help)
    printHelp
    exit 0
  ;;
  *)
    printf "\nUnknown arguments provided! See help\n"
    printHelp
    exit 1
  ;;
esac

if [ ! -f package.json ]; then
  printf "== ERROR ==\n"
  printf "Unable to find the file [package.json]. Please run this within your project's root.\n"
  exit 1
fi

# Find the project's name, it should appear like this: "name" : "ProjectName".
# TODO: use a JSON parser and/or prompt the user if it's correct, also maybe accept a name args.
PROJECT_NAME=$(grep name package.json | cut -d '"' -f 4 | head -1)

if [ ! -d ./node_modules/react-viro ]; then
  printf "== ERROR ==\n"
  printf "Unable to find the react-viro module (under node_modules). Have you run npm install?\n"
  exit 1
fi

if $SETUP_ANDROID_STUDIO; then
  ./node_modules/react-viro/bin/android-setup.sh $PROJECT_NAME true
fi

if $SETUP_XCODE; then
  ./node_modules/react-viro/bin/ios-setup.sh $PROJECT_NAME true
fi


```

実行

```shell
$ chmod 755 setup-ide.sh
$ ./setup-ide.sh
```

いい感じに `~~~.xcworkspace`のファイルが出来るはず

##### 4-2. シミュレーターでのビルドに対応していない件
https://github.com/viromedia/viro/issues/19
> Hi @leocavalcante , ahhh, I reproduced the issue. The issue is we don't support the software simulator. Where it says iphone 7 plus above, you'll need to change the target to an actual physical device.

は？？？

##### 4-3. 実機ビルドしてもまだビルドできない
https://github.com/viromedia/viro/issues/19#issuecomment-309833261
> clang: error: linker command failed with exit code 1 (use -v to see invocation)

これすればいいらしい
> Aha! Did it by setting Enable bitcode to No.

これ
https://stackoverflow.com/questions/31205133/how-to-enable-bitcode-in-xcode-7

##### 4-4. linker errorをごにょごにょして直す

GVRSDKをごにょごにょする（これはpost scriptにまとめたい。。。）
https://github.com/viromedia/viro/issues/181#issuecomment-372773008

やっとビルドが通った。。。
![IMG_0118.jpg](https://qiita-image-store.s3.amazonaws.com/0/145134/14a4bfc2-957e-1c38-4e3b-64246ecaa125.jpeg)

でも空っぽプロジェクトのまま。こっから何かデモを動かす。

##### 5. Initializing AR ...

で止まる
![IMG_0119.JPG](https://qiita-image-store.s3.amazonaws.com/0/145134/53dddd55-903c-ac28-0268-ea05e639ae85.jpeg)

そりゃそうだ。化石のiPhone 6では動かなかった。
手元にあったiPadで試したら動いた。
<img width="563" alt="Screen Shot 2018-10-23 at 16.08.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/145134/8a123572-12e4-3167-3cf5-9732a2e9e181.png">



![https://i.gyazo.com/ba19a43d5377f27042f0d074fbaa8f6a.gif](https://i.gyazo.com/ba19a43d5377f27042f0d074fbaa8f6a.gif)

オフィス、掃除しなきゃ。。。

続く？