react-native-ps-bottom-tabbar - GitLite

KO | EN

gitlite — search

#react #go #android #machine-learning #linux #nodejs #macos #windows #awesome #awesome-list #pytorch #security #ios #open-source

react-native-ps-bottom-tabbar

(★ 101)

React Native Bottom Tabbar inspired by Playstation App

File Explorer

Download Latest Version (.zip)

- - ci.yml
- - adaptive-icon.png
  - favicon.png
  - icon.png
  - splash.png
- - App.tsx
  - Navigation.tsx
  - Screens.tsx
- App.js
- app.json
- babel.config.js
- metro.config.js
- package.json
- tsconfig.json
- webpack.config.js
- yarn.lock
- bootstrap.js
- - index.test.tsx
- index.tsx
.editorconfig
.gitattributes
.gitignore
.nvmrc
.watchmanconfig
.yarnrc
babel.config.js
blackpsbottomtabbar.gif
CODE_OF_CONDUCT.md
CONTRIBUTING.md
lefthook.yml
LICENSE
package.json
README.md
redpsbottomtabbar.gif
tsconfig.build.json
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

git clone https://github.com/2ez4salt/react-native-ps-bottom-tabbar

Downloads the entire project code from GitHub to your computer.

cd react-native-ps-bottom-tabbar

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install react-native-ps-bottom-tabbar

Downloads and installs the libraries listed in package.json.

yarn add react-native-ps-bottom-tabbar

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Alt Text](https://raw.githubusercontent.com/2ez4salt/react-native-ps-bottom-tabbar/main/blackpsbottomtabbar.gif)
![Alt Text](https://raw.githubusercontent.com/2ez4salt/react-native-ps-bottom-tabbar/main/redpsbottomtabbar.gif)

# React Native PS Bottom Tab Bar

A custom bottom tab bar component for React Native.

## Installation

Install the package using npm:

```shell
npm install react-native-ps-bottom-tabbar
```

or with Yarn:

```shell
yarn add react-native-ps-bottom-tabbar
```

## Usage

Import the `PSBottomTabBar` component from the package:

```jsx
import { PSBottomTabBar } from 'react-native-ps-bottom-tabbar';

const MyComponent = () => {
  // Your code here
};
```

Use the PSBottomTabBar component in your code to display the custom bottom tab bar:

```jsx
<PSBottomTabBar
  state={state}
  navigation={navigation}
  descriptors={descriptors}
  selectorStyle={{ backgroundColor: '#fff', shadowColor: '#305F84' }}
  topAreaStyle={{
    backgroundColor: '#1E1F23',
    shadowColor: '#000',
    shadowRate: 2,
  }}
  bottomAreaStyle={{
    backgroundColor: '#1B1C1E',
    shadowColor: '#000',
    shadowRate: 2,
  }}
/>
```

## Props

The `PSBottomTabBar` component accepts the following props:

- `state` (required): A state object containing the navigation state.
- `navigation` (required): The navigation object.
- `descriptors` (required): An object containing descriptors for the routes.
- `selectorStyle` (optional): An object that defines the style of the selector. It has the following properties:
  - `backgroundColor` (optional): The background color of the selector. Defaults to `'#fff'`.
  - `shadowColor` (optional): The shadow color of the selector. Defaults to `'#305F84'`.
- `topAreaStyle` (optional): An object that defines the style of the top area. It has the following properties:
  - `backgroundColor` (optional): The background color of the top area. Defaults to `'#1E1F23'`.
  - `shadowColor` (optional): The shadow color of the top area. Defaults to `'#000'`.
  - `shadowRate` (optional): The shadow rate of the top area. Defaults to `2`.
- `bottomAreaStyle` (optional): An object that defines the style of the bottom area. It has the following properties:
  - `backgroundColor` (optional): The background color of the bottom area. Defaults to `'#1B1C1E'`.
  - `shadowColor` (optional): The shadow color of the bottom area. Defaults to `'#000'`.
  - `shadowRate` (optional): The shadow rate of the bottom area. Defaults to `2`.

## Example usage:

```jsx
import { PSBottomTabBar } from 'react-native-ps-bottom-tabbar';

const Tab = createBottomTabNavigator();

export enum Routes {
  Play = 'Play',
  Discover = 'Discover',
  Playstation = 'Playstation',
  Library = 'Library',
  Search = 'Search'
}

const TABS = {
  [Routes.Play]: { icon: <FontAwesome5 name='gamepad' size={24} color='white' />, label: Routes.Play },
  [Routes.Discover]: { icon: <Ionicons name='rocket' size={24} color='white' />, label: Routes.Discover },
  [Routes.Playstation]: { icon: <Fontisto name='playstation' size={24} color='white' />, label: Routes.Playstation },
  [Routes.Library]: { icon: <Ionicons name='menu' size={24} color='white' />, label: Routes.Library },
  [Routes.Search]: { icon: <FontAwesome name='search' size={24} color='white' />, label: Routes.Search },
};

export const Navigation = () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <StatusBar style='auto' />
        <Tab.Navigator
          tabBar={props =>
            <PSBottomTabBar{...props} />
          }
          screenOptions={({ route: { name } }) => ({
            headerShown: false,
            tabBarIcon: TABS[name].icon,
          })}
        >
          <Tab.Screen name={Routes.Play} component={HomeScreen} />
          <Tab.Screen name={Routes.Discover} component={DiscoverScreen} />
          <Tab.Screen name={Routes.Playstation} component={PSScreen} />
          <Tab.Screen name={Routes.Library} component={LibraryScreen} />
          <Tab.Screen name={Routes.Search} component={SearchScreen} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

// ...
```

Make sure to provide the required props (state, navigation, and descriptors) and customize the appearance of the tab bar by adjusting the optional props (selectorStyle, topAreaStyle, and bottomAreaStyle).

## Contributing

All contributes are welcome! 🙏

## License

MIT

---

Made with Skia and ❤️