좌충우돌 개발 블로그

앱에서 현재 화면이 어떤 방향에 알아낼 필요가 있어

Dimensions 의 width, height 값으로 방향을 알아내 화면이 전환을 적용하고 있었다.

잘 사용하고 있었는데 React Native 0.63.0 으로 버전업을 하면서 원하는 대로 동작하지 않았다.

깃헙 이슈에서 찾아보니 버그로 안드로이드에서만 제대로된 값을 못가져오고 있었다.

0.63.3에서도 아직 해당 버그가 수정되지 않아 0.62 버전으로 앱을 만들어 사용하고 있다.

참고 문헌

1. reactnative.dev/docs/dimensions
2. github.com/facebook/react-native/issues/29323

React Native 업데이트를 한 후에 가끔 앱 실행이 안되는 경우가 있었다.

이럴 때 캐시를 리셋하면 대부분 제대로 동작을 한다.

$ npx react-native start --reset-cache

그럼에도 안드로이드에서 실행이 안되는 경우에는 클린을 해주면 된다.

$ ./gradlew clean

참고문헌

1. github.com/facebook/react-native/issues/29876#issuecomment-688011395

그동안 앱 개발을 하면서 Android 9 기기로만 테스트를 해왔다.

그러다 다른 문제가 생겨서 다른 기기에 테스트를 하려고 했는데 앱이 실행되지 않았다.

갤럭시 S3 였는데 기존에는 잘 구동되던 것이 React Native 0.63 으로 올리면서 문제가 생긴 것 같았다.

그래서 adb 로 무엇이 문제인지 봤지만 알 수 없었다.

구글링을 해보니 같은 이유로 안되는 경우를 찾을 수 있었고 방법대로 해봤다.

MainApplication.java에 다음을 추가하여 구동해보니 잘 되는 것을 확인할 수 있었다.

@Override 
protected void attachBaseContext(Context base) {
    super.attachBaseContext(base);
    MultiDex.install(this);
}

참고 문헌

1. github.com/firebase/quickstart-android/issues/105#issuecomment-449877090

React Native 버전을 0.59에서 0.61로 업데이트하면서 Hermes를 사용해보기로 했다.

Hermes 설정을 완료하고 앱을 구동했으나 다음과 같은 에러가 발생했다.

RangeError: Maximum call stack size exceeded, js engine:hermes

릴리스 버전으로 빌드를 시도해봤지만 메모리 문제로 빌드가 되지 않았다.

gradle emitting JVM memory status event {Maximum: 1431830528, Committed: 434634752}

이유가 무엇인지 찾아보니 앱에서 JSON 파일을 사용하고 있었는데 이 파일이 너무 커서 생긴 문제였다.

이 문제를 해결하기 위해 Hermes를 안쓰고 해봤지만 앱 사이즈가 0.59 일 때보다 커졌다.

그래서 Hermes를 쓰면서 동작하게 할 수 있는 방법을 찾다가 SQLite를 사용하기로 했다.

여러 라이브러리가 있지만 react-native-sqlite-storage를 이용했다.

android/src/main/assets/data 로 디렉토리를 만들고 파일을 넣는다.

다음과 같이 하면 만든 DB 파일에 쉽게 접근할 수 있었다.

import SQLite from 'react-native-sqlite-storage';

class App extends Component {
  constructor() {
    super();
    const db = SQLite.openDatabase({
      name: 'test.db',
      location: 'deault',
      createFromLocation: '~data/test.db'
    },
    () => {},
    error => console.log(err));

    this.state = {
      db,
      data: []
    }
  }

  componentWillUnmount() {
    const { db } = this.state;
    db.close();
  }

  componentDidMount() {
    const { db } = this.state;

    db.transaction(tx => {
      tx.executeSql('SELECT * FROM test;', [], (tx, results) => {
        const rows = results.rows;
        const data = rows.raw().map(v => v);

        this.setState({ data });
      });
    });
  }

  ...
}

$  npm install react-native-sqlite-storage

하지만 위와 같이 설치하면 되는데 막상 구동시켜보면 아래와 같은 에러가 나왔다.

java.lang.NoSuchMethodError: No interface method pushMap

다음과 같이 패치가 된 것을 설치하면 더이상 java.lang.NoSuchMethodError는 나오지 않았다.

$ npm install react-native-sqlite-storage@andpor/react-native-sqlite-storage#pull/405/head

참고 문헌

1. https://github.com/facebook/hermes/issues/135

2. https://dev-yakuza.github.io/ko/react-native/react-native-sqlite-storage/

3. https://github.com/andpor/react-native-sqlite-storage

4. https://github.com/andpor/react-native-sqlite-storage/issues/387#issuecomment-575307816