I createad reports with GoodData UI and works successful.
GoodData UI exists many requests. In desktop OK but In mobile will use many 4G to customer.
Do exist control to requests ?
image
Hi Ivan,
I used react link.
In image exists 856 request without to stop.
Code used:
<div style={{ height: 400, width: 600 }}>
<Visualization
identifier="abbAX8VdfTM8"
projectId="dkrwpz8ki4iplckqups7luwz8uiviacy"
/>
</div>
I updated the dependencies and worked successfully.
"dependencies": {
"#gooddata/react-components": "^6.1.1",
"node-sass": "^4.11.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-scripts": "2.1.2" },
Related
I went through all the set up steps at https://reactnativeelements.com/docs and am just trying to do a simple Header following their example.
If I click the "Copy Code" button in their playground, it gives me this:
import * as React from "react";
import { Header, Icon } from "#rneui/base";
import { SafeAreaProvider } from "react-native-safe-area-context";
export default () => {
return (
<Header
backgroundImageStyle={{}}
barStyle="default"
centerComponent={{
text: "MY TITLE",
style: { color: "#fff" }
}}
centerContainerStyle={{}}
containerStyle={{ width: 350 }}
leftComponent={{ icon: "menu", color: "#fff" }}
leftContainerStyle={{}}
linearGradientProps={{}}
placement="center"
rightComponent={{ icon: "home", color: "#fff" }}
rightContainerStyle={{}}
statusBarProps={{}}
/>
);
}
When I do that in my app, though, it shows question marks for the icons:
Their set up docs do include this step for manual linking:
react-native link react-native-vector-icons
which I can't do because react-native no longer supports it.
But I don't know what's going wrong here. Any help would be appreciated.
If it helps, these are my dependencies in my package.json:
"#rneui/base": "^4.0.0-rc.6",
"#rneui/themed": "^4.0.0-rc.6",
"react": "18.0.0",
"react-native": "0.69.4",
"react-native-asset": "^2.0.1",
"react-native-gesture-handler": "^2.6.0",
"react-native-linear-gradient": "^2.6.2",
"react-native-safe-area-context": "^4.3.3",
"react-native-vector-icons": "^9.2.0"
For Android, I just had to follow the installation instructions at the Github repo for react-native-vector-icons here. (You might think that's obvious, but the docs for react-native-elements just have you do a yarn/npm install of react-native-vector-icons and act like that's enough to get you up and running.)
They had me add this to the android/app/build.gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
and then rebuild the app.
For iOS it's more complicated. You need to use XCode and manually copy over the fonts, and then update some files. The directions are at that link above. But they're not quite accurate because they have you add fonts to the Build Phases > Copy Bundle Resources thing in XCode. (In my case, I didn't manually have to add them. They were already there.) However, running the code gave me an error "multiple commands produce" these .ttf file.
The solution to that was to go back to Build Phases > Copy Bundle Resources and manually delete all the icon .ttf files listed there, as per this article.
Everything is working now. It's stupid it's this complicated though
I created a drawerNavigator and now I'm trying to add an icon to the header. The issue is when I add my HeaderButton I get this error:
Component exception
In the navigationOptions I tried to use both HeaderButton and CustomHeaderButton but it doesn't work and I can't seem to figure out the issue.
This is my code:
HeaderButton.js
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { Ionicons } from "#expo/vector-icons";
const CustomHeaderButton = (props) => {
return (
<HeaderButton
{...props}
IconComponent={Ionicons}
iconSize={23}
color="black"
/>
);
};
export default CustomHeaderButton;
WelcomeScreen.js
import React from "react";
import { View, Text, StyleSheet, ImageBackground, Image } from "react-native";
import MainButton from "../components/MainButton";
import Colors from "../constants/Colors";
import { HeaderButtons, Item } from "react-navigation-header-buttons";
import HeaderButton from "../components/HeaderButton";
const WelcomeScreen = (props) => {
return (
<ImageBackground
source={require("../assets/images/tsl.jpg")}
style={styles.backgroundImage}
>
<Image
source={require("../assets/images/slogan.jpg")}
style={styles.logo}
/>
<View style={styles.buttonContainer}>
<MainButton
onPress={() => {
props.navigation.navigate({
routeName: "UserLogin",
});
}}
>
User Login
</MainButton>
<MainButton
onPress={() => {
props.navigation.navigate({ routeName: "DriverLogin" });
}}
>
Driver Login
</MainButton>
<View style={styles.newAccountContainer}>
<Text style={styles.newAccountText}>Don't have an account?</Text>
</View>
<View style={styles.registerContainer}>
<MainButton style={styles.registerButton}>Register now</MainButton>
</View>
</View>
</ImageBackground>
);
};
WelcomeScreen.navigationOptions = {
headerLeft: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item title="Menu" iconName="ios-menu" />
</HeaderButtons>
),
};
Thank you!
For everybody who will get error (on Max's course, vid 173 :) ):
TypeError: (0, _native.useTheme) is not a function. (In '(0, _native.useTheme)()', '(0, _native.useTheme)' is undefined)
Try to add npm i --save #react-navigation/native
If it doesn't help, delete node_modules & package-lock.json, check & update your package.json to correct versions. Here is my dependencies:
"dependencies": {
"#expo/vector-icons": "^12.0.5",
"#react-navigation/native": "^5.9.4",
"expo": "40.0.0",
"expo-app-loading": "^1.0.1",
"expo-font": "~8.4.0",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.2",
"react-native-web": "^0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0",
"react-redux": "^7.2.4",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9"
After you'll done this, just run npm install.
I hope that it will helps somebody. Learn and enjoy!=)
I had the same issue and I did npm i --save #react-navigation/native since the error stated that useTheme was not found.
Hi I've been having this exact same issue. I'm working through a react-native course on Udemy.
Obviously this is specific to the course code etc. but I hope something here can fix your issue also.
I tried a few things so I'm not exactly sure what fixed the issue... here is what I did:
I changed the react-navigation and react-navigation-header-buttons vesrsions in package.json to those which are used in Max's code (3.11.1 & 3.0.1 respectively) and I think I ran npm install. (to update them?)
App didnt work, wouldnt launch error with react-navigation-header-buttons
ran expo update, to update packages and re-build node_modules and package-lock.json
was given a list of packages which didnt update: expo-app-loading, react-navigation, react-navigation-drawer, react-navigation-header-buttons, react-navigation-stack, react-navigation-tabs
ran expo install react-navigation react-navigation-drawer react-navigation-header-buttons react-navigation-stack react-navigation-tabs
noticed react-navigation warning that v3.13.0 wasnt supported upgrade to 4.x
ran npm install react-navigation#4 installed 4.4.4
react-navigation-header-buttons was still at an older version 3.0.5, so I ran npm install react-navigation-header-buttons#6 installed 6.3.1
npm start - Apps are working on emulator and physical device!
My working app now has the following dependencies (in package.json):
"expo": "~40.0.0",
"expo-app-loading": "^1.0.1",
"expo-status-bar": "~1.0.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-reanimated": "~1.13.0",
"react-native-screens": "~2.15.2",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.0",
"react-navigation-header-buttons": "^6.3.1",
"react-navigation-stack": "^2.10.4",
"react-navigation-tabs": "^2.11.0"
I had the same, and resolved by:
expo install react-navigation-header-buttons#6
because npm install ... throw me an error
You need to go to your package.json file, and set the following version to the "react-navigation-header-buttons" package:
"react-navigation-header-buttons": "^6.3.1"
Then run npm install again and try to run your app.
Check dependency of react-navigation-header-buttons in package.json. It may not of version 6. If it is the case, then delete that line from package.json and reinstall navigation-header-button of version 6 using npm install --save react-navigation-header-buttons#6
"md-cart" is no longer available in the ionicons list, replace the iconName with a valid name like
iconName = "cart-outline"
in my case and it will start working!
yarn add #react-navigation/native or npm i --save #react-navigation/native should solve the problem.
For everybody who will get error (on Max's course, vid 173:), run this command:
npm install react-navigation-header-buttons#6
And it will fix the issue.
I followed this step and the error disappeared:
first:
npm install --save #react-navigation/native
or
yarn add #react-navigation/native
next:
delete node_modules And I reinstalled the packages again
I'm trying to develop a ReactNative app which uses RNCamera, along with other libraries like react-navigation. Here are the dependencies and their versions that I am using:
"#react-native-community/masked-view": "^0.1.10",
"react": "16.13.1",
"react-native": "0.63.4",
"react-native-camera": "^3.42.0",
"react-native-cli": "^2.0.1",
"react-native-gesture-handler": "^1.9.0",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.16.1",
"react-navigation": "^4.4.3",
"react-navigation-stack": "^2.10.2"
Everything is working just fine, but the problem is that I want to use the live text recognition which does not give me the results expected. This is the code I am using:
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {RNCamera} from 'react-native-camera';
const CameraScreen = ({navigation}) => {
state = {
recordOptions: {
mute: false,
maxDuration: 5,
quality: RNCamera.Constants.VideoQuality['288p'],
}
};
return (
<RNCamera
ref={ref => {
camera = ref;
}}
style={{
flex: 1,
width: '100%',
}}
type={'back'}
flashMode={'off'}
autoFocus={'on'}
zoom={0}
whiteBalance={'auto'}
ratio={'16:9'}
focusDepth={0}
trackingEnabled
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
onTextRecognized={({text})=>{console.log(text)}}
></RNCamera>
);
};
const styles = StyleSheet.create({});
export default CameraScreen;
As you can see, I call an console.log function for onTextRecognized, which is triggered every few milliseconds. What happens is that I am constantly reciving the text 'undefined', which does not change even if I put text in front of the camera for a minute. This is the logs I got (it can be seen that logs appear every few milliseconds):
logs file
Does anybody know how can I get the text without taking a picture?
I also have tried to add 'textBlocks' from other tutorials but I can't make it work (please tell me if you also know how to do this).
Ok that was an stupid question, sorry.
The curly brackets that I put in onTextRecognized={({text})=>{console.log(text)}} are for extracting specific information from a bigger object. As the 'text' parameter does not exist in the 'textBlocks' object that onTextRecognized returns, the console prints undefined. In order to make it work you actualy have to put {textBlocks} where I put text, like so:
onTextRecognized={({textBlocks})=>{console.log(textBlocks)}}
Putting that will return the 'textBlocks' object from a bigger 'textBlock'object (they have the same name but the inner 'textBlocks' is easier to use).
I have strange problem with webview in react native.
Some pages, which are made in reactjs are not visible in webview
For example this code
<WebView
source={{uri: 'https://cassetterocks.github.io/react-infinite-scroller/demo/'}}
style={{marginTop: 20}}
/>
is working without problems and the page appears in webview and is visible in app.
But when i change it to this
<WebView
source={{uri: 'http://projects.wojtekmaj.pl/react-calendar/'}}
style={{marginTop: 20}}
/>
nothing is displayed, only white screen.
Has webview some special limitations or does somebody know reason for this behavior?
Thank you
EDIT:
After lot of attemps a realized that problem is not in react native but in react js. I found few pages in react-js based on this configuration
"dependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"webpack": "^1.13.2"
}
and they working without problem in webviews
but pages based on this configuration
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"webpack": "^4.4.1",
"webpack-cli": "^2.0.13"
}
are problematic.
But i don't known if the problem is in react version or webpack version :-(
FINAL EDIT:
Problem is in probably in react version, with 15.3.2 is everything ok, with 16.2.0 webview display nothing
UIWebView has all sorts of limits that have plagued hybrid developers for a decade now. I'm not aware of a comprehensive list of all the hairs it will make you pull out. It's generally a whack-a-mole exercise I'm afraid. Here's an article which will point to some of the pitfalls... http://undefinedvalue.com/beware-lure-ios-uiwebview.html
As your googling you may see references to Apple fixing these problems in WKWebView but alas this has it's own problems discussed in this React Native github issue: https://github.com/facebook/react-native/issues/321
I've just tried to use the vue-katex module https://www.npmjs.com/package/vue-katex.
I set up a simple example using vue-cli
$ vue init webpack-simple my-project
And then I added the vue-katex package, added the few lines of code to put some KaTeX mathematical stuff on the page and started my dev server. However, the mathematical notation is not displaying properly, and I'm getting a big black box displayed on my page.
Here's the relevant part of my package.json:
"dependencies": {
"vue": "^2.5.11",
"vue-katex": "^0.1.2"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
Here's my app code (I've tried to take the code directly from the vue-katex npm page above):
<template>
<div id="app">
<div v-katex:display="'\\frac{a_i}{1+x}'"></div>
<img src="./assets/logo.png">
...
</div>
</template>
<script>
import Vue from 'vue';
import VueKatex from 'vue-katex';
Vue.use(VueKatex);
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
And a screenshot of the result:
You can see the math doesn't render and I get this weird big black box. I've included the dev tools inspection to try to make it easier to diagnose.
I've tried to keep everything as simple as possible - if anyone could tell me what I'm doing wrong, I'd really appreciate it!
Many thanks in advance,
One step is missing from the vue-katex docs. If you go to the parent project, https://github.com/Khan/KaTeX you'll find that in their walk through they include a link to an external css file. You'll need to include this too:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha2/katex.min.css" integrity="sha384-exe4Ak6B0EoJI0ogGxjJ8rn+RN3ftPnEQrGwX59KTCl5ybGzvHGKjhPKk/KC3abb" crossorigin="anonymous">