App stops executing next lines of code after network requests

[ibrahimelaradi]

What's going on?

I'm waiting for network requests to finish before change the state of the app using mobx actions, I'm using generator functions as described in here

Here's a screenshot of logs from Reactotron, there should be a log after the API response that shows the state change

Action:

.actions((self) => ({
  // ...
  signIn: flow(function* (form: CustomerSigninForm) {
    const api = self.environment.apis.guest
    const signinResult = yield api.signinAsCustomer(form) // <= code stops executing here

    // state change (saving token, fetching user details, etc

  }),
  // ...
}))

API method:

export class GuestApi extends Api {
  // client config, other methods
  async signinAsCustomer(form: CustomerSigninForm): Promise<SigninCustomerResult> {
    const url = this.base + "/integration/customer/token"
    const params = mapToCustomerSigninRequest(form)
    const response = await this.apisauce.post<string>(url, params) // <-- Code lines after this line don't execute
    if (!response.ok) {
      return getGeneralApiProblem(response) || { kind: "bad-data" }
    }
    return { kind: "ok", token: response.data }
  }
}

I'm experiencing this issue with both Android and iOS, however on Android, if I turn off DEV from cmd + M > Settings and reload the app it works perfectly fine

I tried running it with minification enabled and the issue still persists, am I doing something wrong?

---

Steps to reproduce

Will create a reproduction repo if no one has faced this issue before

---

npx ignite-cli doctor results:

[markrickert]

Hey @ibrahimelaradi, sorry youre experiencing this. Is your component that is observing the mobx properties wrapped in the observer() function from mobx-react-lite?

For example, this won't update:

const MyComponent = () => {
  const stores = useStores();
  return (
    <Text>{stores.someStore.observedValue}</Text>
  )
}

...but this WILL:

const MyComponent = observer(() => {
  const stores = useStores();
  return (
    <Text>{stores.someStore.observedValue}</Text>
  )
})

[ibrahimelaradi]

Hey @markrickert, all the files I'm using are generated using the CLI and they are by default wrapped inside of observer(), also it is worth mentioning that I've tried looking at the state tab of Reactotron and no state change has been recorded after receiving the network response

[carlosa54]

Hi @ibrahimelaradi out of curiosity can you remove/comment out the <ToggleStorybook> component in app.tsx and see if it works?

ignite/boilerplate/app/app.tsx

Lines 58 to 69 in 10efc38

	<ToggleStorybook>
	<RootStoreProvider value={rootStore}>
	<SafeAreaProvider initialMetrics={initialWindowMetrics}>
	<ErrorBoundary catchErrors={"always"}>
	<AppNavigator
	initialState={initialNavigationState}
	onStateChange={onNavigationStateChange}
	/>
	</ErrorBoundary>
	</SafeAreaProvider>
	</RootStoreProvider>
	</ToggleStorybook>

Just in case I had a similar issue and I ended up fixing it by refactoring the file below to use ES6 import instead

ignite/boilerplate/storybook/toggle-storybook.tsx

Line 48 in 10efc38

setStorybookUIRoot(() => require("./storybook").StorybookUIRoot)

[ibrahimelaradi]

Hello @carlosa54, I commented out the wrapper and it worked fine, I'll refactor toggle-storybook.tsx to use ES6 import
Thank you!

[infinitered-circleci]

🎉 This issue has been resolved in version 7.10.6 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀