I need to make a react native app which will be used to produce other apps using the same code (changing some logos, colors, a few features depending on the case etc)
On Android with Java I was using flavors, but with Expo to generate builds variant on Android & iOS and not having to duplicate code/projects, i'm not sure how I can do this properly. Any best practice?
Expo now supports variants, but only if you use Expo Application Services (EAS).
There is a bit too much code to include it all, but the key bit is doing this is app.config.js:
const IS_DEV = process.env.APP_VARIANT === "development";
export default {
// You can also switch out the app icon and other properties to further
// differentiate the app on your device.
name: IS_DEV ? "MyApp (Dev)" : "MyApp",
slug: "my-app",
ios: {
bundleIdentifier: IS_DEV ? "com.myapp.dev" : "com.myapp",
},
android: {
package: IS_DEV ? "com.myapp.dev" : "com.myapp",
},
};
For more info: https://docs.expo.dev/build-reference/variants/
Related
I have an Expo managed project in which I would like to use the React Native Vision Camera. The Expo Camera does not provide enough functionalities for my app.
After following the Getting Started, I get the following errors when running the app in my web browser:
I have imported the Camera module using
import { Camera } from 'react-native-vision-camera'; and adapted my app.json to include
"plugins": [
[
"react-native-vision-camera",
{
"cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera."
}
]
]
React Native Vision Camera doesn't have web support for now.
https://github.com/mrousavy/react-native-vision-camera/discussions/892
Sentry is working properly in debug mode and but when I make a release APK and run it it doesn't give proper information like it gave in debug APK. and I cant identify any issue with the code . if anyone knows about this issue please help.
Minified Names in Production
When bundling for production, React Native will minify class and function names to reduce the bundle size. This means that you won't get the full original component names in your Touch Event breadcrumbs or Profiler spans.
A way to work around this is to set the displayName on all the components you want to track with touch events or to pass the name prop to the Profiler components. However, you can also configure Metro bundler to not minify function names by setting these options in metro.config.js:
module.exports = {
transformer: {
minifierConfig: {
keep_classnames: true, // Preserve class names
keep_fnames: true, // Preserve function names
mangle: {
keep_classnames: true, // Preserve class names
keep_fnames: true, // Preserve function names
},
},
},
};
Paste the above snippet in your metro.config.js file in react native project
I can't change mt app fontfamily. I'd tried so much things from searching in google. I want to change the fontfamily of the app fonts. please help.
below is my added fonts:
Below is the react-native.config.js:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
You are using expo project, You should use this package to load the fonts inside the project
expo install expo-font
I have made a Snack Example of "Sarpanch" custom font working
https://snack.expo.dev/DENUcVd2U
I've installed react-native-localization in my react native project (v0.6). Library is not supporting autolinker yet so I need to disable it for iOS and Android in react-native.config.js.
I already tried to add dependencies in react-native.config.js. After that, I did react-native link react-native-localization command and build an app.
This is my react-native.config.js file:
'use strict';
const ios = require('#react-native-community/cli-platform-ios');
const android = require('#react-native-community/cli-platform-android');
module.exports = {
dependencies: {
'react-native-localization': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
ios: null,
},
},
},
commands: [...ios.commands, ...android.commands],
platforms: {
ios: {
linkConfig: ios.linkConfig,
projectConfig: ios.projectConfig,
dependencyConfig: ios.dependencyConfig,
},
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
/**
* Used when running RNTester (with React Native from source)
*/
reactNativePath: '.',
project: {
ios: {
project: './RNTester/RNTester.xcodeproj',
},
android: {
sourceDir: './RNTester',
},
},
};
Error in simulator says:
"Please check your configuration. Did you run 'react-native link'?
As now, react-native has added the support for CocoaPods inside of his projects. (https://github.com/facebook/react-native/releases)
Sadly, i don't know why, but the autolinking feature never works for me on iOS but always goes trough in Android. The only solution i found is to do a react-native link only for iOS (renaming the android folder to something else), then do cd ios and pod install. After that, in the majority of the cases, it would work out of the box, while other libs needs still to be updated to have a full integration with RN 0.60.
Hope all this will be fixed soon but until that we only have to wait and hope that the libs work without any other complications
Even I set updates.enable=false in app.json, still clients getting updated versions from expo server automatically (without deploying apk/ios to store’s).
I set updates.enable=false in version 1.1.7. Clients with version 1.1.7, 1.1.8 and 1.1.9 got 1.2.0 version automatically without putting new version (1.2.0) into store(s).
I’m using expo build:android and expo build:ios commands for build.
Could anyone can help me about this problem? Is there any way to prevent update on code level?
You can find my app.json content below:
{
“expo”: {
“name”: “XXX”,
“slug”: “XXX”,
“privacy”: “public”,
“sdkVersion”: “31.0.0”,
“platforms”: [
“ios”,
“android”
],
“version”: “1.2.0”,
“orientation”: “portrait”,
“icon”: “./assets/icon.png”,
“splash”: {
“image”: “./assets/icon.png”,
“resizeMode”: “contain”,
“backgroundColor”: “#FFCB09”
},
“notification”: {
“icon”: “./assets/icon96gs.png”,
“color”: “#ffcd00”,
“androidMode”: “collapse”,
“androidCollapsedTitle”: “XXX”
},
“updates”: {
“enabled”:false
},
“assetBundlePatterns”: [
“**/*”
],
“android”:{
“package”:“com.xxx.yyy”,
“permissions” : [“CAMERA”, “LOCATION_HARDWARE”,“ACCESS_COARSE_LOCATION”,“ACCESS_FINE_LOCATION”],
“versionCode”: 17
},
“ios”: {
“bundleIdentifier”: “com.xxx.yyyt”,
“buildNumber” : “17”
},
“scheme” : “xxx”
}
}
you should upload your app in apple store and google play store. only after that updates will be switched off.
Because you created a stand-alone app with Expokit, the commands in the setup do not apply.
You have to set up your own settings in Android Studio and xcode.
"updates"
Configuration for how and when the app should request OTA JavaScript updates
{
"updates": {
/*
If set to false, your standalone app will never download any code.
And will only use code bundled locally on the device.
In that case, all updates to your app must be submitted through Apple review.
Defaults to true.
Note that this will not work out of the box with ExpoKit projects.
*/
"enabled": BOOLEAN,
...
}
ExpoKit: To change the value of enabled, edit ios//Supporting/EXShell.plist and android/app/src/main/java/host/exp/exponent/generated/AppConstants.java. All other properties are set at runtime.