DEV Community: Brian jacob

React Native Scaler: Perfecting App Aesthetics Across Multiple Devices

Brian jacob — Sat, 13 Apr 2024 20:37:17 +0000

React-Native-Scaler

react-native-scaler is a library that provides a set of scaling functions to help you make your React Native app responsive. It exports an initScalers function that returns four scaling functions: scaleWidth, scaleHeight, moderateScaleWidth, and moderateScaleHeight.

Installation



npm install react-native-scaler



yarn add react-native-scaler

Initialization

Import the initScalers function from the react-native-scaler library and initialize it with the base width and height of your design layout.



import { initScalers } from 'react-native-scaler';

const { scaleWidth, scaleHeight, moderateScaleWidth, moderateScaleHeight } =
  initScalers(350, 680);

The numbers 350 and 680 represent the base width and height (in dp) of your design layout. You can adjust these values according to your needs.

You can also initialize without passing any arguments, in which case the default base width and height will be used.



const { scaleWidth, scaleHeight, moderateScaleWidth, moderateScaleHeight } =
  initScalers();

Additionally, you can use the shorthand notation for the scaling functions:



const { sw, sh, mw, mh } = initScalers();

Usage

After initialization, you can use the scaling functions in your components to scale dimensions according to the device's screen size.



const styles = StyleSheet.create({
  container: {
    width: sw(50), //same as scaleWidth(50)
    height: sh(100), //same as scaleHeight(100)
  },
});

You can also use the moderateScaleWidth and moderateScaleHeight functions with an optional factor. For example:



const styles = StyleSheet.create({
  container: {
    width: mw(50, 0.3),
    height: mh(100, 0.7),
  },
});

Functions

The initScalers function returns four scaling functions:

scaleWidth (sw): Scales a value based on the device's screen width.
scaleHeight (sh): Scales a value based on the device's screen height.
moderateScaleWidth (mw): Provides moderate scaling based on the device's screen width. It takes two parameters: size and an optional factor.
moderateScaleHeight (mh): Provides moderate scaling based on the device's screen height. It takes two parameters: size and an optional factor.

Each of these functions takes a number as an argument and returns a scaled number.

ScaledSheet

The ScaledSheet is a special feature of react-native-scaler that allows you to automatically apply the scale functions in your stylesheets. It takes the same styles object as a regular StyleSheet, but with an optional annotation that applies the scale functions for you.



const { ScaledSheet, scaleWidth } = initScalers();

const styles = ScaledSheet.create({
  container: {
    width: '50@sw', //same as scaleWidth(50)
    height: '100@sh', //same as scaleHeight(100)
  },
});

In the above example, 50@sw applies the scaleWidth function to the size 50, and 100@sh applies the scaleHeight function to the size 100.

You can also use @mw and @mh to apply moderateScaleWidth and moderateScaleHeight respectively, with a resize factor of 0.5. If you want to specify a different resize factor, you can do so by appending it after @mw or @mh, like 50@mw0.3.

Here is an example of using ScaledSheet with moderateScaleWidth and moderateScaleHeight with a resize factor:



const styles = ScaledSheet.create({
  container: {
    padding: '10@mw0.3', // = moderateScaleWidth(10, 0.3)
    width: '50@mw', // = moderateScaleWidth(50)
    padding: '2@mw', // moderateScaleWidth(2)
  },
});

Best Practices

It's recommended to initialize the scaler in a specific file or hook, so it can be reused across different components, instead of initializing it in every page. Here's an example of how you can do this:



// scaler.js
import { initScalers } from 'react-native-scaler';

export const { sw, sh, mw, mh, ScaledSheet } = initScalers();

Then, in your component file, you can import the scaling functions and ScaledSheet from scaler.js:



// MyComponent.js
import { sw, sh, mw, mh, ScaledSheet } from './scaler';

const styles = ScaledSheet.create({
  container: {
    width: '50@sw',
    height: '100@sh',
  },
});

React Native TypeScript Boilerplate ( 2024 )

Brian jacob — Sun, 31 Jul 2022 06:09:00 +0000

React Native TypeScript Boilerplate 2024 – There are many resources available online for developers looking to use boilerplates to streamline the process of building React Native apps. These boilerplates can come in the form of CLI templates or npm libraries, and some are even based on TypeScript. While it is not common to find React Native boilerplates that are TypeScript-based, there is a demand for these types of tools among developers who prefer to work with TypeScript in their React Native projects. In this article, we will explore the different types of React Native boilerplates and discuss the benefits of using them.

In this article, I will not only discuss the various types of React Native boilerplates, but I will also provide a tutorial on how to use them. I will include links to the libraries and GitHub repositories so you can easily access and implement these tools in your own projects.

Best React Native Typescript Boilerplate 2024

TypeScript is a programming language that is based on JavaScript and includes features such as strong typing and object-oriented programming concepts. These features can make it easier for developers to build complex applications, but some people find that the requirement to specify the types of variables and functions can be tedious. Despite this, many developers appreciate the benefits of using TypeScript, such as improved code quality and fewer runtime errors.

Using TypeScript can have several benefits for developers. One of the main features of TypeScript is the requirement to specify the type or interface for every variable or function that is created.

This helps to ensure that the variables and parameters being used are consistent with their declared type, which can improve code quality and reduce the risk of runtime errors. When a different value or parameter is added to a type that has already been declared, TypeScript will check for any discrepancies and throw an error if it detects a problem. Overall, this strict type-checking system helps to ensure that code is more reliable and easier to maintain.

React Native Typescript boilerplate with Redux

TypeScript's strict type-checking system can be helpful in preventing bugs from appearing in the future. Now, let's return to the topic of React Native Boilerplates. I have recently created a Boilerplate for React Native that is based on TypeScript. Like other Boilerplates, this one is very basic and includes the essentials for starting a new React Native project. By using this TypeScript-based Boilerplate as a starting point, you can easily add any necessary libraries as you build your app from scratch. This can save time and effort in the long run, as you won't have to set up a basic Boilerplate from scratch each time you start a new project.

Checklist for React-Native Boilerplate TypeScript

Here I will review it again. What do you need to make a react native boilerplate?

Navigation: It serves to navigate between screens. The most popular is react-navigation.
State Management: what is popular here is the redux toolkit. You can also use MOBX or Zustand.
React hooks: React provides react hooks that make managing the lifecycle easier. For additional hooks in the fetch API, there’s also react-query that you can also use.
React Native icon: icon is an essential thing in making an application. Without the icon, the application will feel like a blank newspaper. So I recommend using the react native vector icon, or you can also use your local icon.

Luckily, the React Native Boilerplate I will share with you already covers the basics needed to build a React Native app. The versions of all the libraries are up to date, so you don’t have to worry.

Installation and How to Use React Native Typescript boilerplate

In the first step, just run the code below:


 react-native init MyAppName --template @handidev/react-native-typescript-boilerplate

As a note, replace the word MyAppName with the application name you want.

Next, after everything is successful, the next step is to run the React Native application based on the platform you choose.
for the iOS version, run:



yarn ios

For the Android version, run:



yarn android

Yes, it’s that simple. If you have any problems with the installation, don’t hesitate to contact me on Github.

Link to library react-native-typescript-boilerplate NPM: https://www.npmjs.com/package/@handidev/react-native-typescript-boilerplate

Link to react-native typescript boilerplate GitHub repository: https://github.com/handi-dev/react-native-typescript-boilerplate

Possible Error and solutions:

Error /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems.rb:283:in find_spec_for_exe: Could not find 'bundler' (2.1.4) required by your /Users/username/DEVELOPER/MyAppName/Gemfile.lock. (Gem::GemNotFoundException)
To update to the latest version installed on your system, run bundle update --bundler. To install the missing version, rungem install bundler:2.1.4from /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/2.6.0/rubygems.rb:302:in activate_bin_path from /usr/bin/bundle:23:in <main>

✖ Installing Bundler
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.

Solution:

follow step below:

brew install rbenv
rbenv install 2.7.5
rbenv local 2.7.5
export PATH="$HOME/.rbenv/shims:$PATH"

source: React Native TypeScript Boilerplate 2023

How to Solve React Native Build Failed on M1 Macbook Pro / Air

Brian jacob — Sun, 27 Jun 2021 19:13:00 +0000

Apple has just released its newest Macbook series using Apple's M1 chip. It offers better speed, both in performance and battery life.

In this case, developers are interested in flocking to replace their old MacBook with the M1 chip. However, in addition to the advantages of the MacBook Pro M1, there are shortcomings in terms of application development. Some applications are not yet compatible with this Apple M1 chip.

How to Set up, Build, and Run a React Native App on Macbook Pro M1 Chip

React Native is a JavaScript framework that allows native iOS and Android applications to be rendered. It makes creating two applications on different platforms more straightforward with one source code. One of the difficulties faced in developing React Native applications through MacBook Pro / Macbook Air with this M1 chip is when we want to build/run the application.

Many developers have experienced failure building react native applications through this MacBook M1.
However, don't worry because I will share tips for you to deal with errors when making an iOS application on a MacBook Pro or MacBook Air M1 Apple Silicon chip.

React Native Build Failed on Macbook Pro M1

maybe you are unable to run react-native run-ios on M1 Macbook. The error output that you will get when you build react native iOS is as below:



The following build commands failed:
CompileC /Users/[username]/Library/Developer/Xcode/DerivedData/reactNativeBoilerplate-atkaxzsfrfdlfocjvyvemwywinew/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/Flipper-Folly.build/Object. Users/[username]/[folder-path]/ios/Pods/Flipper-Folly/folly/synchronization/DistributedMutex.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)

Solution to Run and Build React Native on M1 Macbook Pro

The solution to React Native build failure on M1 Macbook is to use Rosetta. What is rosetta?

Rosetta is a dynamic binary translator developed by Apple Inc. for macOS, an application compatibility layer between different instruction set architectures. It gives developers and consumers a transition period to update their application software to run on newer hardware by "translating" it to run on the different architecture.

If you're using a MacBook Pro/Air with an M1/Apple silicon chip, you might be asked to install Rosetta to open an app.

Set Terminal App to use Rosetta:. Select the app in Finder. Applications/Utilities/Terminal (App terminals). From the File menu in the menu bar, choose Get Info. Make a checklist on: ( Open Using Rosetta ). See the image below.

Set Xcode to use Rosetta:. Select the Xcode app in Finder. Applications/Xcode (Xcode App). From the File menu in the menu bar, choose Get Info. Make a checklist on ( Open Using Rosetta )

Delete the necessary folders so the build process can be successful and smooth.
- delete the Pods/ folder in your-project-dir/ios/Pods
- delete podfile.lock in -> your-project-dir/ios/Podfile.lock
If you use the old code of React Native, or if you experience an error like what I said the first time, you can follow the next steps below. However, if you've just built react Native init on your MacBook M1, that shouldn't be a problem, and you should be able to build the React native ios on your MacBook smoothly.
The next step is to modify the Podfile in the iOS folder. your-project-dir/ios/Podfile. navigate to your react native project, and open it in the editor.

Find code below: ( your-project-dir/ios/Podfile )



use_flipper!()

And, replace with:



use_flipper!({ 'Flipper-Folly' => '2.5.3', 'Flipper' => '0.75.1', 'Flipper-RSocket' => '1.3.1' })

The next step, install React native project as usual. Navigate to the root project directory, and run: ```bash

npx pod-install


7. Next, run npx react-native run-ios from your terminal.
```bash


npx react-native run-ios

The above method should be smooth and run well on iOS Emulator. Good Luck!
original article: handi.dev

React Native Boilerplate 2024

Brian jacob — Sat, 05 Dec 2020 10:27:00 +0000

React native boilerplate 2024: React Native is a framework for building native mobile applications using JavaScript. It allows developers who are familiar with JavaScript to build apps that can run on both Android and iOS platforms using the same codebase. This can be a great time-saver for developers who want to build apps that can be used on multiple platforms, as they can use their existing knowledge of JavaScript to do so. Additionally, because React Native uses native components to render the user interface, the apps that are built with it have a native feel and perform well on mobile devices.

Latest version: React Native 0.73.1.

Debugging Improvements
Stable Symlink Support in Metro
Kotlin Template on Android
Android 14 Support
New Architecture Updates
Deprecated Debugging Features

Updated info of Library & package version of this React Native Boilerplate:

"react-native": "0.73.1",
"@react-native-masked-view/masked-view": "^0.3.1",
"@react-navigation/bottom-tabs": "^6.5.11",
"@react-navigation/material-top-tabs": "^6.6.5",
"@react-navigation/native": "^6.1.9",
"@react-navigation/native-stack": "^6.9.17",
"@react-navigation/stack": "^6.3.20",
"react": "18.2.0",
"react-native-gesture-handler": "^2.14.0",
"react-native-pager-view": "^6.2.3",
"react-native-safe-area-context": "^4.8.2",
"react-native-screens": "^3.29.0",
"react-native-tab-view": "^3.5.2",
"react-native-vector-icons": "^10.0.3"

React-Native Boilerplate 2024

One common problem when developing stable apps is managing the structure of the files and folders in your project. It's important to follow best practices for organizing your code, and to only use libraries that are necessary for your project. Avoid installing libraries that you don't actually use in your code. Instead, it's better to remove any unnecessary libraries from your project.

Criteria for the Best React Native Boilerplate

If you are starting a new React Native project from scratch, it can be helpful to use a boilerplate. A boilerplate is a pre-built project structure that follows best practices and is optimized for performance.

There are many different React Native boilerplates available, and it's important to choose one that is regularly updated. This is because libraries and the React Native framework itself are constantly being updated, so an outdated boilerplate may not be compatible with the latest versions.

To find a reliable boilerplate, you can check the change log on the repository of the boilerplate you are considering, to see how often it is updated.

Using an old, unmaintained boilerplate template for your React Native project can lead to poor performance and compatibility issues. To ensure that your app runs smoothly and is free of any problems, it's important to use a boilerplate that is actively maintained and kept up-to-date with the latest changes in the React Native framework and libraries. Cloning an outdated boilerplate template could cause issues with your code and negatively impact the overall performance of your app.

A good React Native boilerplate should include the following features:

1. Navigation.

React Navigation is a popular library that is often used to navigate between pages or screens in a React Native app. Many developers rely on this library to provide an easy and efficient way to navigate within their apps.

2. State Management.

There are several libraries that can be used for managing global state in a React Native app. These libraries allow you to store data that can be accessed from any screen in your app. Two popular options for managing global state are Redux and Redux Toolkit, as well as MobX. These libraries can help you centralize and manage your app's data more efficiently.

3. React Hooks

In addition to traditional React class, developers can also use the latest React Hooks to build their React Native apps. Some developers may also prefer to use a boilerplate that integrates react native boilerplate with typescript, which is a programming language that adds static type checking to JavaScript. Whether you choose to use Hooks or TypeScript is a matter of personal preference and the specific needs of your project.

4. React Native Icon

Icons are a common element of many React Native projects, as they can help improve the appearance of an app. To use icons in your project, you can use the react-native-vector-icons library, which provides a wide variety of customizable icons. Alternatively, you can also import your own local icons and use them in your app.

Keep in mind that every project has different requirements, so it's important to choose a boilerplate that is simple and flexible. You can always add additional libraries as needed to support new features in your project.

As a React Native engineer with almost three years of experience, I have developed a boilerplate that I can use in any project. This boilerplate is simple and includes only the necessary libraries, as well as a well-organized folder structure. If you are starting a new React Native project, you may find this boilerplate helpful as it can provide a solid foundation for your project.

I am willing to share my boilerplate with you and provide instructions on how to use it in your project.

Quick start

To create a new project using the boilerplate, run :

npx react-native init MyApp --template @handidev/react-native-boilerplate

If you prefer to use the TypeScript version of the boilerplate, you can run the following command:

npx react-native init MyApp --template @handidev/react-native-typescript-boilerplate

Note: Make sure to replace MyApp with the desired name for your app. If you have all the necessary requirements installed, you can run the project by using the following command:

yarn start / npm start -- -- reset-cache to start the metro bundler, in a dedicated terminal
npx react-native run-ios / npx react-native run-android to run the platform application (remember to start a simulator or connect a device)

If you got an error like: The version of CocoaPods used to generate the lockfile (x.x.x) is higher than the version of the current executable (x.x.x), then you can upgrade your cocoapods version.

If you install cocoapods using homebrew, you can use this command: brew upgrade cocoapods if that does not work, try brew install cocoapods

If you previously installed using gem then use this command and run on your terminal: sudo gem install cocoapods

Make sure your cocoa pods version is updated after a run that command.

To check your current version of cocoapods, run pod --version

After that, don't forget to execute in your terminal pod repo update

And finally, run npx pod install. The solutions above must solve those methods that problem.

If none of the above steps are successful, you can try this last method: Remove the Podfilelock file from the ios folder and then run the npx pod-install command. This may resolve any issues you are experiencing with running your React Native project.

Start the packager with npm start
Connect your device or use an emulator that's installed on your PC
Run the test application:
On Android: Run npx react-native run-android
On iOS: Open npx react-native run-ios

I hope that this boilerplate will be helpful for you. If you have any questions or need assistance, you can find me on Github.

Please consider forking and starring the repository if you find it useful. For complete installation instructions, you can visit the React Native Boilerplate 2024 Github repository.

React Native Boilerplate Javascript version:

https://github.com/handi-dev/react-native-boilerplate#quick-start

React Native Boilerplate TypeScript version:

https://github.com/handi-dev/react-native-typescript-boilerplate#readme

original article: React-Native Boilerplate 2024