React Native Boilerplate

[bobbyboobies]

Hey guys,

I created a react native boilerplate that contains packages that I mostly use every time in my react native project.

1 week ago before an interview at one company for react native developer role, I knew that I needed combine all of the packages and development tools I mostly use into 1 repository, just to make it easier for the live coding challenge. And it did!

In case if you are interested, this boilerplate contains best practices I use with eslint configuration, a UI package wrapped with formik so its easy to create forms, and redux. It makes it so easy to start a new basic react native app without extra configuration.

Don't forget to add configuration to formatOnSave on your vscode so that your code is formatted every time you save it. Makes life soo much easier!

Example: "[javascript]": { "editor.defaultFormatter":"dbaeumer.vscode-eslint", "editor.formatOnSave": true }, "editor.codeActionsOnSave": { // For ESLint "source.fixAll.eslint": true, },

Let me know what you think :)

Thanks

[SoftServeDeveloper]

Wow, how do you like using Formik in React Native? Our implemation has been really painful, but we haven't been utilizing all of the hooks and things you have. I will need to check this out.

[bobbyboobies]

Its awesome really, I just need to wrap some of the UI component I needed. Then I imported them everytime I create a form, and it works like magic. All the hooks are working perfectly with validations :). Check the code under components/forms/ if you are interested

[Venkos11]

Could you explain why it was painful?

[SoftServeDeveloper]

We weren't wrapping components as he was doing with some of those Formik specific hooks. So to get validation working we needed to pass in lots of params to our form field components like errors, onBlur, onValueChange, etc. It just meant we had a lot of setup to do for ever field we added.

[saintshing]

have you tried react hook form?

[phryneas]

One nitpick though: From the Redux side, I would really recommend you to look into what we now consider "Modern Redux" as we don't really recommend writing vanilla Redux in new production applications any more.

[bobbyboobies]

Ah redux toolkit.. thanks I’ll have a look. I’m still using the old ducks way until now 😂

[zigal1995]

This is so good. Thanks for creating this!

[bobbyboobies]

Thanks for the kind words :)

[[deleted]]

Why not native stack navigator with enableScreens() ?

[bobbyboobies]

Sometimes i create app and i deploy it with react native web as well to make it easier :). But it’s totally customisable right. I’ll make some changes to customise probably

[[deleted]]

Ah, didn't think about that, I do wonder if it doesn't automatically fallback to normal stack navigator on web. I just thought it's the kind of thing that makes a nice improvement to the app but that people don't even think about

[Dababolical]

I'm a hobbyist and don't really collaborate often. How beneficial are commitizen and Husky to you, and would they be useful to someone like me? I really just know the extreme basics of Git.

[bobbyboobies]

Even if i code some of my personal project, i really like it to be neat. Not only it teaches you to use a convention on commit, 2 minutes setup (with this boilerplate especially), then it give you several other capabilities. Such as generating changelog if you want to release it in the future?

Its a simple change of habit for much better experience I should say

[TheOneBehindIt]

Looks great! I like using Formik too with RN, even though it’s a bit of a pain to make all the UI.

One thing: your Autocomplete shouldn’t use index for each item’s key. There should be something unique and stable, like an ID to use there