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>
Related
While trying to resolve module idb-keyval from file C:\Users\ADMIN\Desktop\Fintech\node_modules\parse\lib\react-native\IndexedDBStorageController.js, the package C:\Users\ADMIN\Desktop\Fintech\node_modules\idb-keyval\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:\Users\ADMIN\Desktop\Fintech\node_modules\idb-keyval\dist\compat.cjs. Indeed, none of these files exist:
C:\Users\ADMIN\Desktop\Fintech\node_modules\idb-keyval\dist\compat.cjs(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
C:\Users\ADMIN\Desktop\Fintech\node_modules\idb-keyval\dist\compat.cjs\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
You need to modify the metro.config.js file.
Add the cjs extension in the resolver part
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
resolver: {
sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs'],
},
};
I think you have same issue as here
you will most likely find that somewhere along the line your auto import imported useEffect, useState etc from there instead of from "react" itself.
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);
});
I'm building a react-native app that uses tensorflow to recognize images, I'm following the steps in this tutorial.
I did everything according to the explanations, including the part of "Fetching files". I created the assets folder and put the files in it (the path is correct).
But when I run this code:
const tfImageRecognition = new TfImageRecognition({
model: require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt'),
});
The app gives the following error:
I already tried to create a new project, I imported the react-native-tensorflow import { TfImageRecognition } from 'react-native-tensorflow';, I updated the cache, I deleted the folder node_modules and also I created the file "rn-cli.config.js" that is requested in the tutorial to give access to the files in the assets folder. Any idea how to fix this?
I'm using expo to run the app on mobile (android).
npm: 5.51
expo: 51.4.0
react-native: 0.54.0
react-native-cli: 2.0.1
This problem didn't occur with me. Try react-native start --reset-cache and then run the app again.
There is a better way to this.
import model from './assets/tensorflow_inception_graph.pb';
import labels from './assets/tensorflow_labels.txt';
const tfImageRecognition = new TfImageRecognition({
model,
labels
});
Restart your server.
I tried the same example as you mentioned I got accessed Image and Text.
I stored files inside assets in the same directory. Can you share code to produce an error that you faced?
async recognizeImage() {
try {
const tfImageRecognition = new TfImageRecognition({
model:require('./assets/tensorflow_inception_graph.pb'),
labels: require('./assets/tensorflow_labels.txt')
})
const results = await tfImageRecognition.recognize({
image: this.image
})
const resultText = `Name: ${results[0].name} - Confidence: ${results[0].confidence}`
this.setState({result: resultText})
await tfImageRecognition.close()
} catch(err) {
alert(err)
}
}
As you mentioned your using expo then I'm assuming that run npm eject already. As react-native-tensorflow this library require native changes
You must add extensions in your rn-cli.config.js, in order to require tensorflow_inception_graph.pb and tensorflow_labels.txt
module.exports = {
getAssetExts() {
return ['pb', 'txt']
}
}
Replace ./ with so ../ , so final code will be -
model: require('../assets/tensorflow_inception_graph.pb'),
labels: require('../assets/tensorflow_labels.txt')
I am using create-react-native-app. I want to use react-native-vector-icons
But its not showing anything on android screen (I am viewing it on expo app)
Here is what I did:
App.js:
const Courses = TabNavigator({
ReactCourses: { screen: ReactCourses },
NativeCourses: { screen: NativeCourses },
}, {
tabBarOptions: {
activeTintColor: '#e91e63',
swipeEnabled: true,
showIcon:true,
},
});
ReactCourses.js:
import Icon from 'react-native-vector-icons/MaterialIcons';
static navigationOptions = {
tabBarLabel: 'React Courses',
tabBarIcon:({ tintColor }) => (
<Icon
name={'home'}
size={26}
style={[styles.icon, {color: tintColor}]} />
)
}
Add the following things in android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
And then execute the command
react-native run-android
When using Create React Native App, it's not possible to use react-native link with native module packages. Because CRNA projects are loaded in the Expo client app, you'll want to follow the relevant documentation to get vector icons working in your project.
Also, make sure that you're using the Expo preset in .babelrc. It should look like the one provided in the template project.
I think what you did is just a half thing, so after running npm install did you link the project with the third party's native code by running react-native link? if yes, did you rebuild the project by going to android studio and hit play button?if yes then just restart your packager and we are good to go...
Cheers :)
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.