DEV Community: Hossein Pousti

React Native Speech: A High-Performance and Feature-Rich Solution

Hossein Pousti — Thu, 06 Mar 2025 16:32:46 +0000

Let’s start with this: React Native is a fantastic framework for developing cross-platform applications, and it has evolved considerably over the years. One of the most significant changes is the new architecture. The React Native core team has been rewriting the entire framework’s architecture over the past three years. The first version to officially support the new architecture was 0.68, and by version 0.76, it became the default.

But why mention this first? With significant React Native updates, third-party libraries need to remain compatible while also leveraging the latest framework capabilities to build modern, high-performance utilities for the community.

Let’s skip the introduction and get to the main point. Today, I want to announce a new, high-performance, feature-rich library that brings text-to-speech capabilities to both Android and iOS.

React Native Speech Repository: https://github.com/mhpdev-com/react-native-speech

Preview

Android	iOS

What is React Native Speech?

The library is a high-performance TTS solution built for bare React Native and Expo, and it is compatible with both Android and iOS (requires the new architecture). It enables seamless speech management and provides events for detailed synthesis control.

In designing the library aimed to both Android and iOS have the same functionality, such as pause and resume features. (If you have prior experience with text-to-speech, particularly on Android, you’ll notice that unlike iOS, it doesn’t natively support these features, this library handles them for you)

Quick Access

To learn how to use the library and explore all its capabilities, check out the usage documentation. Below is quick access to it:

Installation

Bare React Native

Install the package using either npm or Yarn:

npm install @mhpdev/react-native-speech

Or with Yarn:

yarn add @mhpdev/react-native-speech

Expo

For Expo projects, follow these steps:

1 - Install the package:

npx expo install @mhpdev/react-native-speech

2 - Since it is not supported on Expo Go, run:

npx expo prebuild

Quick Start

import React from 'react';
import Speech from '@mhpdev/react-native-speech';
import {SafeAreaView, StyleSheet, Text, TouchableOpacity} from 'react-native';

const App: React.FC = () => {
  const onSpeakPress = () => {
    Speech.speak('Hello World!');
  };

  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={onSpeakPress}>
        <Text style={styles.buttonText}>Speak</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    padding: 12.5,
    borderRadius: 5,
    backgroundColor: 'skyblue',
  },
  buttonText: {
    fontSize: 22,
    fontWeight: '600',
  },
});

React Native Speech Repository: https://github.com/mhpdev-com/react-native-speech

I hope this article has been helpful and that the library assists you in your project.

Good Luck!

react-native-awesome-template: A React Native starter template to have a better product and development experience

Hossein Pousti — Sat, 27 Apr 2024 08:42:15 +0000

Today, I released version 2.0.0 (for React Native v0.74.0) of react-native-awesome-template, a simplified starter template for React Native. This template aims to enhance your app development experience by providing some configurations that helps you make fewer mistakes during the development process, specifically before committing or pushing to your project repository.

Introduction

When developing a real-world application, more careful consideration is required. This becomes even more apparent when a team, comprising developers with varying levels of expertise, works on a project.

Whether collectively or individually, maintaining the application necessitates adherence to specific rules to uphold project quality and minimize issues. Therefore, the purpose of this template, which centers on the development setup, is to aid in achieving the goal by providing essential configuration and addressing concerns, ultimately resulting in a better product.

Features

🐶 Configuring husky, a popular Git hook tool, simplifies the setup and management of pre-commit hooks. Currently, pre-commit, pre-push, and commit-msg hooks have configured.
💅 Configuring lint-staged allows for code linting before committing, ensuring that no errors make their way into the repository and enforcing consistent code style.
✍️ Configuring commitlint enables linting of commit messages, enforcing a consistent format that promotes clarity and understanding the changes made to your project.
🧹 Removing logs in production mode improves performance and prevents potential concerns that may arise from logging.
🗂️ Setting up configuration for paths with the @/ absolute prefix provides a better and more convenient experience when importing files.

Installation (Create New Project)

Step 1

npx react-native init MyApp --template react-native-awesome-template

Or specific version

npx react-native init MyApp --template react-native-awesome-template@1.6.0

Step 2

On the terminal in the project path run the following command to initialize Husky:

yarn prepare

//or

npm run prepare

I hope you find this template useful!

Check it out on GitHub: react-native-awesome-template

Easier way to make a responsive app: react native full responsive v2 is here!

Hossein Pousti — Tue, 13 Feb 2024 16:02:32 +0000

Almost a year ago, I wrote an article titled “How to make full responsive our React Native applications?” in which I discussed the necessity of responsiveness and the challenges that exist. I also announced the release of react-native-full-responsive version 1.x.x. Today, I would like to introduce a new feature that I recently had the opportunity to work on. This feature is part of the newly released version 2.1.0, and fills a void that had been strongly felt!

This feature involves the creation of a responsive stylesheet as easy as possible instead of using React Native StyleSheet.create method. But before we discuss this new feature, let’s have a brief introduction to the package.

The package makes it incredibly easy to create responsive apps that work seamlessly on various screen sizes in React Native. It covers aspects such as font size, width, height, and more, ensuring that everything appears visually appealing on any device, ranging from extra small to extra large. Additionally, you have the flexibility to fine-tune the scaling and adjust settings to achieve the desired appearance.

Features

Easy to use: Effortlessly implement size scaling and responsive design.
Cross-platform: Works seamlessly across multiple platforms and devices.
createRStyle method and useRStyle hook as alternatives to using StyleSheet.create for create stylesheets.
Various responsive hooks provided: Use these hooks based on your specific use cases.
Customizable scaling: Define base widths for specific dimension types (xs, sm, ... 2xl) for precise control.
Responsive percentage-based sizing: Adjust sizing based on width or height by PixelRatio.
Media query hook: Detect dimension types by using the useMediaQuery hook. You can also override default thresholds as needed. This hook can be used in the provider to automatically detect and respond based on the configurations.
Various responsive Higher-Order Components (HOCs) provided: Utilize these methods in your class components.
Written in TypeScript and fully typed.

Now that we are familiar with the package, let’s learn about createRStyle and useRStyle and delve a bit deeper into them!

createRStyle

Or better to say create responsive style, is a method used to generate a responsive stylesheet with specific patterns. react native full responsive offers three main methods: responsive scale (rs), responsive width (rw), and responsive height (rh). By specifying the value using number(rs|rw|rh) pattern, you can easily achieve a responsive style for a particular property. To illustrate this concept more clearly, and have a good vision to compare with StyleSheet.create please refer to the following example:

import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FRProvider, createRStyle } from 'react-native-full-responsive';

const SIZE = 20;

const Box: React.FC = () => {
  return (
    <View style={styles.box}>
      <Text style={styles.textBold}>without react-native-full-responsive</Text>
    </View>
  );
};

const ResponsiveBox: React.FC = () => {
  return (
    <View style={rStyles.box}>
      <Text style={rStyles.textBold}>with react-native-full-responsive</Text>
    </View>
  );
};

export default function App() {
  return (
    <FRProvider type="sm">
      <View style={styles.container}>
        <Box />
        <ResponsiveBox />
      </View>
    </FRProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    height: SIZE * 3,
    marginVertical: SIZE,
    justifyContent: 'center',
    backgroundColor: 'orange',
    paddingHorizontal: SIZE / 2,
  },
  textBold: {
    fontWeight: 'bold',
    fontSize: SIZE,
  },
});

const rStyles = createRStyle({
  box: {
    height: `${SIZE * 3}rs`,
    justifyContent: 'center',
    backgroundColor: 'yellow',
    marginVertical: `${SIZE}rs`,
    paddingHorizontal: `${SIZE / 2}rs`,
  },
  textBold: {
    fontWeight: 'bold',
    fontSize: `${SIZE}rs`,
  },
});

For the number mentioned in the pattern, you can also use signed numbers (integer or float). Therefore, for a more detailed pattern, it follows the format:

(+|-)(integer|float)(rs|rw|rh)

createRStyle also accepts a second argument, which is include:

width

To use custom dimensions width for the calculation

height

To use custom dimensions height for the calculation

scaleConfig

To use a specific responsive scale method configuration for applying when using rs for style properties to specify the current type and custom bases, familiarize yourself with the type and bases by checkinghere

method

To specify the parsing styles method, in this case, the recursive method is generally faster than the linear method (although the algorithm is not strictly linear, it has the potential for linear time complexity and is called linear). However, for deep and large structured objects, the linear algorithm may be more appropriate.

Possible values: recursive | linear

Default: recursive

When using the linear method, it parses the style by using a loop iteration and an inner stack instead of direct recursion. However, as mentioned above, the recursive method is faster for this purpose.

useRStyle

A hook is provided for createRStyle to create a dynamic responsive scale. This hook generates a new style when there are changes in dimensions, the parsing method, type, or bases. It requires two arguments:

The first argument is the style
The second argument is the parsing method which is optional and the default is recursive

An example:

import * as React from 'react';
import { View, Text } from 'react-native';
import { FRProvider, useRStyle } from 'react-native-full-responsive';

const SIZE = 20;

const ResponsiveBox: React.FC = () => {
  const styles = useRStyle({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    box: {
      height: `${SIZE * 3}rs`,
      justifyContent: 'center',
      backgroundColor: 'yellow',
      marginVertical: `${SIZE}rs`,
      paddingHorizontal: `${SIZE / 2}rs`,
    },
    textBold: {
      fontWeight: 'bold',
      fontSize: `${SIZE}rs`,
    },
  });

  return (
    <View style={styles.container}>
      <View style={styles.box}>
        <Text style={styles.textBold}>My awesome responsive text!</Text>
      </View>
    </View>
  );
};

export default function App() {
  return (
    <FRProvider type="sm">
      <ResponsiveBox />
    </FRProvider>
  );
}

I hope this package helps you achieve better results and improves your development experience for responsiveness in React Native

Github repo: https://github.com/Mhp23/react-native-full-responsive

Usage documentation: https://github.com/Mhp23/react-native-full-responsive/blob/main/USAGE.md

Story of React Native Fast Base v2!

Hossein Pousti — Tue, 01 Aug 2023 19:41:49 +0000

⭐️ Highly customizable - Responsive UI - Dark/Light mode support ⭐️

More than two years ago, I decided to write a package and the name that came to mind was Fast Base. The purpose of the package was to help users develop their apps faster and easier, and to ensure that the components they use in their apps are efficient enough.

Recently, I decided to be more active in the open-source community, and on the other hand, I didn't achieve the goal I wanted in v1 (should add for v2 also there is a lot of room for improvement). So, in the two months that have passed, I decided to rewrite, improve, and add cool features to it, and try to maintain the project in my free time. But please don't misunderstand me! Many hands make light work! I welcome any contribution, and your help and support will help to make a better package and, as a result, will help more developers.

Project Repo

Documentation

Features

Cross-platform (Android, iOS, and Web also support for both bare React Native and Expo)
Easy to use
Responsive UI
Highly customizable
Highly themeable
Written by Typescript, fully typed, and extendable
Dark/Light mode support
Attractive components

Using the colors property, extend your theme for both light and dark modes, etc (For more info click here)

Now that I'm writing this article Fast Base has 9 components but more packages will be added.

In the end, here are awesome UI libraries for React Native like react-native-elements, native base, etc. but I suggest checking it out and might be useful for you.

Don't forget to 🌟 the project if you find it useful!

Updated on Saturday, 20 August 2023

The Icon component was removed in version V2 because it was being used from react-native-vector-icons, which does not support Expo by default. One of the most important goals of Fast Base is to be fully compatible with both bare React Native and Expo. I promised to add the icon to the project, but I convinced myself that it’s better for it to be an independent project. Hence, Fast Base icons are now available!

Repository: https://github.com/Mhp23/fast-base-icons

Explore available icons: https://mhp23.github.io/fast-base-icons

Fast Base icons help you incorporate a modern and stylish icons from BoxIcons and Feather into your app. All icons are based on SVG and are fully supported wherever react-native-svg is supported!

Features

Cross-platform
Easy to use
Responsive
Customizable
Attractive and widely used icons

Good Luck!

How to make full responsive our React Native applications?

Hossein Pousti — Mon, 27 Mar 2023 08:05:13 +0000

Why we should to use responsive methods in our apps?

Whether you have started React Native recently or you are a senior React Native developer, responsiveness is always a serious and required problem in mobile app development. Like web development, the subject is so important and inevitable in mobile apps. Although React Native uses density independent pixels (known as briefly dp), it hasn’t the same behave on different devices.

What we can do to make our applications responsive (layouts, fonts etc) and have easy development? In the following I’ll show you how you are able to have the both of those together.

How to implement it?
There are different packages to help us make our apps responsive, today I’m going to show you that with react-native-full-responsive.

Installation
First install the package by package manager that you like:

npm install react-native-full-responsive --save
//or
yarn add react-native-full-responsive

After installing it, depending on whatever you like that you capable of to import methods to your component:

//the first way
import {
  responsiveScale,
  responsiveWidth,
  responsiveHeight,
  useResponsiveDim,
  useResponsiveScale,
  useResponsiveWidth,
  useResponsiveHeight,
} from 'react-native-full-responsive';
//or briefly
import {
  rs,
  rw,
  rh,
  useRD,
  useRS,
  useRW,
  useRH,
} from 'react-native-full-responsive';

responsiveScale
Will scale the passed size (depending on what is user device dimensions) and return scaled value, it get three arguments but just first argument is required and second and third arguments just when required that you want to add event listener for dimensions and pass the new dimensions (example portrait to landscape or vice versa) but if you use functional programming you are be able to use useResponsiveScale hook and there aren’t more steps and just pass the size you want scale that.

const fontSize = responsiveScale(SIZE, SCREEN_WIDTH, SCREEN_HEIGHT); //or rs(SIZE, SCREEN_WIDTH, SCREEN_HEIGHT);
//hooks
const fontSize = useResponsiveScale(SIZE); //or useRS(SIZE);

responsiveWidth and responsiveHeight
Usage of these like responsiveScale but those just get two arguments that first required and second argument for responsiveWidth is custom screen width and for responsiveHeight is custom screen height, like I explained above you can use that.

const responsiveWidth = responsiveWidth(SIZE, SCREEN_WIDTH); //or rw(SIZE, SCREEN_WIDTH);
const responsiveHeight = responsiveHeight(SIZE, SCREEN_HEIGHT); //or rh(SIZE, SCREEN_HEIGHT);
//hooks
const responsiveWidth = useResponsiveWidth(SIZE); //or useRW(SIZE);
const responsiveHeight = useResponsiveHeight(SIZE); //or useRH(SIZE);

Also there is useResponsiveDim hook when you need to have both useResponsiveWidth and useResponsiveHeight together:

const responsiveHeight = useResponsiveDim(WIDTH, HEIGHT); //or useRD(WIDTH, HEIGHT);

useResponsiveMethods

Sometimes you want to use a responsive scale, responsive width or height inside your component more than once and you want both sizes for portrait and landscape mode, so this hook will be the solution and it will return to you rs, rw and rh methods:

import { useResponsiveMethods } from 'react-native-full-responsive'; //or useRM
//…
const {rs, rw, rh} = useResponsiveMethods();

An example:

import * as React from 'react';

import { StyleSheet, View, Text } from 'react-native';
import { rh, rs, useRS } from 'react-native-full-responsive';

const SIZE = 20;

export default function App() {
 const fontSize = useRS(SIZE);

 return (
   <View style={styles.container}>
     <View style={styles.box}>
       <Text style={[styles.textBold, { fontSize: SIZE }]}>
         without react-native-full-responsive
       </Text>
     </View>
     <View style={styles.responsiveBox}>
       <Text style={[styles.textBold, { fontSize }]}>
         with react-native-full-responsive
       </Text>
     </View>
   </View>
 );
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center',
 },
 box: {
   height: SIZE * 3,
   marginVertical: SIZE,
   justifyContent: 'center',
   backgroundColor: 'orange',
 },
 responsiveBox: {
   height: rh(SIZE),
   justifyContent: 'center',
   marginVertical: rs(SIZE),
   backgroundColor: 'yellow',
 },
 textBold: {
   fontWeight: 'bold',
 },
});

At the end recommended to use responsiveScale (rs) for creating responsive font, padding and margin also for width use at responsiveWidth (rw) also for height, use at responsiveHeight (rh).

Good Luck!