5/27/2023 0 Comments React file viewer![]() Once you start Metro Bundler it will run forever on your terminal until you close it. To start Metro bundler run following command npx react-native start cd ProjectNameįirst, you will need to start Metro, the JavaScript bundler that ships with React Native. Open the terminal again and jump into your project using. Preview any type of file supported by the mobile deviceĮxport default App To Run the React Native App If user canceled the document selectionĪlert('Unknown Error: ' + JSON.stringify(err)) Remove 'file://' from file path for FileViewer Provide which type of file you want user to pick Import DocumentPicker from 'react-native-document-picker' Import DocumentPicker to pick file to view Import FileViewer from 'react-native-file-viewer' Import File Viewer to View Files in Native File Viewer Open App.js in any code editor and replace the code with the following code App.js // React Native File Viewer Example to View Files in Native File Viewer Now we need to install pods cd ios & pod install & cd. Now we need to link react-native-document-picker, and react-native-file-viewer using react-native link react-native-document-picker react-native link react-native-file-viewer CocoaPods Installation Please run the below command to install it npm install react-native-file-viewer -save Linking of Dependency Now we need to install react-native-file-viewer from which we will import FileViewer component. Open the terminal and jump into your project cd ProjectNameįor the file picker install react-native-document-picker using the following command npm install react-native-document-picker -save Now we need to install the dependencies which we require for this project. This will make a project structure with an index file named App.js in your project directory. Try uninstalling the cli and run the cli using npx. Note If the above command is failing, you may have old version of react-native or react-native-cli installed globally on your pc. If you want to start a new project with a specific React Native version, you can use the -version argument: npx react-native init ProjectName -version X.XX.X If you have previously installed a global react-native-cli package, please remove it as it may cause unexpected issues: npm uninstall -g react-native-cli the following commands to create a new React Native project npx react-native init ProjectName We are going to use react native command line interface to make our React Native App. Getting started with React Native will help you to know more about the way you can make a React Native project. If you face any challenge with the file picker then you can see Example of File Picker in React Native it will help you to solve your problems. On click of the button, we are going to trigger file picker and after selecting the file we will open the file in the native file viewer. In this example, We are going to create one Screen with one button. React Native File Viewer Example Overview Please note in case of iOS we need to remove the ‘file://’ prefix from the file path. Can do anything you want after opening the file successfully Now pass the file URI in FileViewer to open the file.Here I am using react-native-document-picker for file picking First, we pick a file using any file picker or you can also take the path of any downloaded file.To trigger any Native File Viewer from our app we are going to use FileViewer component provided by react-native-file-viewer. How to view any file in Native File Viewer? I think I have cleared why I prefer the Native file viewer. Performance can also be a point, Many native file viewers already handle the caching and everything of the available images in the device.Achieving all the functionalities to compete with native file viewer is very time taking.People are used to of native file viewers of their devices so it’s easy to view files in native file viewer.It will reduce the hard work to create and manage a file viewer to support different type of files.I know many people will not agree with my words “the best way to view the file” but I personally feel On selection of any video, it will trigger a video player of your device to play the video.If you have selected any pdf then it will open any pdf reader from your device.You have selected an Image then it will open it in an image viewer or if you have multiple options to view the image then you will be asked to select an application to view the image.
0 Comments
Leave a Reply. |