DEV Community: Numan

Create a React Native sub-component from Component.

Numan — Mon, 13 Sep 2021 21:03:05 +0000

Create a React Native sub-component from Component.

React Native Component Splitter

it is a VS CODE extension which allows us to split React components into sub-components

Usage

1. Select the code you want to split to a new sub-component.

2. Choose Split Component from the Right-Click Menu / Command Palette.
or press alt+option+cmd+k

3. Enter a name for the new sub-component.

Shortcut keys

Plateform	Key
MAC	alt+option+cmd+k
MAC	ctrl+shift+k

Installation

https://marketplace.visualstudio.com/items?itemName=nomi9995.react-native-component-splitter

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Numan
🚇 💻

If you really learned something new with this article, save it and share it with your colleagues.

You can reach me out on my website:
https://numan.dev

What's new in React 18 ?

Numan — Mon, 23 Aug 2021 11:15:32 +0000

While there is still a lot more to come, I thought may be fascinating to share its top new features.

Automatic batching

Batching in React is whenever multiple state updates are combined into a single re-render.

function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet

    // React will only re-render once at the end (that's batching!)

  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

In this example, the component would only be rendered once after handleClick is called, Although we might think setCount and setClicked would trigger two re-renders.

Now, while this works well at the moment,

if you’re calling multiple state updates in a different context such as a promise or a callback.

// Promise
fetchSomething().then(()=> {
    setCount(count+1);
    setFlag(true);
})

//callback or timeout
setTimeOut(()=>{
    setCount(count + 1);
    setFlag(true);
})

React won’t batch these two updates into one and you’ll get two re-renders when only one would have been needed.

With React 18, all these use-cases will now be covered and state updates will be batched automatically no matter what’s the context.

import {unstable_batchedUpdates} from 'react-dom';
unstable_batchedUpdates(() => {
    setCount(count + 1);
    setFlag(true);
})

//React 18 will do it for you by default.

This might remind you of unstable_batchedUpdates that was doing exactly this, well now, React will do it for you by default.

How to stop batching ?

If you happen not to want these updates to be batched, you’ll need to use flushSync that will re-render your component every time it’s done running the function you’re passing it to.

import {flushSync} from 'react-dom';

function handleClick(){
    flushSync(()=> {
            setCount(count + 1);
    });
    // React has re-render

    flushSync(()=> {
            setFlag(true);
    });
    // React will re-render
}

So with the following, your component would render twice instead of just one time.

Transitions

A really big new feature, which allows you “to tell React which updates are urgent, and which are not”.

A good example of that is a search input that should filter out a list of elements.

So if you’re updating a search input, you’d want its value to change as we type, Although the search results might appear in a second

phase when we’re done typing.

import {startTransition} from 'react';

//Urgent : Update input value as type
setInputValue(input);

startTransition(()=>{
    //Secondary: Show the search results
    setSearchQuery(input)
});

This is where we could mark the input value change as an urgent update, and the elements filtering as secondary also called now a transition.

Transitions can be interrupted by urgent updates and previous transitions that are no longer relevant will be dismissed.

This allows the user interface to only show its most up-to-date state and skip secondary updates, transitions, that might be slower

to compute and sometimes return intermediate states that are irrelevant.

As you can see here, we’re marking the input value change as urgent, and run our secondary update inside a transition as it might trigger slow computations and could freeze or slow down the whole user experience as we type.

startTransition is great for any update “you want to move to the background” such as slow and complex rendering tasks or when

updates rely on fetching data that might take time due to a slow network.

Suspense and Server-Side Rendering

The way SSR ( Server side rendering ) works is by rendering all the

components on the server first, then sending the result as HTML to the browser.

After that, the JavaScript is loaded as usual and the HTML magically becomes interactive by what is called hydration.

This turns your static HTML elements into your dynamic React components as you know them.

Problem?

The main problem with this approach is that as long as the JavaScript hasn’t been fetched, loaded, and your HTML hydrated, your page won’t be interactive.

To solve this waterfall issue, React 18 now offers two new features for SSR:

Streaming HTML and Selective Hydration

Streaming HTML

Streaming HTML means that the server can send pieces of your components as they get rendered.

This works by using Suspense, where you’d say which parts of your application will take longer to load and which ones should be rendered directly.

<Page>
    <Article />
    <Suspense fallback={<Loader />}>
         <Comments />   
    </Suspense>
</Page>

If you think of an article with comments where the article is the critical part of the page, you could say load the article but don’t

wait for the comments to be ready to send HTML to the browser.

You could show a spinner instead using Suspense and once the comments are ready,

React will send new bits of HTML that will replace the spinner in place.

Selective hydration

Selective hydration is awesome.

Where before you’d have to wait for every component to be rendered to begin hydration, but now components wrapped with Suspense won’t block hydration anymore.

if we go back to our article page, the comments that we wrapped with Suspense won’t block the article and other components to be hydrated.

Every ready component will start hydrating and the comments will too, once the browser gets both its content and JavaScript code.

The most important feature of selective hydration

is that if you happen to interact with one of the components before it’s been fully hydrated, meaning you click somewhere, for example, React will prioritize this component’s hydration.

This ensures that the most critical interactions are to be repeated as soon as we can hydrate the related component, making sure it’s

hydrated before the others.

Thank you for reading.

If you really learned something new with this article, save it and share it with your colleagues.

You can reach me out on my website:
https://numan.dev

react-native-bottomsheet-reanimated

Numan — Sun, 12 Jul 2020 07:27:14 +0000

react-native-bottomsheet-reanimated

Highly configurable component imitating native bottom sheet behavior, with fully native 60 FPS animations!

Built from scratch with react-native-interactable-reanimted and react-native-reanimated.

Usable with Expo with no extra native dependencies!

Installation

Open a Terminal in the project root and run:

yarn add react-native-bottomsheet-reanimated

or if you use npm:

npm install react-native-bottomsheet-reanimated

If you are using Expo, you are done.

If you don't use Expo, install and link react-native-gesture-handler and react-native-reanimated.

Usage

import BottomSheet from "react-native-bottomsheet-reanimated";

class Example extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <BottomSheet
          bottomSheerColor="#FFFFFF"
          // backDropColor="red"
          ref="BottomSheet"
          initialPosition={"50%"}  //200, 300
          snapPoints={snapPoints}
          isBackDrop={true}
          isBackDropDismisByPress={true}
          isRoundBorderWithTipHeader={true}
          // isModal
          // containerStyle={{backgroundColor:"red"}}
          // tipStyle={{backgroundColor:"red"}}
          // headerStyle={{backgroundColor:"red"}}
          // bodyStyle={{backgroundColor:"red",flex:1}}
          header={
            <View>
              <Text style={styles.text}>Header</Text>
            </View>
          }
          body={
            <View style={styles.body}>
              <Text style={styles.text}>Body</Text>
            </View>
          }
        />
    </View>)
  }
}

Props

name	required	default	description
snapPoints	yes		E.g. `[300, 200, 0]`. Points for snapping of bottom sheet coomponent. They define distance from bottom of the screen. Might be number or percent (as string e.g. `'20%'`) for points or percents of screen height from bottom. Note: Array values must be in descending order.
initialPosition	no	0	Determines initial position point of bottom sheet. The value outside of snap points.
body	no		Method for rendering scrollable content of bottom sheet.
header	no		Method for rendering non-scrollable header of bottom sheet.
isBackDrop	no	`false`	for show backdrop behind the bottom sheet.
isBackDropDismisByPress	no	`false`	enable to move bottomsheet to first snappoint by pressing backdrop.
isRoundBorderWithTipHeader	no	`false`	give round with tip header style to bottomsheet.
isModal	no	`false`	to make bottom sheet like modal.
isAnimatedYFromParent	no		If `true` then give animated value to `animatedValueY` props.
animatedValueY	no		If isAnimatedYFromParent will be `true` then it will give animtedY value to `animatedValueY` props.
bottomSheerColor	no	`#ffffff`	for background color of bottom sheet.
tipStyle	no		for change style of tip. it is dependted on `isRoundBorderWithTipHeader`.
headerStyle	no		for change style of header.
bodyStyle	no		for change style of body.

Methods

`snapTo(index)`

Imperative method on for snapping to snap point in given index. E.g.

// Snap to the snap point at index 0 (e.g. 450 in [450, 300, 0])
this.refs.BottomSheet.current.snapTo(9)

Here this.refs.BottomSheet refers to the ref passed to the BottomSheet component.

Example

More complex examples can be found in the Example folder. To view the examples in the Expo app, open a Terminal and run:

yarn
cd Example
yarn
expo start

Make Tangible symlinks (npm)

Numan — Sun, 28 Jun 2020 19:19:23 +0000

I have made CLI for make Tangible symlinks.
https://www.npmjs.com/package/mtsl

Make Tangible symlinks

Mtsl listens to changes in some folder (using Chokidar) and copies changed files into another folder.

Working

Actually, it is watcher CLI that copy files from source to destination

Why Mtsl not other packages?

There are other tangible symlink packages available but every package has so many bugs. famous package is wml but that have many bugs. This package is working as required

Let's face it, sometimes symbolic links just aren't enough. Github has more than 80K issues with the words "support for symlinks" in them.

Mtsl is a CLI tool that works pretty much like ln -s [src] [dest]. You first set up your links by using the mtsl add -s [src] -d [dest] command and then run the mtsl service (mtsl start <linkId>) to start listening. link index can be get from mtsl list That's it!

Note that since Mtsl is based on Chokidar it does not support symlinks. lol.

Install

npm install -g mtsl

Usage

# add the link to mtsl using `mtsl add -s <src> -d <dest>`
mtsl add -s ~/source-dir -d ~/User/destination-dir

output

Added link: (0) /Users/username/source-dir -> /Users/username/User/destination-dir

# above command will give you link id what will use to start watching link that is added
mtsl start 0

OR

make start symlink without add link

# it is same as `mtsl start` but it starts to make symlink without adding the link
mtsl startwithoutadd -s <src> -d <dest>

Commands

add

mtsl add -s <src> -d <dest>
(or mtsl add -s <src> -d <dest> -skip-prompt)

Adds a link.

mtsl will not start listening to changes until you start it by running mtsl start <linkId>.

Each link is given an unique id, you can see all links and their ids by running mtsl list.
Links are saved to src/links.json in your mtsl install directory, meaning that
your configuration is specific to that mtsl install.

remove

mtsl remove <linkId>

Removes a link.

remove all

mtsl removeall

Removes all link that made by using mtsl add.

start

mtsl start <linkId>

Starts mtsl.

It first copies all watched files from source to destination folder and then waits for new changes to happen.

startwithoutadd

mtsl startwithoutadd -s <src> -d <dest>

Starts mtsl without add link.

it is same as mtsl start but it starts to make symlink without adding the link.

list

mtsl list

Lists all links.

Shows each link's id and source/destination folders.

Miscellaneous

Ignored folders

When adding a new link Mtsl will try to detect if your source folder is a git repository or an npm package, it will then offer to ignore the ".git" and "node_modules" folders for you.

If you want to add more folders to your ignored folders first create a file named .mtslconfig.json in your source folder, this file should contain ignore directories for this folder which will not CRUD from source to destination.

In the following example we are ignoring the ".git" and "node_modules" folders:

json { "ignore_dirs": [ ".git", "node_modules" ] }

Contributing

See the Contributing page.

create expo library (npm)

Numan — Sun, 28 Jun 2020 19:14:42 +0000

I have made CLI for create expo library.
https://www.npmjs.com/package/expo-library

Install globally

This package requires node >= 10.

install expo-library by

npm install -g expo-library

Creating a New Library

expo-library

Answer some basic prompts about your module, and then the CLI will perform the following steps:

copy over the template
install dependencies via yarn or npm
link packages together for local development
initialize local git repo

Development

Local development is broken into two parts (ideally using two tabs).

First, go to root dir of newly create library and edit component in index.js/ts file.

Second, go to example/ dir and run metro bundle by

cd example
npm start # runs your expo app bundler

Now, anytime you make a change to your library in index.js or to the example app's example/App.js will fresh refresh component in example.

Publishing to npm

npm publish

Make sure that any npm modules you want as peer dependencies are properly marked as peerDependencies in package.json.

Contributing

See the Contributing page.