React-native-custom-window NPM

React Native Custom Window

Installation

To use this module in your React Native project, follow these steps:

Install the npm package using the following command:

npm install react-native-custom-window --save

Link the native module to your project:

react-native link react-native-custom-window

Usage

TitleBar Module

Import

import { titleBar } from "react-native-custom-window";

Methods

interface TitleBarColorProps {
  backgroundColor: string;
  inactiveBackgroundColor?: string;
  buttonBackgroundColor?: string;
  buttonInactiveBackgroundColor?: string;
  buttonForegroundColor?: string;
  buttonHoverForegroundColor?: string;
  buttonPressedForegroundColor?: string;
  buttonInactiveForegroundColor?: string;
  foregroundColor?: string;
  inactiveForegroundColor?: string;
  buttonHoverBackgroundColor?: string;
  buttonPressedBackgroundColor?: string;
}

enableExtend(): Promise Enables the extension of the window, allowing it to go titleBar.
TitlebarColor(props: TitleBarColorProps): Promise Sets the title bar color with the provided background and button background colors. The backgroundInactive and buttonBackgroundInactive are used when the window is inactive.
addBackButton(): Promise Adds a custom back button to the window.
removeBackButton(): Promise Removes the custom back button from the window.
disableBackButton(): Promise Disables the functionality of the default back button.
disableExtend(): Promise Disables the window extension, preventing it from going fullscreen.

Window Module

Import

import { titleBar } from "react-native-custom-window";

Methods

type ISetSize = {
  width: number;
  height: number;
};

setSize(props: ISetSize): void Sets a custom size for the window.
isFullScreen(): Promise Checks if the window is in fullscreen mode.
enterFullscreen(): Promise Activates the fullscreen mode for the window.
leaveFullscreen(): Promise Deactivates the fullscreen mode for the window.

FilePicker Module

Import

import { FilePicker } from "react-native-window-file-picker-module";

Method

pickFile(): Promise Opens a file picker dialog, allowing the user to select a file. Returns a promise that resolves to the selected file's path.

Example

import React from "react";
import { View, Button } from "react-native";
import { fullscreen, FilePicker } from "react-native-window-file-picker-module";

const App = () => {
  const handlePickFile = async () => {
    try {
      const filePath = await FilePicker.pickFile();
      console.log("Selected file path:", filePath);
    } catch (error) {
      console.error("Error while picking a file:", error);
    }
  };

  return (
    <View>
      <Button title="Go Fullscreen" onPress={() => fullscreen.enableExtend()} />
      <Button title="Pick a File" onPress={handlePickFile} />
    </View>
  );
};

export default App;