DEV Community: Sergei Butko

React Native Template Strong

Sergei Butko — Tue, 12 Oct 2021 10:43:21 +0000

Idea

The primary idea is to have everything set up for quick start with components, modules and other stuff which many templates can't offer.

Core

The core of this template is build around next dependencies:

Documentation

One of the main differences between this and any other template is that it offers a documentation to each of its component, helper, module, etc.

Structure

It offers more than just a simple template project it offers a guidance towards project, module, component creation.

From the component to publishing an app, it covers each aspect of development.

Performance

From the beginning it includes Hermes on both platforms, proguard is enabled, consoles are being removed and many other enhancements are used to provide the best performance.

Native-look-alike focus

By using React Native Navigation and providing SF Symbols usage on iOS and Material Icons on Android this template strives to make apps look as native ones as possible.

Native colors usage are also welcomed in this template and bring many useful helpers.

Components

Set of created common components like buttons, text inputs, radio buttons, date and image pickers, permissions, toasts and more.

Different helpers to help in your day-to-day cases.

Hooks which are found useful throughout the development process.

Localization

Localization is provided by react-native-localization helps to keep all the strings in one place and maintain correct usage when adding new languages.

Tests

Jest is used to test functions, methods and show test coverage of your project.

End-to-End coverage provided by Detox will make it easier to test each scenario on emulators or real devices.

Storybook can help to see what each component is capable of and show its properties and different edge cases. Or even contain whole screens.

So it brings best of both TDD (Test Driven Development) and CDD (Component Driven Development).

Code quality

ESLint with strict set of rules and plugins provided by eslint-config-strong.

Additionally there are Prettier and TSConfig rules which will make it hard to create messy code.

To prevent commits with errors Husky together with lint-staged won't allow them to pass.

Environments

React Native Config bring you the ability, for example, to have different environments which will make it easier to work with different API endpoints and test your application.

If you think that this template lacks something or would like to add something, feel free to do so by creating issues or participate in discussions.

There are still many things which I'd like to add, check the roadmap and issues to see where it's heading.

This and many more other things you can find in repository's documentation.

I hope you will find it useful and you will use it in your next project! 🎉🏆🎉

svbutko / react-native-template-strong

Quick, opinionated, documented and strong beginning for your next project. Template made with react-native-navigation, TypeScript and Redux.

ESLint Config for React and React Native Development

Sergei Butko — Tue, 31 Aug 2021 12:15:02 +0000

Over the years of working with React Native I've collected several plugins and rules which I use in my development and finally gathered it in a single package which is ready to be shared.

I initially started with TSLint but when it was announced that it was deprecated switched to ESLint, first with TSLint plugins to have smooth transition and then to completely abandon TSLint.

I had issues with configs like AirBnB and Google because they didn't cover some things and were not strict enough, so I decided to do what suits me best rather than overriding things I needed, this also let me to check what rules ESLint offers.

Primarily this config is made for React Native + TypeScript development but it also works well with React projects.

Plugins which I use:

There are also TSConfig and Prettier config.

If you are like me and want to have a strict set of rules, then give it a try!

svbutko / eslint-config-react-strong

ESLint strong (strict) config for React and React Native development.

React Native Image Resource Generator

Sergei Butko — Thu, 26 Aug 2021 15:40:36 +0000

Nearly every single react-native application uses images and icons to make them look more appealing to the end user or help them use it by providing additional information.

Since react-native became publicly available the process of adding these images to apps didn't change much and while working with different people and apps there've been issues, problems and mild inconveniences about which I'd like to present here and most importantly give a solution to them.

Issues, problems and motivation

File existence

In order to use images and icons in code they first have to be imported. The most common way is:

<Image source={require("./my-icon.png")} />

By using require we are manually setting the path to our file with little IDE support. And without any 3rd party plugins IDE can't guarantee whether the file exists or not, there won't be any error or at least warning to indicate that file doesn't exist. Like the file can be deleted, or you accidentally added some symbol into the require path. You will never know about it until you launch the app and open the screen where this icon is used.

Manual typing

As mentioned before:

By using require we are manually setting the path to our file...

If it's 1-5 icons it might be fine but if there are more than 10 or 50 or even 100 (there are lots of different cases). And always manually typing paths is tedious and takes your valuable time.

Icon replacement/removal

Possibly a single icon can be used in different components/screens and for some reasons we have to remove it and replace it with a new one. In this case we have to search for every usage of this icon in our application and replace it with a new one, although with search-and-replacement it's a bit easier but still takes time.

Icon names

Not everybody create icons and UI itself, most of the time a designer does this job and while drawing and finishing icons they receive names and sometimes a person can write things like:

bell icon.png
$.png
icon,t.png
icon's.png
icon".png

or there might be even non-Latin alphabet letters:

звонок.png
zurück.png
鐘.png

Not everybody do things like this but it's still possible and after seeing this one can only introduce coding/naming conventions to a designer and politely ask him to change this or in case if it's impossible to manually change it by yourself.

Solution

react-native-image-resource-generator was developed to overcome all of these problems, add structure, save time and nerves.

It's a simple CLI tool which generates code-friendly image URI source constants to use in projects.

Create a folder and put all of your images there (sub-folders are supported too), e.g.:

project
│   package.json
│   src  
│
└───resources
│   │   fonts
│   │   settings
│   │
│   └───images
│       │   arrow_down.png
│       │   arrow_down@2x.png
│       │   arrow_down@3x.png
│       │   arrow_up.png
│       │   ...

Add script to your package.json scripts or type into terminal:

JavaScript

img-res-gen --dir=resources/images --out=src/common/ImageResources.js

TypeScript

img-res-gen --dir=resources/images --out=src/common/ImageResources.g.ts --ts

The result of the command will create a file with static image URI sources, which will look something similar to this:

/* eslint-disable */
/* tslint:disable */
import {ImageURISource} from "react-native";

export class ImageResources {
    static readonly account: ImageURISource = require("../../resources/images/account.png");
    static readonly arrow_down: ImageURISource = require("../../resources/images/arrow_down.png");
    static readonly arrow_up: ImageURISource = require("../../resources/images/arrow_up.png");
    static readonly avatar: ImageURISource = require("../../resources/images/avatar.png");
    static readonly back: ImageURISource = require("../../resources/images/back.png");
    static readonly bank: ImageURISource = require("../../resources/images/bank.png");
    static readonly bell: ImageURISource = require("../../resources/images/bell.png");
}

After this use it anywhere you need:

<Image source={ImageResources.account} style={styles.icon} />

You don't need to manually write requires anymore and stop worrying about file existence and path names.

If you added or removed images, simply re-run the script to regenerate the file. IDE will give you a list of errors of used constants which don't exist anymore and you can simply replace them.

As mentioned before it works with JavaScript and with TypeScript.

To handle non-Latin letters and other symbols and follow naming conventions, the tool uses transliteration under the hood and transliterates file names.

Hope you will use it in your projects and it will serve you well. And if you see any issues or would like to propose changes, feel free to create PRs!

svbutko / react-native-image-resource-generator

CLI tool to generate code-friendly image URI source constants for React Native

React Native resources to learn and get inspiration

Sergei Butko — Wed, 07 Jul 2021 14:21:02 +0000

Disclaimer: I'm not promoting or affiliated with any community, resource or person, this is a list of resources which I gathered through my development career.

This article will bring benefits to everyone, no matter what level of knowledge and experience one has with React Native.

For newcomers, it will give a solid list of information needed in order to 'Get Started' and continue growing together with community.

For people who already developed their apps and know things around, this might be a source of something never stumbled upon before and could bring some thoughts, ideas or daily dose of new things and inspiration.

Anyway, here's the list:

Basics

reactnative.dev - it's the starting point which sometimes is being neglected. Check its pages and follow its blog page and it'll solve many of your questions.
Material IO - Android design system website where you can also find lots of information about Material foundation, design, components and guidelines. Specifically I'd like to mention the color tool together with the color system and communication(which is useful anywhere).
Human Interface Guidelines - iOS design guidelines with explanations and examples from Apple.

Language

JavaScript Info - great JavaScript website with simple, but detailed explanations with examples and tasks.
TypeScript Handbook - awesome handbook which is always up-to-date with the latest features.
30 Seconds Of Code - collection of CSS, JS, React Hooks and Components, cheatsheets and articles.
WTF JS - collection of tricky JavaScript parts.
Clean Code JavaScript - Software engineering principles, from Robert C. Martin's book Clean Code, adapted for JavaScript.

Design

Refactoring UI - design articles and tips from Adam Wathan and Steve Schoger,p primarily based around web development but many to those apply to the mobile development too.
Dribbble - self-promotion and social networking platform for designers and creatives. Great place to gain some inspiration.
Figma Community - explore projects, mockups, templates and more.
Facebook Design Tools - tools and resources to help with the design process from Facebook.

Open Source

GitHub Learning Lab - learn what GitHub offers with real projects, tips, instructions and feedback. There are also small courses for different technologies.
Open Source Guide - if you've never contributed anything and want to then this will help to launch and grow your project.
Git Cheat Sheet - small cheat sheet of the most widely used git commands.

Learning & Discovering

React Native Newsletter - free bi-weekly summary of React Native news, articles, libraries, apps, and more!
React Native Now - hand picked React Native news, tutorials, libraries, articles, and videos compiled from around the web and bring it straight to your inbox.
r/reactnative - community for learning and developing native mobile applications using React Native.
r/destroymyapp - recently created community where people post their apps to receive feedback.
React Native Radio - podcast dedicated specifically for React Native.
Reactiflux - great chat community.

Twitter Accounts

These people share their own experience almost on a daily basis and I'm really thankful for it, I learned a lot of new stuff from reading and using their content:

Other

Carbon - create and share beautiful images of your source code.
Squoosh - compress and compare images with different codecs, right in your browser
Regex 101 - regular expression tester with syntax highlighting, explanation and cheat sheet.

What are your daily React Native related resources?

Happy codding🎉

WebStorm plugins to boost your productivity

Sergei Butko — Mon, 05 Jul 2021 14:17:35 +0000

There are a lot of blog posts about Visual Studio Code and its extensions and WebStorm doesn't get this much attention.

As a React Native/React developer who uses WebStorm daily I have a list of plugins which I'm using, these are common usage plugins and not bound to any specific framework or technology.

They will help you increase your development speed and productivity by solving day to day issues/questions with IDE no matter whether you're familiar with it or not.

These plugins also work with other JetBrains products.

I am not affiliated with JetBrains or any plugin at all.

1. Key Promoter X

Probably the most useful one, especially for those who start using WebStorm.

Ever wondered what is the shortcut for some_feature while using GUI and navigating through several layers of menus using mouse?

Well, this plugin serves as a helper for this kind of situations by showing toast notifications with shortcuts/hotkeys when you click on something using your mouse.

Besides that it gathers all mouse clicked commands with shortcuts and how often you use them, so that you could analyse on what command you spend your clicks the most.

Marketplace link

2. CodeGlance

Those who are familiar with Sublime will like this one.

When you have certain place of a file you need to navigate to and you sort of know where this place is and you'd like to make it quickly and (worst case scenario) the file has a lot of lines, you will be scrolling to this place or trying to find a closest constant/function/method name you remember near that place.

Or you can use CodeGlance.

It displays a zoomed out overview or minimap. The minimap allows for quick scrolling letting you jump straight to sections of code.

Marketplace link

3. String Manipulation

Very powerful ... 🤔 ... string manipulator 🤷

The name says it all, to be more precise it does: case switching, sorting, filtering, incrementing, aligning to columns, grepping, escaping, encoding...

Marketplace link

4. UUID Generator

Not so frequent in use as previous ones but good to have for some occasions.

UUID (Universally Unique Identifier), ULID (Universally Unique Lexicographically Sortable Identifier) and CUID (Collision Resistant Unique Identifier) generator, and it also completes several actions on them.

Marketplace link

5. IDE Features Trainer

This is a bundled plugin but not many know about its existence.

IDE is a tool where you spend a good portion of your time and knowing its capabilities gives only benefits, it would be wise to get to know it properly, that's why JetBrains developed their own plugin/tool to help people to discover its features.

Marketplace link

What are your favourite plugins you recommend to use?

Happy codding🎉