I am trying to build an app to communicate with embedded devices using Protocol Buffers with protobuf.js
I want to load the content of .proto files at runtime. The files are pulled from a shared repo and I want to have them bundled with the app at build time.
I know I can read files with RNFS from DocumentDirectoryPath, but how do I tell React Native to put them there when building the app? Or is there a better way to do this?
probably a duplicate of In React Native how do you bundle a text file and read it's value at runtime?.
if you put anything inside android/app/src/main/assets folder it will be in your final .apk file, and you can read it with
RNFS.readFileAssets
Also there are more customized libraries like This one
Related
I am building and mobile app for android using react native, I have json array object and I want to download this data as CSV file on button clicked, I have checked many of existing packages but all for web applications not mobile applications. is there anyway or trick to do that or is there and new packages i am missing. help me please
It looks like react-native-fs (https://www.npmjs.com/package/react-native-fs) supports IOS and Android Devices. This allows you to create Files on the Device, and write any File content.
I have wrote a project by React Native,now I need to reference a android SDK to implement some functions.
the android sdk is a aar file,and it contains JNI,now it reports couldn't find "libjniload.so", the "libjniload.so" is in the aar.
If you want to reference an Android SDK, you must add the files to your android project in your react native project. That means, you must add the dependencies to your build.gradle, and copy the files to you libs folder etc.. This is not any different than adding .aar files to an Android project. After this, you will need to implement a native module to call its functions from react-native. This is the general procedure, what exact step is causing error?
I'm trying to understand the possibility of creating a while label product with the help of react native.
The problem to solve is that by using the same codebase and some configurational changes, we get four different applications each with its own branding assets (in both ios and android).
Is it possible to do that in react native?
xcode targets and android flavours are there. How can we architect this under react native way so we don't have to deal with native code/ configuration.
So the way I ended up doing is by using 12 Factor methodology.
The configuration is loaded through the .env file loaded while building the app and then based on that env file all resources are collected on the go.
The configuration took some time but it was well worth at the end.
6 apps (3 iOS and 3 android apps) out of one codebase.
This is the article that explains how to do it.
Adding multiple target pipelines for React Native Apps (and Fastlane CircleCI deployment
well the posibly easiest solution for this woud be you make a folder structure like this
\Common
assets
SharedPic.jpeg
sharedApp
sharedApp.JS
\app1
assets
pic.jpeg
App1.js
\app2
assets
pic.jpeg
App2.js
and then hardlink them :
fsutil hardlink create ".\app1\asstes\pic.jpeg" ".\Common\assets\SharedPic.jpeg"
fsutil hardlink create ".\app2\asstes\pic.jpeg" ".\Common\assets\SharedPic.jpeg"
fsutil hardlink create ".\app1\App1.js" ".\Common\sharedApp\sharedApp.JS"
fsutil hardlink create ".\app2\App2.js" ".\Common\sharedApp\sharedApp.JS"
but be aware! :
all the hard links are exactly the same so the bundler see's it as a real file and not a link but regardless of which file you edit all hard linked files will be edited
(i know on a datastructure-level the last statement isnt fully correct but I think its easier to understand if you think this way )
I am learning React Native.
I can't find a proper documentation for metro bundler. So, I have few questions on it.
As the name suggest it creates a bundle.
But where is the bundle file located ?
Is this same as webpack ?
What is the use of that bundle file ?
A React Native app is a compiled app that is running some Javascript. Whenever you build and run your React Native project, a packager starts up called Metro. You’ve probably seen this output in your terminal before, letting your know the packager is running.
The packager does a few things:
Combines all your Javascript code into a single file, and translates any Javascript code that your device won’t understand (like JSX or some of the newer JS syntax).
Converts assets (e.g. PNG files) into objects that can be displayed by an Image component.
reference:
https://hackernoon.com/understanding-expo-for-react-native-7bf23054bbcd
Metro is a JavaScript bundler which takes in options, an entry file, and gives you a JavaScript file including all JavaScript files back. Every time you run a react native project, a compilation of many javascript files are done into a single file. This compilation is done by a bundler which is called Metro.
Answers to your questions:
1> Bundled file is located on the device itself on which you are building your app and is stored in different formats like in case of Android Plain bundling in which .bundle is created. Another format is of Indexed RAM bundle in which file is stored as binary file.
2> Webpack is also a similar type of module bundler which does bundling to ReactJS web platform and its modules are accessible through browser. Bundling process is while similar to metro.
3> These bundled files are indexed and stored in a particular numerical format and thus its easy at the run time to arrange JS files in order.
There are multiple functions of Metro bundler and you can read about the role of Metro in React Native here : https://medium.com/#rishabh0297/role-of-metro-bundler-in-react-native-24d178c7117e
Hope it helps.
Metro team keeps improving its documentation, now you can find some really good explanations at https://facebook.github.io/metro/docs/concepts (link updated):
Metro is a JavaScript bundler. It takes in an entry file and various
options, and gives you back a single JavaScript file that includes all
your code and its dependencies.
So yes, it is a sort of Webpack, but for React Native apps :)
But where is the bundle file located?
Once the bundler is started, you can check its contents at http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false
(like webpack, it is served from memory, so it is not being written on your project's folder).
What is the use of that bundle file ?
This file is installed in the device for its code to be executed there. Remember that when you are writing code for a React Native application, your code is not "translated" to Java / Swift / whatever. The Native Modules will send events to a Javascript thread, and the JS thread will execute your bundled React Native code.
React naive app Music is not playing on release apk .using library react-native-track player.
It works fine with local host both in emulator and real device while debug mode.
Is der any specified place to keep mp3 files ?
I'm trying to load from bundle only
I'm a windows machine user
Please refer this git below you may clone it as well..
https://deva11#bitbucket.org/deva11/trackplayertest.git
Debug Mode :
Release Mode
in reference to react-native-sound .I am aware that music files should keep in android/app/src/main/res/raw folder and while bundling assets in react-native folders will be merging with android native folders.
How can I match it up ?
This issue has been fixed in 6c57395.
In release mode, React Native used to copy all resources into the drawable directory, and react-native-track-player used to look up the files there.
After an update, React Native started copying non-image files to the raw directory, and that broke the feature.
In case someone is looking for an answer, the proper way to load files from the device, is to prepend the path with file:///, here's an example:
TrackPlayer.add({
url: 'file:///storage/sdcard0/Music/song.mp3',
// ...
});
And the proper way to load files inside the app bundle is to require/import them:
TrackPlayer.add({
url: require('./song.mp3'),
// ...
});
If that doesn't work, feel free to open an issue in the react-native-track-player repository