iTunes file sharing feature

2019-10-14

let's see how to share files via iTunes on RN(React Native) project.

Outline

sometimes, we need to upload files to RN(React Native) app from PC via iTunes. for example, the video app like OPlayer or GomPlayer can be uploaded the video files vi iTunes.

in this blog, I’ll introduce how to implement the feature to upload the file from PC to the app via iTunes.

More Details

someone doesn’t understand what this feature yet, so I’ll explain more details about what we implement. when you connect your iOS device to PC via USB, you can see iTunes is executed.

connect iOS device to itunes

after connecting iOS device to PC, you can see the phone icon on the top of iTunes. click the icon.

device info on itunes

you can see iOS device info. click File Sharing on the left menu. you can see the app list that has the file sharing feature via iTunes.

itunes file sharing

in here, I selected OPlayer app and draggedvideo.mp4 file from PC to the app for uploading.

in this blog, we’ll talk about how to implement this feature that users upload the files from PC to the app via iTunes.

Prepare Device

we need to install the app on the device for testing. if you don’t know how to install RN(React Native) app on iOS device, see the blog post below.

Modify info.plist

we don’t need to modify the source code for this feature. we just need to modify info.plist to implement iTunes file sharing feature.

open ios/[project name]/info.plist file in RN(React Native) project modify it like below.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    ...
    <key>UIFileSharingEnabled</key>
    <true/>
    ...
</dict>
</plist>

How To Use

you can implement iTunes file sharing feature to modify info.plist. also you can use the file uploaded via iTunes by using react-native-fs.

you can access the file uploaded via iTunes by using DocumentDirectoryPath of react-native-fs.

Simulator

According to what we said above, you should install RN(React Native) app to the device and upload the file via iTunes. it looks like always test on the device, in fact we can test this feature on the simulator.

execute the command below to start the project.

react-native run-ios

after the simulator is executed with the app, execute the command below to get the simulator id.

xcrun simctl list | egrep '(Booted)'

and then, implement react-native-device-info library to get the app unique id.

after getting the simulator id and app unique id, you can copy the file to /Users/[user name]/Library/Developer/CoreSimulator/Devices/[simulator id]/data/Container/Data/Application/[app id]/Documents/ folder. it’s same action that you upload the file via iTunes.

Completed

we’ve talked about how to implement the feature that the app need to be uploaded the files by users like music app or movie app. also, we’ve talked about how to acceess the files and how to test on the simulator. if you also need the users need specific files to use your app but you don’t have the server, it’s one of the good solution to solve it.

Buy me a coffeeBuy me a coffee
Posts