react-native-utils

KO | EN

gitlite — search

#python #hacktoberfest #golang #rust #deep-learning #docker #macos #awesome #cli #kubernetes #awesome-list #security #ios #open-source

react-native-utils

(★ 9)

Utility functions for react native projects

react-native-utils Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @tarikfp/react-native-utils  &middot;  [![](https://img.shields.io/npm/dw/@tarikfp/react-native-utils)](https://www.npmjs.com/package/@tarikfp/react-native-utils) [![](https://img.shields.io/bundlephobia/minzip/@tarikfp/react-native-utils)](https://www.npmjs.com/package/@tarikfp/react-native-utils) [![](https://img.shields.io/npm/v/@tarikfp/react-native-utils)](https://www.npmjs.com/package/@tarikfp/react-native-utils) [![](https://img.shields.io/github/license/tarikpnr/react-native-utils)](https://github.com/tarikpnr/react-native-utils/blob/master/LICENSE)

Utility functions for react native projects. Written in typescript.
Nothing is invented in this project. The functions are just derived from existing features over react-native

## Installation

Install @tarikfp/react-native-utils with npm

```bash
  npm install @tarikfp/react-native-utils
```

```bash
  yarn add @tarikfp/react-native-utils

```

In order to use this package, make sure you have installed following packages in advance.

- react-native-vector-icons
- @react-navigation/native
- @react-navigation/stack

## Usage/Examples

## useGoBackHandler

#### useGoBackHandler is hook which will be executed when ios swipe back action or android back button is executed

```javascript
import * as React from 'react'
import { useGoBackHandler } from '@tarikfp/react-native-utils'

function App() {
  ...

/* A event handler function returns boolean | null | undefined */

const _backAction = React.useCallback(() => {
    navigation.goBack();
    return true;
  }, [navigation]);

useGoBackHandler(_backAction)
}
```

## useKeyboardListener

#### useKeyboardListener is hook which listens keyboard visibility

```javascript
import * as React from 'react'
import { useKeyboardListener } from '@tarikfp/react-native-utils'

function App() {
  ...

const isKeyboardShown = useKeyboardListener();

if (isKeyboardShown) {
     ...
  }
}
```

## getCurrentRouteName

#### getCurrentRouteName function that returns active route name

```javascript
import * as React from 'react'
import { getCurrentRouteName } from '@tarikfp/react-native-utils'

function TabBar() {
  ...

const currentRouteName = getCurrentRouteName();

if (currentRouteName === "user-profile") {
    return null;
  }

return <MyCustomTabBarComponent />;

}
```

## getDeviceNativeLanguage

#### A function returns device native language (ex: "en", "fr"...)

```javascript
import * as React from 'react'
import { getDeviceNativeLanguage } from '@tarikfp/react-native-utils'

function App() {
  ...

const deviceNativeLanguage = getDeviceNativeLanguage()

return <MyComponent />
}
```

## Layout utilities

#### A function takes percentage (string or number) as parameter and returns calculated percentage size as number

```javascript
import * as React from 'react'
import {getWindowHeight, getWindowHeight} from '@tarikfp/react-native-utils'

function App() {
  ...

const myStyle = {
    width: getWindowWidth(100),
    height: getWindowHeight("95"),
  };

return <MyComponent style={myStyle} />
}
```

## Icon component

#### Wrapper over a react native vector package which enables dynamic usage of react-native-vector icons.

```javascript
import * as React from 'react'
import { Icon } from '@tarikfp/react-native-utils'

function App() {
  ...
  const togglePopupDialog = () => { ... }
  const iconStyle = { ... }

return (
    <Icon
      onPress={togglePopupDialog}
      style={iconStyle}
      color={"#424232"}
      name="dots-three-horizontal"
      type="Entypo"
    />
  );
}
```

## Authors

- [@tarikpnr](https://www.github.com/tarikpnr)

## Feedback

If you have any feedback, please contact me through tarikdotcom@gmail.com

react-native-utils

react-native-utils Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-utils

react-native-utils Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README