Skip to content

Instantly share code, notes, and snippets.

@serjKim
Last active July 6, 2022 21:43
Show Gist options
  • Save serjKim/7f453992211637731d2f4d762c60f7a5 to your computer and use it in GitHub Desktop.
Save serjKim/7f453992211637731d2f4d762c60f7a5 to your computer and use it in GitHub Desktop.
integrate expo to the existing project
  1. add app.json, set the newest sdkVersion
{
  "name": "<yourname>",
  "displayName": "<yourname>",
  "expo": {
    "sdkVersion": "25.0.0"
  }
}
  1. add to package.json, something:
"react-native": "https://github.com/expo/react-native/archive/sdk-25.0.0.tar.gz" // according to package.json's sdkVersion
  1. add to index.ts:
import { KeepAwake, registerRootComponent } from 'expo';
import { App } from './app';

if (__DEV__) {
  KeepAwake.activate();
}

registerRootComponent(App);
  1. add to app.tsx
import { Font } from 'expo';

interface AppProps {
  dispatch: Dispatch<any>;
  nav: NavigationState;
}

export class App extends Component<AppProps> {
  constructor(props: any) {
    super(props)
    this.state = {
      isFontLoaded: false
    };
  }
  public componentDidMount() {
    Font.loadAsync({
      '<customFontName>': require('../assets/fonts/<customFontName>.ttf')
    }).then(() => this.setState({ isFontLoaded: true }));
  }

  public render() {
    return (this.state as any).isFontLoaded ? <App /> : null;
  }
}
  1. npm i expo
  2. npm i exponent
  3. exp start
  4. Enjoy