6 ms·

Check out GoodOrBad - Simple Meal Logging on the stores, it’s fully React Native with some little native code (push notifications, etc.)

by i6mi6 8y ago

kylnew 8y ago
Checked this app out of curiosity. It’s decent but doesn’t feel native to me. Each platform has its own nuanced differences that we might think is okay to ignore but customers see through when the experience isn’t consistent with past expectations. The transition animations in some situations were what felt out of place to me in particular.
tzahola 8y ago
1. When the app starts, the onboarding screen appears with a flicker/glitch: https://imgur.com/IyjM82n https://imgur.com/IyjM82n 2. The app starts with a launch image (the logo in the center), which then fades away to show another launch image (with the logo on the top half of the screen): https://imgur.com/0n3Zbof https://imgur.com/0n3Zbof (probably because ReactNative must load the JS bundle before it can show anything) 3. The login screen of the application fits on the screen, yet it can be scrolled up/down for seemingly no reason. The amount you can scroll feels suspiciously close to the height of the iOS status bar: https://imgur.com/P6conGz https://imgur.com/P6conGz (probably because ReactNative sets the UIScrollView's contentInset incorrectly) 4. Text fields / buttons look like on a website. 5. When you navigate back from the login screen after a failed login, there's a brief moment while the "Unsuccessful login with Facebook" message is visible, which then quickly disappears: https://imgur.com/hTTKbIt https://imgur.com/hTTKbIt Sorry, but it feels like a webapp to me. Though it might be perfect for your use case! Update: I've found some other issues: 6. You can't interact with buttons (e.g. "Next" button on registration) while the keyboard is visible: https://imgur.com/dpy5xv8 https://imgur.com/dpy5xv8 7. The first time you switch to a tab, it's completely empty, then suddenly the content pops into place: https://imgur.com/JKaCJED https://imgur.com/JKaCJED 8. Tapping on the search button makes the content of the previous page jolt against the top of the screen while navigating to the search page: https://imgur.com/BJDYvda https://imgur.com/BJDYvda (focus on the panda) 9. The "sidebar" menu feels very out of place on iOS. Also, when you select e.g. "Settings", the content on the right does a very weird fade/slide animation: https://imgur.com/ChNzvwW https://imgur.com/ChNzvwW 10. When you switch between two non-adjacent tabs, the viewport slides over the in-between tabs too: https://imgur.com/BZFU0Sv https://imgur.com/BZFU0Sv
- i6mi6 8y ago
  I definitely agree with the fact that it feels like a web app, but this is the design the customer asked for. Most of this things are actually not a React Native problem but the way the app was made. Onto your points: 1. This can easily be fixed with a module, however time pressure didn't allow for additional "tweaks" 2. Same as 1. 3. Using Scrollview for this, since some android devices with smaller screens can make the Login screen look very ugly and small, so in that case scroll looked better. 4. Do they look like or feel like ones on a website? It is by design, but interested to see how you feel about the fields as a user (although we don't support the app anymore) 5. Caused by implementation logic
- deleted 8y ago
  [deleted]
- ctvo 8y ago
  These are implementation decisions made by the author and not ReactNative issues as far as I know. See UberEats, the former Airbnb app and others using ReactNative that can seamlessly deliver native style UX.
  - tzahola 8y ago
    1. I reviewed the app. I didn't attribute any of the issues to React Native itself, did I? 2. The Airbnb and UberEats apps were written by expert native developers (I happen to know a few of them), using some React Native. You see, expert native engineers can deliver quality apps using native frameworks. And surely, if they look into React Native, most of the time they can manipulate it from the JS side to get the desired outcome on the native side. The middleware is a hinderance for them as it gets in their way of implementing what they want in the first place. It's like building those ship models in a bottle: if you know how to build the ship, you just have to learn how to do it through the neck of the bottle. If you don't know how to build it in the first place, well... that's a different story.
  - anad7 8y ago
    You have it wrong, only the restaurant dashboard app is built using ReactNative, that was done because they had a website earlier and they wanted to convert that quickly to a tablet app and their developers who were working on that web app had very limited knowledge of iOS/Android, refer to https://eng.uber.com/ubereats-react-native/ https://eng.uber.com/ubereats-react-native/
kaseyb002 8y ago
This seems better than most cross-platform apps. I thought the text size was too small in several spots.

Check out GoodOrBad - Simple Meal Logging on the stores, it’s fully React Native with some little native code (push notifications, etc.)

by i6mi6 8y ago

Check out GoodOrBad - Simple Meal Logging on the stores, it’s fully React Native with some little native code (push notifications, etc.)

kylnew 8y ago

Checked this app out of curiosity. It’s decent but doesn’t feel native to me. Each platform has its own nuanced differences that we might think is okay to ignore but customers see through when the experience isn’t consistent with past expectations. The transition animations in some situations were what felt out of place to me in particular.

tzahola 8y ago

1. When the app starts, the onboarding screen appears with a flicker/glitch: https://imgur.com/IyjM82n https://imgur.com/IyjM82n 2. The app starts with a launch image (the logo in the center), which then fades away to show another launch image (with the logo on the top half of the screen): https://imgur.com/0n3Zbof https://imgur.com/0n3Zbof (probably because ReactNative must load the JS bundle before it can show anything) 3. The login screen of the application fits on the screen, yet it can be scrolled up/down for seemingly no reason. The amount you can scroll feels suspiciously close to the height of the iOS status bar: https://imgur.com/P6conGz https://imgur.com/P6conGz (probably because ReactNative sets the UIScrollView's contentInset incorrectly) 4. Text fields / buttons look like on a website. 5. When you navigate back from the login screen after a failed login, there's a brief moment while the "Unsuccessful login with Facebook" message is visible, which then quickly disappears: https://imgur.com/hTTKbIt https://imgur.com/hTTKbIt Sorry, but it feels like a webapp to me. Though it might be perfect for your use case! Update: I've found some other issues: 6. You can't interact with buttons (e.g. "Next" button on registration) while the keyboard is visible: https://imgur.com/dpy5xv8 https://imgur.com/dpy5xv8 7. The first time you switch to a tab, it's completely empty, then suddenly the content pops into place: https://imgur.com/JKaCJED https://imgur.com/JKaCJED 8. Tapping on the search button makes the content of the previous page jolt against the top of the screen while navigating to the search page: https://imgur.com/BJDYvda https://imgur.com/BJDYvda (focus on the panda) 9. The "sidebar" menu feels very out of place on iOS. Also, when you select e.g. "Settings", the content on the right does a very weird fade/slide animation: https://imgur.com/ChNzvwW https://imgur.com/ChNzvwW 10. When you switch between two non-adjacent tabs, the viewport slides over the in-between tabs too: https://imgur.com/BZFU0Sv https://imgur.com/BZFU0Sv

i6mi6 8y ago
I definitely agree with the fact that it feels like a web app, but this is the design the customer asked for. Most of this things are actually not a React Native problem but the way the app was made. Onto your points: 1. This can easily be fixed with a module, however time pressure didn't allow for additional "tweaks" 2. Same as 1. 3. Using Scrollview for this, since some android devices with smaller screens can make the Login screen look very ugly and small, so in that case scroll looked better. 4. Do they look like or feel like ones on a website? It is by design, but interested to see how you feel about the fields as a user (although we don't support the app anymore) 5. Caused by implementation logic
deleted 8y ago
[deleted]
ctvo 8y ago
These are implementation decisions made by the author and not ReactNative issues as far as I know. See UberEats, the former Airbnb app and others using ReactNative that can seamlessly deliver native style UX.
- tzahola 8y ago
  1. I reviewed the app. I didn't attribute any of the issues to React Native itself, did I? 2. The Airbnb and UberEats apps were written by expert native developers (I happen to know a few of them), using some React Native. You see, expert native engineers can deliver quality apps using native frameworks. And surely, if they look into React Native, most of the time they can manipulate it from the JS side to get the desired outcome on the native side. The middleware is a hinderance for them as it gets in their way of implementing what they want in the first place. It's like building those ship models in a bottle: if you know how to build the ship, you just have to learn how to do it through the neck of the bottle. If you don't know how to build it in the first place, well... that's a different story.
- anad7 8y ago
  You have it wrong, only the restaurant dashboard app is built using ReactNative, that was done because they had a website earlier and they wanted to convert that quickly to a tablet app and their developers who were working on that web app had very limited knowledge of iOS/Android, refer to https://eng.uber.com/ubereats-react-native/ https://eng.uber.com/ubereats-react-native/

kaseyb002 8y ago

This seems better than most cross-platform apps. I thought the text size was too small in several spots.