I'm trying to use svg images on my native react application, I'm developing on Android.
So I followed this tutorial =>
https://medium.com/faun/add-custom-svg-icons-to-your-expo-app-279b492f6a15
I have an error Unable to read the 'fill' property of undefined while I manage to display the image, so I try to downgrade the version of react-native- svg and the image is displayed but as soon as I integrated react-navigation my application expo on crash at startup.
So I looked for a long time for the cause of this crash.
I tried to delete the react-native-svg library, the metroconfig.js file, and expo worked again, I don't know if this was the cause of the problem.
I would like to know if people have encountered these problems or if not what is the best method which works with the current version of RN to import a svg image in a react-native application?
Thank you in advance for your help and your answers.
EDIT
I tested react-native-svg and react-native-transformer-svg with the latest version of react native / expo / sdk expo
From the moment I create the metro.config.js file and link it with expo by updating the app.json file, my expo application crashes at startup.
I had to use react-native-svg without react-native-transformer-svg, that is to say that I have to convert an SVG file into a reactable SVG file.
If someone has a working solution to import svg files automatically, it would be of great help to me.
Important Note - I develop on a real Android device, not in Expo!
Here is some code from an issue opened on Github that actually worked for me after some modification.
Link to Github issue
In my metro.config.js file I finally have this code:
const { getDefaultConfig } = require("metro-config")
module.exports = (async () => {
const {
resolver: { sourceExts, assetExts },
} = await getDefaultConfig()
// here I extend the extensions needed for RN because I use JSX.
// you don't need this if you use pure JS files
const updatedSourceExts = [...sourceExts, "jsx", "js", "json", "ts", "tsx"]
return {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: false,
},
}),
babelTransformerPath: require.resolve("react-native-svg-transformer"),
},
resolver: {
assetExts: assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...updatedSourceExts, "svg"],
},
}
})()
A part of my package-json file:
"react-native": "0.63.2",
"react-native-svg": "^12.1.0",
"react-native-svg-transformer": "^0.14.3"
Install react-native-svg-transformer
npm i react-native-svg-transformer --save
I'm using SVG as following and it works fine
import LOGOSVG from "assets/svg/logo.svg"
in render
<View>
<LOGOSVG
width="100%"
height="70%"
/>
</View>
I am trying to get current country of device in but didn't find anything. Is there something to do so in React Native?
I tried using react-native-device-info but it is also not supporting but in previous version it can be get by getDeviceCountry(). Now for the latest version it is showing error:
TypeError: _reactNativeDeviceInfo.default.getDeviceCountry is not a
function. (In '_reactNativeDeviceInfo.default.getDeviceCountry()',
'_reactNativeDeviceInfo.default.getDeviceCountry' is undefined)
According to the documentation of react-native-device-info for latest version, they have moved some of their apis to react-native-localize to reduce duplication in the react-native-community modules. react-native-localize worked perfectly for me.
Setup:
$ npm install --save react-native-localize
# --- or ---
$ yarn add react-native-localize
Usage:
import * as RNLocalize from "react-native-localize";
console.log(RNLocalize.getLocales());
console.log(RNLocalize.getCurrencies());
console.log(RNLocalize.getCountry());
console.log(RNLocalize.getCalendar());
console.log(RNLocalize.getTemperatureUnit());
console.log(RNLocalize.getTimeZone());
console.log(RNLocalize.uses24HourClock());
and many more. For detailed description please visit their official documentation by the given link: react-native-localize
Its solved my problem;
BREAKING CHANGE: remove is24Hour, getTimezone, isAutoTimeZone and isAutoDateAndTime, getDeviceLocale, getDeviceCountry, getPreferredLocales
This was the result of a survey. It removes API duplication in the react-native-community modules
Related PR: https://github.com/react-native-community/react-native-localize/pull/65
Use yarn add
https://github.com/mikehardy/react-native-localize.git#e062f0d2dc3171dc18fdb7b7139d347ad03933dc to maintain
isAutoTimeZone + isAutoDateAndTime until merged
The accepted answer didn't work for me, maybe due to https://github.com/zoontek/react-native-localize/issues/81.
However, Expo has something from its ecosystem, which worked out perfectly:
expo install expo-localization
import { getLocales } from 'expo-localization';
console.log(getLocales()[0].regionCode);
Edit: docs here https://docs.expo.io/versions/latest/sdk/localization/#localizationregion
Looks like it's a bug in the React Native. Please check their Troubleshooting section
Here is what they advice:
Seems to be a bug caused by react-native link. You can manually delete
libRNDeviceInfo-tvOS.a in Xcode -> [Your iOS build target] -> Build
Phrases -> Link Binary with Libraries.
Please use this package to get device country . to has different type of configs.
react-native-device-country
Some Examples
import DeviceCountry, {
TYPE_ANY,
TYPE_TELEPHONY,
TYPE_CONFIGURATION,
} from 'react-native-device-country';
DeviceCountry.getCountryCode()
.then((result) => {
console.log(result);
// {"code": "BY", "type": "telephony"}
})
.catch((e) => {
console.log(e);
});
DeviceCountry.getCountryCode(TYPE_TELEPHONY)
.then((result) => {
console.log(result);
// {"code": "BY", "type": "telephony"}
})
.catch((e) => {
console.log(e);
});
DeviceCountry.getCountryCode(TYPE_CONFIGURATION)
.then((result) => {
console.log(result);
// {"code": "BY", "type": "config"}
})
.catch((e) => {
console.log(e);
});
Right now the ionic app renders with android styling by default. Instead of using the ?ionicplatform=ios param every single time I'd like that to be the default option.
I looked for hints in the config.xml as well as the config settings in app.module.ts such as:
IonicModule.forRoot(
MyApp,
{
swipeBackEnabled: true,
platforms: {
ios: {
swipeBackEnabled: true,
statusbarPadding: false
}
}
}
),
and was unable to find an elegant way of doing it...Any ideas?
You just need to do this:
app.module.ts
imports: [
IonicModule.forRoot(MyApp,{
mode: 'ios'
})
],
Note: From #sebaferreras
Btw, by setting this config the app will use the ios styles and
components even if you run it on an Android device. Please notice
that ?ionicplatform=ios is just used to see how the app looks like when
using the browser, but does not affect how the app is built. But
setting mode: 'ios' will force the ios mode and apply the ios styles
even if you build and create a .apk file.
in index.html just define mode
For iOS
<html lang="en" mode="ios">
For android
<html lang="en" mode="md">
Using #ionic/react this is how you go:
import {setupConfig} from '#ionic/react'
setupConfig({mode: 'ios'})
Alternatively for enforcing Material Design:
setupConfig({mode: 'md'})
You could place this code in your main App.js/App.tsx file.
See also https://ionicframework.com/docs/react/config for further global settings.
Just adding to Ben Everard's answer, if you are using more recent version of Ionic (4.8.0 in my case)
IonicModule.forRoot ->
will not accept two parameters. Just drop the first parameter making it as:
IonicModule.forRoot({ mode: 'ios' }),
For anybody using the new Vue.js support for Ionic, forcing the rendering mode can be achieved by doing this when you import Vue:
import Vue from 'vue';
// ios
Vue.use(Ionic, {
mode: 'ios'
});
// material design
Vue.use(Ionic, {
mode: 'md'
});
Please try this in your index.html file
I tried the below html code in ionic 4 and it works
Use the below one for getting styled your apk same as ios.
<html lang="en" dir="ltr" class="plt-iphone plt-ios plt-phablet plt-mobile ios" mode="ios">
Use the below one for getting styled your ios app same as android.
<html lang="en" dir="ltr" class="plt-android plt-mobile md" mode="md">
Ionic v6 (React)
Go to your app.tsx
To force Android style (Material Design)
setupIonicReact({ mode: 'md' })
To force iOS style
setupIonicReact({ mode: 'ios' })
Reference: https://ionicframework.com/docs/react/config
Ionic v6 (Angular)
Go to your app.module.ts
To force Android style (Material Design)
imports: [ IonicModule.forRoot({ mode: 'md' }) ]
To force iOS style
imports: [ IonicModule.forRoot({ mode: 'ios' }) ]
https://ionicframework.com/docs/angular/config
Ionic V6 - VUE
createApp(App).use(IonicVue, {
mode: 'ios',
});
Documentation: https://ionicframework.com/docs/vue/config
For Vue 3 and Ionic 6
import { createApp } from "vue";
import App from "./App.vue";
import { IonicVue } from "#ionic/vue";
const app = createApp(App);
app.use(IonicVue, {mode: "ios"});
app.mount("#app");
I am new to Ionic 2 and everything around. I'm tryng to setup my first mobile app: touching a button I would open native navigation (Google Maps for Android, for instance). I've installed launchnavigator plugin:
ionic plugin add uk.co.workingedge.phonegap.plugin.launchnavigator
and inside cremony.ts page:
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { LaunchNavigator, LaunchNavigatorOptions } from 'ionic-native';
#Component({
selector: 'page-ceremony',
templateUrl: 'ceremony.html'
})
export class Ceremony {
constructor(public navCtrl: NavController) {
}
navigate() {
let options: LaunchNavigatorOptions = {
start: ""
};
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
}
}
make a build npm run buildand upload it to IonicView with ionic upload.
I've do everything like suggested in this link but with different luck.
But when I click the button (a simple <button ion-button (click)="navigate()">Navigate</button> in the ceremony.html) in the Ionic View an error say: Error launghing navigator: plugin_not_installed.
I inspected the project, the plugins directory contains uk.co.workingedge.phonegap.plugin.launchnavigatorlooks directory. So I look at package.json and config.xml and I've added the value uk.co.workingedge.phonegap.plugin.launchnavigator in the cordovaPlugins
and tag <plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" spec="~3.2.1" /> in the widget root. npm run build, ionic upload but nothing changed.
Where is my error?
New answer, there is something wrong with your project. Have you modified your index.html file? Is it still including cordova.js? If so what version of Ionic and Cordova are you using?
I made this sample application with your exact code and it works perfectly on both iOS and ANdroid: https://github.com/roblouie/navigator-plugin-test
Did a screen recording on iOS: https://giphy.com/gifs/xTiN0EEQV82aIXWnQI
Just grabbed an image on Android, but it works the same:
Please try the project from github.
Cordova plugins need to be called only once platform is ready.
constructor(public navCtrl: NavController,public platform:Platform) {//inject in constructor
}
In your function navigate()
this.platform.ready().then(()=>{
LaunchNavigator.navigate("London, UK", options)
.then(
success => alert('Launched navigator'),
error => alert('Error launching navigator: ' + error)
);
});
The reason for your error is that you are using Ionic View. Your Ionic app is just html, css, and javascript. However, any plugins you use are written in Java for Android and Objective C for iOS. That plugin source code is then compiled into your app for each platform.
With Ionic View, it only uploads your app, the html, css, and javascript. Nothing is compiled. Ionic View is the app itself, and it loads your code. So no plugins you have are included. Ionic View itself does have some plugins installed on it, and you can see that list here: https://docs.ionic.io/tools/view/#supported-plugins
Unfortunately you will not be able to test any plugin not in that list without building and deploying to a device or emulator.
I'm currently trying to get the ES6 react-native-webpack-server running
on an Android emulator. The difference is I've upgraded my package.json and build.grade to use react 0.18.0, and am getting this error on boot. As far as I'm aware AppRegistry is imported correctly. Even if I were to comment out the code this error still comes up. This does work on iOS without issue.
What am I doing wrong?
EDIT: After trying other boilerplates that do support 0.18.0, I'm still coming across the same issue.
i just upgraded to react-native 0.18.1 today tough having some peer dependencies issues with 0.19.0-rc pre-release version.
Back to your question, what I did was
cd android
sudo ./gradlew clean (more information about how clean works here)
then back to the working directory and run
react-native run-android
you should restart your npm too after that upgrade.
hope this works for you.
I had the same issue on iOS and the cause for me was that my index.ios.js was incorrect (because I copy-pasted one of the examples without looking at its contents), it was ending with a module export declaration
exports.title = ...
exports.description = ...
module.exports = MyRootComponent;
Instead of the expected
AppRegistry.registerComponent('MyAppName', () => MyRootComponent);
You could have the same issue on android with the index.android.js I guess.
The one main reason of this problem could be where you would have installed a plugin and forget to link it.
try this:
react-native link
Re-run your app.
Hope this will help. Please let me know in comments. Thanks.
For me just restarting the computer fixed it.
(My error was "module appRegistry is not a registered callable module (calling runapplication) js engine: hermes")
Another top answer that is missing here and might have worked was just to kill node processes:
killall -9 node
[ Module AppRegistry is not registered callable module (calling runApplication) ]
I solved this issue just by adding
import { AppRegistry } from "react-native";
import App from "./App";
import { name as appName } from "./app.json";
AppRegistry.registerComponent(appName, () => App);
to my index.js
make sure this exists in your index.js
For me my issue was putting the wrong entry-file when bundling.
I was using App.js as my entry-file, hence the App couldn't find AppRegistry
Correct:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
Incorrect:
react-native bundle --platform android --dev false --entry-file App.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
I had this issue - across iOS & Android, developing on Mac - after I had been fiddling with a dependency's code in the node_modules dir.
I solved it with:
rm -rf node_modules
npm i
npx pod-install ios
Which basically just re-installs your dependencies fresh.
Hopefully this can save someone a headache. I got this error after upgrading my react-native version. Confusingly it only appeared on the android side of things.
My file structure includes an index.ios.js and an index.android.js. Both contain the code:
AppRegistry.registerComponent('App', () => App);
What I had to do was, in android/app/src/main/java/com/{projectName}/MainApplication.java, change index to index.android:
#Override
protected String getJSMainModuleName() {
return "index.android"; // was "index"
}
Then in app/build/build.gradle, change the entryFile from index.js to index.android.js
project.ext.react = [
entryFile: "index.android.js" // was index.js"
]
If you are facing this error in windows with android
open your root directory app folder and move into android folder .
cd android
gradlew clean
start your app again
react-native run-android
I don't know why, but when I move AppRegistry.registerComponent from the index.js file that is included in index.android.js to reside inside index.android.js directly, it seems to work.
restart packager worked for me.
just kill react native packager and run it again.
Check to see if you are not directly rendering something inside SafeAreaView
Ensure you are following this format
<SafeAreaView>
<View>
{children}
</View>
</SafeAreaView>
If you are using some of the examples they might not work
Here is my version for scroll view
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
Image
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
<View>
<ScrollView
ref={(scrollView) => { _scrollView = scrollView; }}
automaticallyAdjustContentInsets={false}
onScroll={() => { console.log('onScroll!'); }}
scrollEventThrottle={200}
style={styles.scrollView}>
{THUMBS.map(createThumbRow)}
</ScrollView>
<TouchableOpacity
style={styles.button}
onPress={() => { _scrollView.scrollTo({y: 0}); }}>
<Text>Scroll to top</Text>
</TouchableOpacity>
</View>
);
}
}
var Thumb = React.createClass({
shouldComponentUpdate: function(nextProps, nextState) {
return false;
},
render: function() {
return (
<View style={styles.button}>
<Image style={styles.img} source={{uri:this.props.uri}} />
</View>
);
}
});
var THUMBS = [
'http://loremflickr.com/320/240?random='+Math.round(Math.random()*10000) + 1,
'http://loremflickr.com/320/240?random='+Math.round(Math.random()*10000) + 1,
'http://loremflickr.com/320/240?random='+Math.round(Math.random()*10000) + 1
];
THUMBS = THUMBS.concat(THUMBS); // double length of THUMBS
var createThumbRow = (uri, i) => <Thumb key={i} uri={uri} />;
var styles = StyleSheet.create({
scrollView: {
backgroundColor: '#6A85B1',
height: 600,
},
horizontalScrollView: {
height: 120,
},
containerPage: {
height: 50,
width: 50,
backgroundColor: '#527FE4',
padding: 5,
},
text: {
fontSize: 20,
color: '#888888',
left: 80,
top: 20,
height: 40,
},
button: {
margin: 7,
padding: 5,
alignItems: 'center',
backgroundColor: '#eaeaea',
borderRadius: 3,
},
buttonContents: {
flexDirection: 'row',
width: 64,
height: 64,
},
img: {
width: 321,
height: 200,
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
I uninstalled it on Genymotion. Then run react-native run-android to build the app. And it worked. Do try this first before running sudo ./gradlew clean, it will save you a lot of time.
npm start -- --reset-cache
Probably port is already in use. I face similar issue when i first run react-native run-android and then npm start. I solve it like this: First, get the id of the process running in port 8081:
sudo lsof -i :8081
I had the same problem several times. The following solutions are solved my problem. I have listed out them according to complexity.
Restart the computer and see whether the problem is out
If it still exists, try to kill the process on running port usually 8080
netstat -ano | findstr 8080
taskkill /F /PID <PID>
If it still exists, go to 'android' directory as follow and go further
cd android
./gradlew clean
and start node
npm start
then run npx react-native run android or expo stat and press 'a'
Hope you will OK with the above issues.
My issue was cleared by following these commands (OS: Windows 10).
cd android
gradlew clean
cd..
npx react-native run-android
Please use Below mention : pakage
"react-native-reanimated": "^2.2.4",
I had the same problem and that because I was calling Stylesheet without importing..
In my case, my index.js just points to another js instead of my Launcher js mistakenly, which does not contain AppRegistry.registerComponent().
So, make sure the file yourindex.jspoint to register the class.
My issue was fixed by increasing my inotify max_user_watches:
sudo sysctl fs.inotify.max_user_watches=1280000
For me it was a issue with react-native dependency on next version of react package, while in my package.json the old one was specified. Upgrading my react version solved this problem.
For me just i linked with react native as this way : react-native link
I got this error in Expo because I had exported the wrong component name, e.g.
const Wonk = props => (
<Text>Hi!</Text>
)
export default Stack;
I solved this problem by doing the following:
cd android
./gradlew clean
taskkill /f /im node.exe
uninstall app from android
If you are using windows machine you need to do cd android then ./gradlew clean then run react-native run-android
This can because of any cache issue from node, pod ,gradle anywhere, its better to do an entire clean slate cleanup, for this use react native clean project
A typical reason I get this error is when I import badly a component (like with the wrong name). Same if I export it badly and them import it correctly. This may seem primitive but to err is human and many times this error appears, if cleaning the project and restarting it doesn't fix it, it can be this.
delete android/.gradle and reac-module.
than run yarn install and run-android
on iOS I have got this issue.
but after cleaning the build
folder by entering command+shift+k and building it again worked for me
you should also check the scheme should be debug