What are /r/reactnative's favorite Products & Services?

From 3.5 billion Reddit comments

" We are pleased by the community's efforts that make the Facebook SDK for React Native a success. We believe the community is well equipped to address developer needs going forward. Note that our support for React Native continues and is not affected by this. "

Original: https://dribbble.com/shots/5073929-Dribbble

I only started last night, working on the tab bar now. If anyone is interested I'll post the source when I'm done.

Maybe React Native official blog can help? https://reactnative.dev/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native

Yeah, you could use AppState to listen to the app `background` event and dispatch your redux action to clear everything from the redux state. Hopefully you have your `initialState` already saved as a variable that's easy to import and use.

Make sure you `remove()` the listener on your `useEffect` callback. This is to avoid memory leaks of your app and unnecessary listens when the app is backgrounded anyways.

There are some examples on the docs I linked that show you how to use it.

it's not completely necessary as they share pretty much everything. there are still concepts which you will have to return to the normal react documentation for such as state, props, etc... this should provide more info on the differences between the libraries, good luck!

We had some issue with this happening in production in our app. It was even more painful for our users because the devices they use are heavily locked down with MDM software, to the point to where they can't use most hardware buttons. We found these white screens to be caused by unhandled errors that arise during a rendering cycle, and error boundaries were the fix for us. https://reactjs.org/docs/error-boundaries.html

​

I wrapped the entire app around a single error boundary that shows a friendly message to the user, records the occurrence in our error reporting dashboard, and forcefully remounts the root app component to simulate a restart. It's a rather crude solution, but it works, and it's a far cry better than forcing the user to call tech support to have their device reset. The nice thing about how error boundaries work is that we can put narrower error boundaries further down the component tree if we ever need something more granular.

You’ve got two options here: 1. Pure code: this would be amazing. No assets, all the flexibility. Here’s an example on Codepen which you can maybe bend to work in RN: codepen waves example. It uses absolute positioning and transforms—both available in RN. 2. Create an SVG using any vector app (Sketch, Illustrator, Figma). But in order to do this you need to be comfortable with the pen tool, which can have a steep learning curve. The SVG can then be animated in RN, which puts the icing on the cake.

Share some screen recordings when it’s working, looking forward to see it.

I just made it using vector art using a free site called vectr. You can sign up at vectr.com.

Here are links to a png and svg version that I made. It's not perfect but I only spent 10 mins. Look into learning how to draw vector art.

https://vectr.com/krabzero/bRAXyujdL.svg?width=1080&height=1920&select=bRAXyujdLpage0

https://vectr.com/krabzero/bRAXyujdL.png?width=1080&height=1920&select=bRAXyujdLpage0

Some great advice here. I'll echo the others and guess your problem is you need to learn the React "way" and way of thinking. Conveniently, they've anticipated just such a need!

https://reactjs.org/docs/thinking-in-react.html

have you done any research? There are loads of apps in production written in RN, some big some small.
https://reactnative.dev/
Look at the examples on the homepage, there are some very big ones there.

Use AppState.

It gives you callbacks when the app goes to the background and when the app comes back from background.

The callback should just check the socket connection status and reconnect if needed.

Bitesnap, an image recognition based meal tracker

https://apps.apple.com/us/app/bitesnap-photo-food-journal/id1108291490

https://play.google.com/store/apps/details?id=ai.bite.biteapp&hl=en_US&gl=US

So as an avid side-project-maker, I get tons of ideas throughout the day, but pretty much every note-taking app I've used shoves the "New note" button in some random corner of the screen, forces you think of a title before actually writing the note, and a bunch of other small but annoying things.

So I decided to build my own note-taking app with a completely unique user experience! You simply swipe down to create a new note, type type type, then swipe up on the note to save it!
I've been using it a lot the past few days just testing it out and wow, it's game-changing haha. Since it's so much easier (and more satisfying) to create a note, I've found myself documenting my thoughts a lot more!

Hope you all enjoy the app as much as I've enjoyed making it!
Would love to get your feedback here and on Product Hunt where I just launched!

Download links are available through Product Hunt 😄

I used Expo for super-fast dev and deployment, along with Reanimated 2.0 & RN Gesture Handler for the UI interactions and animations!

Here is the source * Three.js with OBJ models * Models were made with MagicaVoxel * React Navigation, React Native for Web, and Expo GL for the bulk of the project.

I feel your pain. It's really hard to debug these things without the project in front of me. I have two thoughts:

Because it happens in release and not debug; this error is probably going to be related to the fact React native using a different JS engine in debug van release (V8 in debug, JSC or Hermes in release for Android https://reactnative.dev/docs/javascript-environment).

One big difference is the Date object. You should look for something relating to Date in your code and try and isolate it with an Error boundary.

https://reactjs.org/docs/error-boundaries.html

You can handle the didCatchError with an Alert.alert(error) and see the error in release mode.

Good luck, I'm rooting for you ✊

Hi all, I wanted to test what I can accomplish with React Native and Expo so I spent a few weekends to develop this little game. I had experience with React and Vue so it was really easy to pick up everything.

​

The game is published on Google Play if anyone wants to try:

https://play.google.com/store/apps/details?id=com.paradite.ai2048

Download Link: https://play.google.com/store/apps/details?id=com.sevtech.app.fridge

Facebook Page: https://www.facebook.com/fridgemobile/

It allows you to re-purpose your unused ingredients into sumptuous meals.

Search for recipes based on your ingredients.

This is our very first app. Hope to hear comments from you guys! ��

This was created using the managed workflow of Expo. It's simple for now, we will be adding more features as we go.

Actually using the index is not a very good idea. From the react docs

> We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key.

https://reactjs.org/docs/lists-and-keys.html#keys

Happy to answer any questions about the process or libraries used! This is a bare RN app (not Expo), but it uses some Expo libraries like IAP.

The app was the ProductHunt #1 product of the day on Feb 21: https://www.producthunt.com/posts/familiar which was a cool experience.

• The components you see are custom and not from a UI library. Let me know if anything looks intriguing and I’d love to open source some stuff!

• Had to drop down into native for a couple GIF-specific things like copying and saving on iOS.

• I used Fastlane and Codepush for deploys, and Sentry for error tracking.

• The actual face swap model is not done on device — but I’m looking forward to experimenting with Tensorflow for React Native.

Thanks!

I'd start with the React for web docs for an overview of the library and a taste of the mindset of a React developer. Then work through the React Native docs.

If you know a bit of Java and mobile development is your career goal, have you tried Android development? React Native is awesome, but Android development isn't going away, and there's a ton of jobs in it.

My initial suspicion is that the values you are using in the image style are causing Expo to crash.

React Native requires "unitless" values when using style properties like height, width, marginRight etc so I would change '25px' for 25 (notice the lack of quotes as well).

The caveat to this is that percentage values should be strings and require the percentage unit.

You can read more here

I don't use REST, and I don't use react-native-firebase. I use the firebase SDK directly in React Native (and React and NodeJS) and I am very happy with my choice.

The SDK docs are excellent, I don't have a dependency on a third party library with all the headaches that brings (see /u/waitwhatwhyyy's post), and they work dreamily well in RN. You can use the Javascript SDK in React Native exactly along with the Web instructions - the only difference being that in Auth you cannot use signInWithPopup fior Google/Facebook login, but you can find much-lighter-than-rnfirebase libraries for that.

Hey ForSprint09, you can actually use Firebase's Auth/Real-Time Database with Expo. You can't use Firebase's Storage however, due to it requiring you to use Blob files which isn't supported in RN yet, but there is a PR being upstreamed to provide Blob support.

Here are the docs for using Firebase with Expo: https://docs.expo.io/versions/latest/guides/using-firebase.html and here are the JS Firebase Auth docs: https://firebase.google.com/docs/auth/

One caveat regarding the Firebase Auth JS SDK, you can not use phone auth with a React-Native (Expo) project since it can't handle the ReCAPTCHA/Verfifer methods out-of-the-box.

Cheers,

Adam

You should wrap the `TextInput` in a styled `View` instead of directly applying the styles to the `TextInput`.

The required text is just conditionally rendering a `Text` Component based on the length of the correlating string in state.

​

https://codesandbox.io/s/0yvlmkq93v

Hey congowarrior, i'll try and answer some of these!

Firstly, so you can see what we built in RN (we use some native components that we wrote ourselves and that are open source but the majority is RN): https://itunes.apple.com/us/app/bunch-group-video-chat-games/id1294869021?mt=8

• Note: We are not doing android yet, so my feelings may change when we get to that :p

1. This has been in production for 6+ months now thousands of monthly users. So I would say it is ready for production :p I show people it and they are surprised it's not native. It's smoother than a lot of other native apps I used (we do have some issues though, but I believe they can be solved)

2. So as much as I love RN, I think it's a pretty poorly maintained software. In the last year or so I have been using it it has gotten better but still: updates will introduce random bugs and the issues will be ignored until enough people complain. Some days things just won't seem to build and then suddenly it will work (use yarn). There may be times you need to drop down to native depending on what you are doing - that is a bit hard but once you do it once it's fine. Those are some that come to mind, I am sure there are more. Airbnb has a long blog post where they talk about moving off of RN after a few years so maybe check that out too!

3. I love RN. I've been in the JS world for awhile so it feels like home vs Swift etc. I love instantly being able to see my changes, redux, the way you build UIs with React. Especially if you are a startup in the experimentation and exploration phase proving out ideas it's great to let you iterate super quickly.

4. What do you mean by this point? Depending on what you are doing you could stay completely in RN land.

Another thing you could look into is https://flutter.io/. I have heard some great things, it's a different architecture (and language), but still worth evaluating I would say.

I'd suggest doing some free tutorials or have a read through React webpage on how it works and all, it won't take long and will give you a basic idea of how React is meant to work. That's what I did when I started using React at work and it helped LOADS. Also good to know the lifecycle - this page has decent info on both state and lifecycle https://reactjs.org/docs/state-and-lifecycle.html;

​

Short answer though, a state is tied to your single component - you can hold that components data, visibility in the state. Props are used to pass data from parent to child or by the component itself. You can change state within the component itself - but you cannot change the props directly.

Rise is an app that will (probably) help you manage your time. At the start I knew too little about React and was clearly not ready to develop something like that, so this year completely drained me out. Anyway, there are still a lot of things to improve, and now I'm ready to make something great out of this app. Here is the GitHub repo: https://github.com/Wetsie/Rise

Feel free to ask any questions about the app development

Hi guys, 2 months ago i announce my React Native app in this Subreddit and the app reached to 1.5k active users from 130+ countries today! I thought, i can give some insights about what happened and what i learned in this 2 month.

- In the beginning even if i write the package name of the app google play doesn't showed my app. After some time it magically appeared in the 7th place and it is in the 1st place right now. But i don't know what caused the first appearance in the 7th place.

- I updated the app 5 times because some users doesn't liked some of the logics in the app. Surprisingly all of them changed their review to 5 stars when i updated the app. (I was thinking that people won't care to change their review)

- Actually total of 3.5k people downloaded the app but 2k of them uninstalled it. I don't know if this is strange statistic or normal for an app. I would like to hear you guys thoughts. I am getting daily 50 users in average that actually uses the app.

- I am getting a null pointer exception crash on the google play console on some of the phones (1.3 percent of all users experience this issue) but i couldn't find the source yet. I don't have java experience so it is a big learning curve for debugging the app etc.

- I found out people that actually loves the app doesn't review the app, only people with bad experience reviews the app and give less stars. This is causing low star rate. So i am trying to implement a way to ask for review without disturbing users.

This was my first real android app and i am grateful to get this numbers. I would like to answer questions if you guys have any.

Link to app if you guys want to take a look

https://play.google.com/store/apps/details?id=com.framebyframe

I have build 2 production application with Expo.

Since I started developing with it a year ago, the Expo team has been awesome at adding new features that are requested by the community. This has made our investment worth it even more since each new iteration unlocks a set of new possibilities.

Pros: - Super simple to get started. - Great Documentation and community. - Runs on windows / macOS. - Builds for both iOS and Android. - Simple deployment to different environments and App/Play Store publishing.

Cons: - Limited to the libraries linked by Expo. - Larger than necessary Binary.

My recommendation is to scope out the features that you need for your project and see if Expo has the libraries to achieve them. If it does, then go with it, if not, either consider ExpoKit or a normal React Native implementation.

Production App for Reference: Play Store: https://play.google.com/store/apps/details?id=com.hasacorp.parkner App Store: https://appurl.io/jj3tgk4g

I don't have any great recommendations React Native specific recommendations, but I can offer that you should spend your time learning more about React and JavaScript. The big idea behind React Native is that you learn one paradigm and can write stuff for multiple platforms. The paradigm is React.

There is some of native stuff to know (mostly surrounding how to do builds and provision and whatnot, but you'd already know that as a mobile dev) and there is a little bit of specific React Native knowledge about specific components included in React Native that can be learned from reading their official docs, but the biggest learning curve is going to be learning about the React ecosystem.

JavaScript: The Good Parts is a good read because it will give you a good idea of what are parts of JS that you should be using and where there are obvious pitfalls (which would be really useful coming from other languages). And the Babel docs and 2ality.com are great for learning a bit more about ES2015 (the main syntax you'll be using).

That said, I'm sorry because I don't know of any great tutorials or books about it about React (besides the official docs, which aren't bad) -- most of what I used over a year ago to learn React was already a bit outdated then. :(

Use a phone that supports multi-window.
In one window, open https://snack.expo.io in the browser, and code your app. In the other window, download the Expo App and run the app!

Of course, don't actually do that.

If you find yourself wanting to pass something from child to parent, you need to rethink what you're doing. If the parent needs access to the childs state, the state should belong to the parent. Lift up state.

Yes you can send direct API requests to api.stripe.com or use the official iOS / Android SDKs. It is in general a much better idea to use client libraries over the raw API see https://stackoverflow.com/questions/22160301/stripe-native-php-library-vs-using-plain-curl for some arguments on the subject.

Btw you mentioned that tipsi-stripe has not been approved by Stripe: I wanted to point out that this library has been referenced in Stripe's documentation here https://stripe.com/docs/libraries and that I know of several projects that have been using tipsi-stripe in production without any issue: don't worry about compliance!

So in short, 3 options: - Official API : easy but not recommended - Official native SDKs : can be complicated to setup without iOS + Android expertise - Non official tipsi-stripe library : easy to setup and referenced by Stripe

As others have metioned, The TypeScript handbook. Skim it in like 30 min and keep it open when coding so you can quickly find what you need. Very useful TS guide

When I started off I used https://avocode.com/nachos-ui ...turned out to be a bad idea as the app itself grew a design language that nachos couldn't accomodate.

​

I think component libraries are fine to use if you plan on sticking with what they do and how they do it. If you need your own look and feel at some point you'll start kicking yourself.

I basically wiped all the rosetta stuff and went back to arm-native things. I uninstalled the global react-native since they now say to not install it as a global package and use NPX instead. Here's a list of my which/version commands & results:

% which ruby /Users/latitude_user/.rbenv/shims/ruby % which node /Users/latitude_user/.nvm/versions/node/v14.18.1/bin/node % which react-native react-native not found % which brew /opt/homebrew/bin/brew % brew --version Homebrew 3.2.16 Homebrew/homebrew-core (git revision 3b92200925d; last commit 2021-10-18) Homebrew/homebrew-cask (git revision ab11bfbede; last commit 2021-10-18) % ruby --version ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [arm64-darwin20] % node --version v14.18.1

https://reactnative.dev/docs/text#maxfontsizemultiplier

Setting a max font scale will allow the user to use accessibility settings up to a point where it the UI won’t get destroyed. It’s recommended to use this at a minimum though, your users have set the font scale that large for a reason.

If it’s a widespread problem then a redesign to accommodate large font scales would be the ideal solution.

Increase windowsize to load more things not visible. I don't know why someone said to decrease it. Decreasing it improves performance. But increasing it means more things will load that are not visible.

> windowSize: Determines the maximum number of items rendered outside of the visible area, in units of visible lengths. So if your list fills the screen, then windowSize={21} (the default) will render the visible screen area plus up to 10 screens above and 10 below the viewport.

https://reactnative.dev/docs/virtualizedlist

However, if you are using onEndReached to fetch new data on reaching the bottom then you could increase onEndReachedThreshold so that it hits this trigger earlier.

You could use a `SectionList` instead nested `FlatList`, so you can scroll to a section(Comment) or its sub-items(Replies). https://reactnative.dev/docs/sectionlist#scrolltolocation

Hey guys, I am happy to anounce that my react native app is finally released! It is an app that extracts frames from videos. It is still in development so there will be some bugs for sure but i think it is mostly usable!. I will happy to hear your thoughts. Thank you!

​

https://play.google.com/store/apps/details?id=com.framebyframe

Hello all!

I've spent the last 6 weeks building a CBT mental health app, called ezeCBT. It's a thought diary and trend analyzer for Cognitive Behavioral Therapy (CBT).

It's 100% React Native. Here's the stack:

"@haskkor/react-native-pincode": "^1.21.1",

"@nozbe/watermelondb": "^0.14.0",

"@nozbe/with-observables": "^1.0.4",

"@react-native-community/async-storage": "^1.6.1",

"date-and-time": "^0.9.0",

"fast-safe-stringify": "^2.0.6",

"react": "16.8.6",

"react-move": "^6.0.0",

"react-native": "0.60.5",

"react-native-ad-consent": "^1.0.1",

"react-native-app-intro-slider": "^3.0.0",

"react-native-autogrow-textinput": "^5.2.0",

"react-native-calendars": "^1.205.0",

"react-native-chart-kit": "^3.2.1",

"react-native-dialog": "^5.6.0",

"react-native-file-picker": "^0.0.18",

"react-native-firebase": "^5.5.6",

"react-native-fs": "^2.14.1",

"react-native-keychain": "^3.1.3",

"react-native-modal": "^11.3.1",

"react-native-permissions": "^1.2.0",

"react-native-responsive-screen": "^1.2.2",

"react-native-scrollable-tab-view": "^0.10.0",

"react-native-sentry": "^0.43.2",

"react-native-splash-screen": "^3.2.0",

"react-native-svg": "^9.6.2",

"react-native-swiper": "^1.5.14",

"react-native-tts": "^3.0.0",

"react-native-vector-icons": "^6.6.0",

"react-native-voice": "^0.3.0",

"react-native-zip-archive": "^4.1.4",

"styled-components": "^4.3.2"

I think it's a big step up on the calculator and torch apps I started with. The short video uses voice dictation to keep the length short.

I'd love to hear your feedback!

Google Play

​

Assume that you have saved each user notification token when s/he signed up with the new device.

If you want to send a notification to all users. There are 2 ways:

• Build a simple internal dashboard that is connected to Firestore then iterate to all users and get push tokens then submit notifications to each user. This will be done manually and should require a simple button click.
• Write cloud function which executed automatically at certain time threshold ( cron job) then push to all notification users.
  https://firebase.google.com/docs/functions/schedule-functions

Is it a constant that never changes? If so, define and export it outside of your component. Maybe even a file where you keep your constants.

If the variable isn’t constant and can change, the context api might be what you’re looking for.

If you’re using flatlist then you’re probably also giving a key to every row. React and flatlist are smart enough to realize only row with key x should change.

https://reactjs.org/docs/reconciliation.html#recursing-on-children

So yes, you can give a refresh function to every row and it won’t impact the performance in a noticeable way.

Class-based component. js class Welcome extends React.Component { componentWillUnmount() { // code cleanup } }

Equivalent in functional component. js function Welcome() { React.useEffect(() => { return () => { // code cleanup }; }, []); }

Read more: * https://reactjs.org/docs/hooks-effect.html#example-using-classes-1 * https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

Have you done what it asked of you first?

error Failed to install the app. Make sure you have the Android development environment set up: <strong>https://reactnative.dev/docs/environment-setup</strong>.

for android it's very straight forward with firebase

1. setup firebase app distribution, and add your testers
2. setup the gradle task to upload the APK (docs)
3. write a script to increment build numbers and update it for both platforms
4. github actions already has all the android deps installed, so just run

&#x200B;

yarn ./gradlew assembleRelease appDistributionUploadRelease

iOS becomes tricky to do yourself, I personally use bitrise for ios builds

You've to install git, the error message says: no git binary found in $PATH.

Get it here: https://git-scm.com/download/win

I'm not sure about Windows but you may have to add it to $PATH (in the system environment variables).

Oh, I see. That's actually a free illustration pack from figma with some adjustments. You can check it out here, they are of excellent quality. I'm not a designer by myself, so I definitely wouldn't be able to do something like that

Yep 'memo' is the correct answer, congrats!
I've added `memo` on the list item component.

The crazy thing is I was not seeing any noticeable impact with my own eyes. I knew memoizing was probably good but wanted to have confirmation, especially since my `renderItem` was already not anonymous as mentioned in https://reactnative.dev/docs/optimizing-flatlist-configuration#avoid-anonymous-function-on-renderitem.

But with the graph, it was clear as day that the impact is big!

One thing that is weird with RN vs normal & React web dev is that there is no CSS for RN. They do have styling, but is a simulated subset of CSS rules. Most importantly, there is no grid, but they do have s a somewhat compat [flexbox](https://reactnative.dev/docs/0.64/flexbox) for layout.

I would also go for option 2 given these reasons. I would also change the messages table to also be an object keyed by room id though as opposed to an array.

I see, I guess you're talking about Firebase Realtime Database. The key differences with Firestore are the realtime-sync and that it can work offline.

https://firebase.google.com/docs/database/rtdb-vs-firestore

I see you're initializing FB, but you're not pushing data to it anywhere.

&#x200B;

Take a look here for the methods for writing and updating data

&#x200B;

https://firebase.google.com/docs/database/web/read-and-write

&#x200B;

Also, FYI, you should try to keep the practice of not mutation arrays and object directly.

&#x200B;

In the addNewTodo method you should spread the array (if you're using ES6) first before running unshift against it.

&#x200B;

let todos = [...this.state.todos];

&#x200B;

todos.unshift({

id: todos.length + 1,

title: this.state.todoInput,

done: false

});

https://firebase.google.com/docs/database/android/offline-capabilities

Not sure which part of firebase you're writing too so I can't tell you "yes I've tested this and it works" but pretty much everything in firebase is queued for offline operations.

You can be offline, kill the app, reboot the phone etc and next time you open the app and have network connectivity it will just go ahead and finish off what it was doing.

You can also setup offline caching for reads too but that's not out of box.

useEffect only trigger the function if a dependency which is being observed changes, you don’t have any dependency declared in your hook so useEffect will only trigger once

The dependencies are declared on the second useEffect argument array

Take a look at the docs for more info

https://reactjs.org/docs/hooks-effect.html

https://appetize.io and https://www.browserstack.com have some options, for a fee (might be free trials idk).

If they have an iOS device TestFlight is really the easiest option but they will have to download it and you’ll need to do some work.

Use 'S' to format with a fractional second. And 's' for seconds.

Then, adapt accordingly to your " setOpenTime" function

.format('hh:mm:ss.SSS A') = "12:18:09.778 PM"

&#x200B;

Doc : https://momentjs.com/docs/#/displaying/

I've used AWS amplify for auth and IMO it's really clunky and not very flexible (specifically user management and access control) compared to using something like Auth0 or Firebase auth.

Rolling your own security isn't great either as you can't guarantee that what you've implemented is secure or not.

Auth0 works really well but is pretty expensive, and Firebase Auth has great pricing, but it's firebase auth UI library is awful - extremely huge payload size.

If pricing is an issue, you could roll your own JWT but it is really easy to shoot yourself in the foot with the integration.

Auth0 is the lead in pushing JWT, and have several articles on what not to do when rolling JWTs out.

https://auth0.com/docs/best-practices/token-best-practices

To your general question of how you load react with params here is a simple guide: https://dev.to/ryohlan/how-to-pass-initial-props-from-android-native-2k2

To your specific issue of using deeplink you can use Linking.getInitialUrl() to get the url the app was opened with

https://facebook.github.io/react-native/docs/linking

Styling components to look native won't necessarily help performance. What will help most:

• Use native drivers. Animated, for example, has a prop called useNativeDriver, which will pass all of the animation props to the native side and perform the animation natively, freeing the javascript thread. FlatList is another component that uses iOS/Android native code and greatly improves performance.
  
• Eliminate unnecessary renders. Besides using native driver for Animation heavy apps and using Flatlist, eliminating unnecessary renders is the most common effective performance optimization.

Considering RN has built in support for websockets my vote on this one has to go for PEBCAK

Software doesn't just not work for no reason, and just because you haven't managed to sort a problem doesn't make the whole project dreadful. Keep learning, and keep an open mind, in this case it unfortunately sounds like the tech task did its job and filtered out a candidate who didn't have the experience they were looking for.

"In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components Native Components."

https://reactnative.dev/docs/intro-react-native-components#native-components

And for more info:

https://reactnative.dev/docs/native-modules-intro

Maybe not the exact answer but this might help with your search

You can try strapi. It is a headless CMS. It is written in NodeJS. You can use any database you want.You can use GraphQL or rest. It has user roles and auth flow. You can manage content easily with out of the box web ui. You can extend functionality easily as it is written in NodeJS.

I don't like storing data in firebase due to being nosql. My data eventually ends up being relational. Managing relational data with nosql databases can become overcomplicated.

Have you tried using firebase.auth().onAuthStateChanged()?

From the docs:

> The recommended way to get the current user is by setting an observer on the Auth object:

firebase.auth().onAuthStateChanged(function(user) { if (user) { // User is signed in. } else { // No user is signed in. } });

> By using an observer, you ensure that the Auth object isn't in an intermediate state—such as initialization—when you get the current user.

It has a free tier which is generous enough for a small app.

https://firebase.google.com/pricing/

Whether it's as good as a good CDN for end user performance I'm not sure as I've never used it but it seems at least comparable to S3.

If you need to change file content quickly for end users I would check if you can invalidate content quickly or set low TTLs.

It's hard to answer your question better without traffic volume and functional requirements. Eg do you need ultra low latency for buffer free video streaming? In that case it may not be good enough as you would need an Akamai level CDN in that case.

Nice shopping list of tips.

My thoughts/criticisms:

3.1 I wouldn't advise doing this without a) having a bloody good reason and b) backing everything up first. Most packages with Android dependencies still use gradle 2 as does react-native init. Tread carefully if you're not comfortable with gradle.

That doesn't mean skip 3.2. Very important as Google are rejecting pre API level 26 targets soon.

3.3 I'm pretty sure this isn't necessary if you opt in for repackaging on google play. Can't remember where I saw this though so you can ignore me safely.

4 is well out of date - just make a folder called assets and require() files from there. Next time you compile they'll be sucked into the appropriate places. Much less hassle.

I'd add one thing that is massively important is to learn react component lifecycle and how it applies to RN. Don't assume it's the same as normal react. Memorise this document:

https://reactjs.org/docs/react-component.html

Also state, props and global state apis like redux, mobx, etc become more important in RN than ever.

You can pass a ref through props.

Look here: https://reactjs.org/docs/refs-and-the-dom.html

Sorry I'm not sure if there are docs on this for React Native... I mostly us React so this might not be very helpful.

App where you can find tutors and explain certain topics/subjects:

https://play.google.com/store/apps/details?id=com.user.TuitionHub

Hi all!

Previously I posted my most complex work, a meme maker.

This is honesty my best work in UI and UX. The design is done my team mate: https://www.reddit.com/user/trevtrevla

All of his designs I have seen, are just awesome and I really enjoy to work with him 😃

There are a few features here:

1. Different look of general Profile UI

2. Shop, Posts, Bookmarks

3. Buy and change profile flairs, currently there are backgrounds and sunglasses.

4. Buy Gems

5. You can also see your follows and followers (forgot to show in video)

😅 Yeah I know the followers number needs a better function. I am working on it.

Hope you guys will like it 😇

It's live on play store: https://play.google.com/store/apps/details?id=com.meme.lishup

Happy for any questions, it only took two weeks to make and a 4 day IOS and google play release. Android Link: https://play.google.com/store/apps/details?id=com.wearvr.app

Got on the React Native Showcase as well :-)

You either want to use context API. Or set State in one component and create a function that changes that state. Pass both the state and the function to the component.

&#x200B;

In your case it sounds like you want to set state in parent and pass it through to the children.

https://www.freecodecamp.org/news/react-changing-state-of-child-component-from-parent-8ab547436271/

ReactFire works well for integrating React and Firebase. Not sure if they have support for React Native yet, but I'd check there.

Edit: it looks like progress has been made and there's a working option now (if I'm interpreting this thread correctly).

The caveat (as of 8 days ago) was Firebase Login:

> Unfortunately, I just discovered that Firebase Login isn't quite working, so there will likely be another update to address that in the coming days

Edit2: works now

https://www.firebase.com/blog/2015-05-29-react-native.html

pretty saving user credentials to asyncStorage is a huge security risk. see here. use react-native-keychain instead.

Are you sure that the error is originating from this snippet?

The error suggests that you have some hooks that are conditionally executed, which is against the rules of hooks.

Well then do I have some good news for you friend, it’s an official part of the React docs: Lifting State Up | React.js Docs

edit: The React.js docs are great, and I recommend if you’re still learning to breeze through them first - not to soak everything in just yet, but to familiarize yourself with high level concepts and terminology. That way when debugging later you may remember a bit of the docs that might help. Best of luck!

The thing is, there's not much overlap between the font families that iOS and Android provide. The solution is to load your own fonts with the help of expo-fonts. Once you've done that, they'll always be available, regardless of the platform.

If you specifically want to make Roboto-Bold available, just download it from here (use the "Download family" link on the right, and you'll get a zip file that contains the font you want, and many other variations), and load it with the help of the above library.

Great post! I used to be a web designer so this really summed up the process. Also, a great site that I use a lot to see how designers tackle particular UX challenges and apps in certain domains is https://dribbble.com/

Instead of doc().get() which reads the document once, use doc().onSnapshot() which will be invoked initially and then called again whenever the document updates (it "listens" to the document). Don't forget to return the unsubscribe reference from useEffect to stop listening to updates when your component unmounts.

https://firebase.google.com/docs/firestore/query-data/listen

You're using a hook component outside of a react functional component. You can only use hooks, within the function. I.e.

const [value, setValue] = useState("hello"); // <--- OUTSIDE FUNCTIONAL COMPONENT
const ReactComponent : React.FC = () => {
const [value, setValue] = useState("hello") // <-- SHOULD BE HERE!
return (
        <View>
            <Text>{value}</Text>
</View>
    )
}

Edit: I'm assuming you're wanting to use useState outside of the functional component because you want to share state to multiple components, if so, you'll need to pass state through props to other components or use a state container such as Context which shares state to all children components (https://reactjs.org/docs/context.html).

If you're using a React Component class, componentDidUpdate is what youre looking for.

Just note that changing the state will cause another re-render and update, so pay attention to this part of the docs:

> You may call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you’ll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance.

So always use an if() statement to compare oldProps and newProps or you will hit an infinite loop always setting state after an update.

I never trust ANY tech book to be in date or have compileable examples.

React native is evolving so fast that you should really be using blog posts, examples, and youtube conference talks to keep up to date with how things have changed / are changing.

One big change recently has been the switch of react from components to functional components with hooks. This isn't a react-native thing, per-se, but since react-native uses react as some of it's underlying tech, you should be familiar with how that works and has evolved over time as well.

I can't give you an answer on those two books in particular, but IMHO if you're reading a book to get tech knowledge, that knowledge is going to be pretty old (publishing cycles take time) and likely not very useful.

Shameless plug for my company Infinite Red - we have lots of great blog posts and examples for react-native... but even these become old and stagnate and are no longer relevant after a few years. https://shift.infinite.red/

You would need to use a web library inside of a webview. It's quite likely it's going to make your app look a little "dodgy". Just like asking someone to login to Facebook or Google through a webview.

https://stripe.com/docs/stripe-js/reference

It's possible, I believe to create your own UI to gather the card details then use the js API to tokenize it. This would be preferable to the above. You may even be able to run the JavaScript outside of a webview.

Just a general note to all - Expo's a grand idea but if you need to build an app of decent size or functionality it's best not to go down that path to begin with or you will find yourself stuck like this.

Here you go: https://www.figma.com/file/moMc0PigOQy4in0FNY8LQu/Rise-Icons?node-id=0%3A1

Also, anyone else is free to use them

Check out Figma's learn page. They have short lessons on both concepts and practical topics https://www.figma.com/resources/learn-design/

Good luck!

setState is asynchronous. It schedules an update with React and doesn't immediately update the values. Which means if you log this.state immediately after setState, you won't get the updated values.

https://reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value

You can return a function for cleanup. Probably easier to see in the code here than my explanation. https://reactjs.org/docs/hooks-effect.html#recap

The only potential issue I know of is that createRef can’t be used in function components. Otherwise I don’t see a reason why you can’t make an entirely functional project.

https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs

shouldComponentUpdate should only be used as an optimisation to determine if component should re-render or not. Nothing else. It should have as small logic as possible, and that logic only decides if functions returns true or false.

If you need to act after component props/state has changed - do it in componentDidUpdate: https://reactjs.org/docs/react-component.html#componentdidupdate .

I'm not super familiar with React Navigation (been a while since I've worked in React Native) but surely you have some top-level App component that contains the router and the rest of your screens. This would be the ideal place to load the token from AsyncStorage. At that point you can use something like the Context API to pass the token down to the components who need to use the token.

• Create a Context object called AuthContext
• Wrap your routes / child components in the AuthContext.Provider component inside your App.render method
• Load the token from AsyncStorage during the App.componentDidMount life cycle method (or use hooks)
• Pass the token into the AuthContext.Provider
• Consume it in your child routes / components via AuthContext.Consumer

Like with everything, premature optimization is the root of all evil, so I'd only optimize where necessary (and measure to make sure your solution is better).

FWIW an often-lighter-weight solution is using PureComponent and being careful with reference equality of props in performance critical situations. Redux does something similar with all connected components.

Check this article out: https://codepen.io/stowball/post/a-dummy-s-guide-to-redux-and-thunk-in-react

They build a simple app then convert it to Redux.

In Redux, you would swap those "this.setState({ data: data, loading: false, refreshing: false });" which dispatching actions, a pattern that Redux uses to change the state of your app in a more controlled way.

Don't be downvoting the question kiddies. On the surface it sounds stupid but there's some important nuances in dealing with node modules.

The simple answer is yes and redpopcornpanda has included the reasoning for that.

Longer answer is it's not that simple as the above answer alluded to as the runtime environment provided by RN is not node nor is it a web browser.

Some packages, nay, most packages expect that they are in one of these runtimes. The remainder work with plain vanilla runtimes or have some sort of internal switching to behave across runtimes.

So yes if the package works in a plain vanilla js environment no problems. If it expects to be in a browser or node this is where you start running into issues (most are not insurmountable).

Many if not most can be resolved with polyfills but knowing what to polyfill can be the hard part. So far I have not seen a magic polyfill it all package for RN.

What I do usually is install the package in a brand new project and try to achieve what I want there as a demo/POC and polyfill as I go.

The one exception where a package just isn't going to work is where it's using native functionality like this: https://nodejs.org/api/addons.html or calling command line utilities like the large number of ffmpeg wrappers.

There is also a package for "nodeify'ing" RN available which someone else on the forum introduced me to. I've not tried it yet but will when I get an excuse.

https://www.npmjs.com/package/rn-nodeify

Looking at web3.js' package.json it looks pretty clean but this one might need a polyfill xmlhttprequest RN supports fetch but doesn't have a built in polyfill for the other request methods so you might need to provide one. Maybe that package makes it standard across platforms who knows - there's like 500k packages on npm (and an average of 100k dependencies per project) so I haven't seen them all.

So good luck and anyone else who reads this I hope you've learnt something :)

I was recommended to check out Segment + Amplitude, so I spent an hour or so today setting them up. So far, I'm impressed. I used the expo-analytics-segment package and routed everything through Segment. Segment has an iOS source and an Android source, and I added Amplitude as the destination for both (I'm still deciding whether I want to have both platforms route to the same project in Amplitude or different ones). I'm using React Navigation 5, so it's easy to hook into the state change event to track screen views. So far, I haven't set up any additional event tracking (other than screen views), but I've been pleased with how easy everything was to set up as well as how in depth Amplitude's analytics are. The web app is easy to use and understand.

I want to start adding custom events and flow/funnel related stuff (like user sign up, logout, etc), and I imagine it will be easy to do as well. Not sure if this helps, but I thought I'd at least offer my initial impressions from my experience today.

EDIT: I wanted to clarify the roles of Segment and Amplitude, respectively. Amplitude is the main analytics tracking tool. Segment captures all activity and routes it to whatever services you have set up. I plan to have Segment send screen views + custom events to Amplitude, while setting up an additional funnel for a marketing tool like customer.io. Not sure exactly how that will work, but that's my plan.

With most app icons, it's not at all worth reinventing the wheel - there are free libraries with at least 75% of what you'd need. If not, there are websites you like flaticon or the noun project where you can buy icons for a few dollars, and personally speaking spending a few dollars saves me a ton of cost in personal time, despite being relatively good with photoshop/illustrator.

Talking about the parameters of pricing, performance and everything you've mentioned, Applozic is a viable option as well, with advanced SDKs and customizable UI kits. Do check it out and let me know what do you think?

I’m using Linode (have done since 2008). I usually go for the 2 core/4GB @ $20 or the 4 core/8GB @ $40 plans. Digital Ocean are the current industry darlings though, and their prices and performance are pretty similar, so give both a go.

I think you can do a lot with modern VPSes before you need to look at AWS and they are so cost effective for small businesses.

I’ve heard bad things about Linode’s US east coast data centres, so you might want to steer clear of those (though that was quite a long time ago, but they seemed to have a lot of connectivity problems there).

There’s also Vultr, which I’ve heard about but never used, and Hetzner, where you can get cheap dedicated boxes but they only have German DCs and the peering speeds were also a bit slow for me.

Found my starting point - https://www.scaledrone.com/blog/react-native-maps-tutorial-find-my-friends/
Thanks to everyone who replied.

Use realm only. Its very fast than all alternatives.

I have used it in Futuro SMS.

Checkout the app/db folder in the repo to understand.

For more info, checkout https://realm.io/docs/javascript/latest/

I think you should go for it the other way around and tell sqlite to open the file you downloaded in the Documents folder. It does not look like react-native-fs let's you choose where to save files, that might be because of the sandboxing done by iOs to control what your app can and cannot do.

If your only objective is to store data locally, I highly recommend Realm. It is way faster and easier to use than SQLite IMO, but I never generated sqlite files on my server, so that my not fit your usecase. My approach is that I get the data I need from my API in JSON and save it with Realm.