@tarikfp/react-native-utils

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

  npm install @tarikfp/react-native-utils

or

  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

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

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

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"...)

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

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.

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

Feedback

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