@chainplatform/file

React Native File Select

The library allows you to select file with react-native without ejecting support both react-native and react-native-web.

Prequisites

• This library relies on React Native Webview. Please follow this guide to install in your project first.

Installation

• Ensure you've completed the setps in prequisites.

• Install package via npm or yarn:

npm install --save @chainplatform/file OR yarn add @chainplatform/file

• If your project use react-native-web to build website:

npm install --save @chainplatform/react-native-web-webview OR yarn add @chainplatform/react-native-web-webview

Then setup by guide at: https://github.com/ChainPlatform/react-native-web-webview#readme

Usage

• Import in your project

import FileSelect from '@chainplatform/file';

    <FileSelect
        style_button={`background: ${colors.green2}; 
          padding: ${styles.fs11}px ${styles.fs15}px; 
          font-size: ${styles.fs13}px; 
          font-weight: ${styles.fw600};
          border-radius: ${styles.s0}px;`
        }
        file_text={"Select file"}
        file_types={"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,text/comma-separated-values, text/csv, application/csv"}
        getFile={(datas) => { 
            console.log("File ", datas);
        }}
    />

Component props

• style_button (String) - Button style ({ background: "green"; padding: 12px; font-size: 13px; font-weight: 600; border-radius: 5px; })
• file_text (String) - Button text.
• file_types (String) - File type allowed ("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel,text/comma-separated-values, text/csv, application/csv"...)
• getFile (?Function) - Called upon calback of the file selected
• Support full Webview props

Contributing

Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.

Related Projects

• Other packages for react native and react native web: ChainPlatform