react-native-file-writer

Installation

Add the dependency:

npm i react-native-file-writer

Peer Dependencies

IMPORTANT! You need install them

"rn-fetch-blob": ">= 0.12.0"

RN Fetch Blob Dependency Installation Install

Since this little util library depends on the rn-fetch-blob please follow their installation process

Usage

Import

import FileWriter from "react-native-file-writer";

Fundamental Usage

enableStringify and enableDecycle are optional parameters. Please check more for Configuration - Props section. Also, this FileWriter default button is fully customizable. You can create your own button.

<FileWriter
  data={mockData}
  filename="freakycoder"
  fileExtension="json"
  enableStringify
  enableDecycle
  onPress={(path: string) => {
    showFileManager(path);
  }}
/>

Multiple File Writing Usage

You should follow the IDataType type for the multiple file writing/exporting. The usage will be the same. It should return the all written file paths as an array.

const mockArrData: IDataType[] = [
  {
    data: {
      name: "FreakyCoder",
      email: "[e-mail]",
      github: "https://github.com/WrathChaos",
    },
    filename: "freakycoder2",
    fileExtension: "json",
    enableStringify: true,
    enableDecycle: true,
  },
  {
    data: {
      name: "Kuray",
      email: "[e-mail]",
      github: "https://github.com/WrathChaos",
    },
    filename: "kuray",
    fileExtension: "json",
    enableStringify: true,
    enableDecycle: true,
  },
  {
    data: {
      name: "Test JSON",
      email: "[e-mail]",
      github: "https://github.com/WrathChaos",
    },
    filename: "test-hello",
    fileExtension: "json",
    enableStringify: true,
    enableDecycle: true,
  },
];

Example Project 😍

You can checkout the example project 🥰

Simply run

• npm i
• react-native run-ios/android

should work of the example project.

Configuration - Props

Fundamentals

Property	Type	Default	Description
data	any	undefined	set your own data to write/export it on file
filename	string	undefined	set the filename for the file
fileExtension	string	undefined	set the file extenstion for the file such as .json
buttonText	string	undefined	set the button's text

Customization (Optionals)

Property	Type	Default	Description
enableStringify	boolean	false	it will automatically stringify the data before write it on the file
enableDecycle	boolean	false	it will automatically decycling the data before the stringify the data
onPress	function	undefined	set your own logic for the button functionality when it is pressed for export/write the file
encoding	Encoding	utf-8	you should change it if your data type is not using utf-8
style	ViewStyle	default	set or override the style object for the main container
textStyle	TextStyle	default	set or override the style object for the button text style
TouchableComponent	Text	default	set your own component instead of default react-native's Text component

Future Plans

• [x] LICENSE
• [ ] Write an article about the lib on Medium

FAQ

How to show the written/exported file on file manager?

RNFetchBlob.android.actionViewIntent(path, "application/json"); will show it to the user. You should check the path first.

const showFileManager = (path: string) => {
  Alert.alert(
    "React Native File Writer",
    "File is exported successfully, do you want to open it?", // <- this part is optional, you can pass an empty string
    [
      {
        text: "OK",
        onPress: () => {
          RNFetchBlob.android.actionViewIntent(path, "application/json");
        },
      },
      {
        text: "Cancel",
        onPress: () => {},
      },
    ],
    { cancelable: false },
  );
};

Author

FreakyCoder, [e-mail]

License

React Native File Writer is available under the MIT license. See the LICENSE file for more info.