Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lightning Talk - (Try to) Avoid React Native de...

Lightning Talk - (Try to) Avoid React Native development being a nightmare

Lightning Talk at 06/02/2018 for (www.cejs.com.br).

Write a React Native code and run it perfectly on both iOS and Android sometimes can be a hard task. Various problems, including weird ones, can happen. In this talk, I will show you some of the crazy problems I faced when building React Native apps. I will also show some techniques I use to minimize my headaches and increase my sleeping.

Franzé Jr.

June 06, 2018
Tweet

More Decks by Franzé Jr.

Other Decks in Programming

Transcript

  1. We do not always get what we want. Sometimes life

    presents us with surprises. — Michael Scott
  2. Sometimes React Native doesn't do what we expect. Sometimes it

    presents us with surprises. — Franzé Jr.
  3. <Tabs initialPage={Platform.OS === "ios" ? 0 : currentPage} tabBarUnderlineStyle={{ backgroundColor:

    Colors.imsa_red }} onChangeTab={tab => this.props.setImsaLiveTab(tab.i)} > {this.renderBroadcastTab()} <Tab heading="Live Scoring" textStyle={{ fontSize: 12, color: Colors.black }} activeTextStyle={{ color: Colors.black, fontSize: 12 }} activeTabStyle={{ backgroundColor: Colors.white }} tabStyle={{ backgroundColor: Colors.white }} style={{ backgroundColor: Colors.black }} > initialPage is different for Android or iOS. The error was happening only on Android.
  4. BUT

  5. iOS

  6. const iPhoneX = height === 812 || width === 812

    if (Platform.OS === 'ios') { statusBarHeight = iPhoneX ? 35 : 20 }
  7. <Image style={{ width: 100, height: 60, resizeMode: 'contain', position: 'absolute',

    bottom: Platform.OS === 'ios' ? -30 : 0, marginTop: Platform.OS === 'ios' ? 0 : 10, left: 10, zIndex: 20 }} source={{uri: image}}} /> !
  8. if (Platform.OS == "ios") { if (aspectRatio >= 0.65) {

    ... } } if (isABadSamsungDevice()) { ... }
  9. export function * getOrdersFromStore ({ payload }) { PrettierLog.log('getOrdersFromStore', {

    payload }) const { client } = payload const query = Queries.getOrdersFromStore() const { data } = yield call(client().query, query) PrettierLog.log('getOrdersFromStore data', { data }) if (data) { yield put(OrdersActions.gotOrders(data.myVendor.orders)) } else { yield put(OrdersActions.failure()) } }
  10. export function* getMyCart({ payload }) { const { client }

    = payload; try { const query = Queries.getMyCart(); const { data } = yield call(client().query, query); if (data) { yield put(ShoppingActions.updateCart(data.myCart)); } else { yield put(ShoppingActions.failure()); } } catch (err) { yield put(ShoppingActions.failure()); } }
  11. test("get my cart success", () => { const client =

    { query: () => {} }; const response = { data: { myCart: { cartItems: [ { product: { itemPrice: 100.00 } } ] } } }; const step = stepper(getMyCart({ payload: { client } })); // first step API step(); // Second step successful return const stepResponse = step(response); const data = path(["data", "myCart", "cartItems", 0], response); let itemPrice = data.product.itemPrice; expect(itemPrice).toEqual(100.00); expect(stepResponse).toEqual( put(ShoppingActions.addCartItems(response.data.myCart.cartItems)) ); });
  12. function decodeSection( section: ApiSection, questions: List<QuestionType> ): SectionType { return

    new SectionType({ id: section.id, name: section.name, content: section.content, order: section.order, questions: List( questions.filter(question => { return question.get("sectionId") === section.id; }) ), persisted: true }); }
  13. function decodeQuestion(apiQuestion: ApiQuestion): QuestionType { const questionDependency = decodeQuestionDependency( apiQuestion.question_dependency

    ); let question = new QuestionType({ id: apiQuestion.id, key: apiQuestion.key, label: apiQuestion.label, content: apiQuestion.content, type: apiQuestion.question_type, validateAs: apiQuestion.validate_as, order: apiQuestion.order, required: apiQuestion.required, placeholder: apiQuestion.placeholder, sectionId: apiQuestion.section_id, choices: decodeChoices(apiQuestion.choices), questionDependency: questionDependency, persisted: true }); return question.set("metadataFields", metadataFields); }
  14. export function * getProductsFromStore ({ payload }) { const {

    client } = payload const query = Queries.getProductsFromStore() const { data } = yield call(client().query, query) if (data.myVendor.store.products) { yield put(ProductsActions.gotFirstPage(data.myVendor.store.products)) } else { yield put(ProductsActions.failure()) } }
  15. !