I have an application written in React Native with Expo and I need to create about 20 more apps that are almost the same but have different backend and some styling. I have an idea how to do most of that but I'm stuck when it comes to using different app.json for every build without changing it manually each time. Of course, every separate application needs to use its own name and icon. So how should I do that?
Late answer incoming. Hope it is still relevant for you in some way.
As of today, in addition to the static app.json configuration file, you can write dynamic configuration in app.config.js.
So, with app.config.js you can define each white-label settings. Then, you can use environment variables to start your app with a specific white-label configuration.
For example, here's how you can have different app names per white-label.
Command to start expo: BRAND=WHITELABEL_1 expo start and BRAND=WHITELABEL_2 expo start, depending on which white-label you want to start.
app.config.js file:
const names = {
WHITELABEL_1: 'White-label 1 Name',
WHITELABEL_2: 'White-label 2 Name',
};
const name = names[process.env.BRAND];
export default { name };
That's how I'd approach white-labeling with Expo.
Related
I'm building a React Native app which has multiple Targets/Flavors for iOS/Android respectively. So, I have the same code base for both App1 and App2, but they have different logos, launch screens etc. I can't figure out how to add different images to the different versions.
My Android setup in android/app/build.gradle is:
flavorDimensions "appVersion"
productFlavors {
app1 {
applicationId="com.app1name"
dimension "appVersion"
}
app2 {
applicationId="com.app2name"
dimension "appVersion"
}
Then in android/app/src I have a main folder, and an app2 folder, each of which contains a res folder which has the following structure:
res
- drawable-hdpi etc
- mipmap-hpi etc (logos are in here)
- values
When I build app1, it uses the logos etc. from the main folder; if I build app2, it uses the ones from app2 (if they exist).
Likewise for the Targets in XCode, I have 2 Targets, app1 and app2, and have set up the image assets so it pulls in the correct logo etc.
This works fine for the logos and launch screens, but how do I handle images which are to be shown in the app itself? So say the dashboard needs to show Image1.png for App1, and Image2.png for App2 - where should Image1.png and Image2.png be stored?
The main issue is that the image path in React Native can't be a variable. To show an image in React Native I have to use something like:
<Image
source={require('path/to/image')}
/>
I thought I could use a switch statement, so store image_app1.png and image_app2.png in a folder somewhere, and then do something like the following:
switch(appVersion) {
case app1:
imageName = image_app1.png
break
case app2:
imageName = image_app2.png
break
}
and then use imageName to create the path and then require it, but this doesn't work because the path can't be a variable.
The other solution I've seen is to require all images at the outset, and then just show the correct one:
const image1 = require('/path/to/Image1.png')
const image2 = require('/path/to/Image2.png')
switch(appVersion) {
case app1:
<Image source={image1} />
break
case app2:
<Image source={image2} />
break
}
but potentially that involves pre-loading quite a few images (I may later have more app versions, and some of these images might be quite big) and I imagine it could slow things down.
Is there a way to put the images into the appropriate folders in android / ios (so just call the image image.jpg or whatever for all versions, but have different versions in the different folders) and then just refer to image.jpg and let it find the correct one? Or is there a standard way to handle this scenario?
You could use react-native-fs or react-native-blob-util (preferred one, since react-native-fs is no longer maintained), create assets folder inside your target folder and load images from there
This question has been asked several times here(here the most relevant,Another example), but no solution has been proposed in any of them. So I have 2 questions to you guys:
Any idea why it wouldn't work in a large project? I mean, there are any know issues with fast refresh related to the size of the project or the packages he includes that will make fast refresh stop working? There is any way to fix it?
Is there a convenient way to edit an internal page in the app without using a fast refresh (without running the page independently, since it depends on all the logic of the app)?
This bug really makes the development really difficult for me, and I find it hard to believe that professional developers have not found a way around this problem, Please help!
I'm using expo-cli(v3.26.2 - Expo SDK 38 that using react-native v0.62)
TLDR;
using default export with no name ALWAYS resulted in a full reload of the app without hot reload!
Details
So after a lot of months of pain, I accidentally found a strangely enough effect:
I usually write my react components in this syntax:
export default ({ ...props }) => {
...
};
and for some reason, changing a module that exports that way ALWAYS resulted in a full reload of the app without hot reload!
after months of pain, accidentally i found out that changing the export to:
const Test = ({ ...props }) => {
...
};
export default Test;
completely fixed the issue and now hot reload works perfectly fine!
I did not saw this effect mentioned in a single place on the internet!
From react-refresh-webpack-plugin troubleshoot section
Un-named/non-pascal-case-named components
See this tweet for drawbacks of not giving component proper names.
They are impossible to support because we have no ways to statically
determine they are React-related. This issue also exist for other
React developer tools, like the hooks ESLint plugin. Internal
components in HOCs also have to conform to this rule.
// Wont work
export default () => <div />;
export default function () {
return <div />;
}
export default function divContainer() {
return <div />;
}
There is an other way to obtain this weird behavior.
When you export a simple function:
//if we export this function in the entry file of the app,
//it will break the hot reload feature without any warnings.
export function someName() {
};
from the entry file of your app (with typescript template expo init nameApp the file is App.tsx)
It will exactly produce a full reload of the app rather than a hot reload.
This is vicious because on ios simulator it full reloads the app without the modification whereas in android it full reloads the app WITH the modification. So you'll take some time to realize that this is not a hot reload in android but a full reload.
IDK why ios don't display the modification like android does..
But when you think at the problem, we shouldn't export multiple things from the entry point of an app. This sounds weird isn't it ?
TLDR;
During development, I had your problem with the infinity "Refreshing..." message. As well as incomprehensible errors like "unknow resolve module 2" and "bundle error..."
Details
the solution turned out to be unexpected, I changed "require()" to "import" in the main index.js file
before
const module = require('some-module')
after
import module from 'some-module';
I've implemented a react-native application and now I want to enhance it by adding along side it another different react-native application.
What i want to achieve is to keep the two application separated in order to continue to implement them as two separate application, and avoid to rewrite them completely as a single application.
Both application are using react-redux to handle their states. The first brutal approach which I have tried is to wrap one of the two application into a npm package and add it as a dependence of the other one. Then I've just added a tab to the main application which when clicked navigate to the second application. This approach seems to work, but I don't think is the best way to do it.
Do you think there could be any sort of problem doing so? Is there a more intelligent and elegant way to do it? I know it is kinda a generic question, so I would accept also an article/link about this argument.
You can create a git tag of your second application and can add it as a dependency in your first application.
You can also add it as a git sub-module.
P.S. i prefer the first one.
I think the best way to do it would be Linking as described here: Basic usage. So, you can easily pass needed parameters to the other app you want to open and also read them as app opens. Check this simple example:
Caller app:
Linking.openURL('calleeApp://app?param1=test¶m2=test2')
Callee app:
componentDidMount() {
Linking.getInitialURL().then((url) => {
if (url) {
console.log('Initial url is: ' + url);
}
}).catch(err => console.error('An error occurred', err));
}
do not forget to import it first:
import { Linking } from "react-native";
Let me know if it worked for you!
I need 2 files for creating new component in React:
${NAME}.js
import React from 'react';
import css from './${NAME}.css';
const ${NAME} = () => (
<div></div>
);
export default ${NAME};
${NAME}.css
/* Empty */
Note: ${NAME} needs to be entered like constant while creating these files.
I would like to use PhpStorm (or WebStorm) file template feature (or some other simple way) to create both files - by only clicking to create component like on image below:
Is something like that possible ?
As far as I'm aware it's not possible right now unless you code a plugin for that yourself.
https://youtrack.jetbrains.com/issue/IDEA-91565 -- watch this ticket (star/vote/comment) to get notified on any progress.
UPDATE 2020-12-04: The aforementioned ticket has been fixed and multi-file templates are available since 2020.3 version.
Some links if you are thinking about coding it yourself:
IntelliJ Platform SDK / Plugin Development Docs
API Forum
Some example
I'm a vue.js beginner and I've been trying to integrate the Quill editor into Vue modules. At first, I tried with the vue-quill plugin but documentation is very poor and I couldn't understand how to use it. Very frustrating.
Now I don't know if I'm better off trying to create my own plugin or if I give the existing plugin a second try and maybe try to enhance it.
What I want is someone to please provide some sample working code to get this going.
Upon inspecting the vue-quill package.json file I noticed it depended on an old version of quill :
"dependencies": {
"quill": "^0.20.1",
...
}
Since I was getting fragment errors from that build I decided to take the original code to suit my needs. At this point, you can copy this modified component and use something like vue-cli to use it.
I can't give you precise steps on vue-cli because my project is based on Laravel, but the idea of storing different .vue files into a components folder should be similar.
Finally, I simply use the component in one of my views :
<quill :content.sync="content"></quill>
Note : I am still fiddling around the component that I uploaded on gist, so take it as a starting point. The code is fairly simple.