i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
i am building a mobile app and i need to show the user the trading view chart so that they can use.
i have searched and i haven't seen any react-native package for implementing the chart.
There is no official way to do this right now. As a turnaround, I used react-native-webview library for this purpose. My code implementation is as follows:
<WebView
forceDarkOn
style={{
backgroundColor: THEME.COLORS.primaryBackground,
}}
source={{
uri: `https://www.tradingview.com/chart?symbol=usd`,
}}
useWebKit={true}
originWhitelist={['https://www.tradingview.com']}
allowsInlineMediaPlayback={true}
incognito
/>
Please note that I have used incognito and originWhitelist params. Incognito for disabling cache as trading view will display a non dismiss ad after some time and originWhitelist for disabling popup ads that open new windows.
Related
import InAppReview from 'react-native-in-app-review';
<TouchableOpacity onPress={()=>{InAppReview.RequestInAppReview()}}>
<Text style={{fontSize:22}}>Check app rating</Text>
</TouchableOpacity>
I am using this simple code to get pop up of in app rating. As i am also uploaded app in internal testing. But not able to see that popup i am not able to get what i am doing wrong. As i have not gave any rating on the play store also with this account. So let me know how to debug it or east to test it. I also have to add this popup on some events. so please let me know how can i get it working. Thanks
The company I work for has many small angular applications they would like to make available in an phone app. Mostly because the users are usually in poor connection places so it would be nice if they only need to make the API calls and not load resources, and they also want to be able to make push notifications for new events.
So looking into this I'm trying to see if its possible to embed Angular (v13 as of now) applications inside of React Native. Where the react app will mostly act as a menu and notifications handler.
To be honest I haven't found much help online besides that I probably need to use a <WebView>. So i tried compiling a simple Angular app and placed it in /assets/my-app/
and then tried the following (with a few variations on how I wrote the URL).
<WebView source={{uri: '~/assets/my-app/index.html'}} style={{marginTop: 20}} />
But that did not work at all.
So, my questions are:
Can this be done?
Is this the right method?
How do I accomplish this?
Thank you
I have been trying to get offline leaflet/openStreetMap tiles rendering in the react native maps view with both the <LocalTile/> and <UrlTile/> components.
I can render the map on android and iOS and can see the standard map for each platform with PROVIDER_DEFAULT (Apple's MapKit and Google Maps, respectively).
I download the tiles as a zip file, and unzip them into the appropriate document storage path on each type of device.
I verify that the paths are working and that the map can access these images with the following code:
render() {
const { region } = this.state;
//gets the document directory based on platform(ios/android)
const docDir = BlobService.setDocDir();
const tilesPath = `${docDir}/projects/${this.props.projectId}/pdf/tiles/${
this.props.floorData.id
}/{z}/tile_{x}_{y}.png`;
return (
<View style={styles.container}>
<MapView
provider={PROVIDER_DEFAULT}
mapType={MAP_TYPES.STANDARD}
style={styles.map}
initialRegion={region}
>
<LocalTile pathTemplate={tilesPath} tileSize={512} zIndex={-1} />
</MapView>
<View style={styles.buttonContainer}>
//button code removed for brevity
</View>
</View>
);
}
Referring to my comments within my code snippet above:
1) the tiles path is formatted in (0,1,2,3) folder formats, with the numbers corresponding to the appropriate zoom levels.
2) The path to tiles seems to work, however it only seems to infinitely tile a single tile, and the zoom levels don't seem to match OSM/Leaflet zoom levels appropriately:
I have left a comment on this thread on github, which looked nearly identical to all the steps I have taken, except that I am ejected from expo in the app I am working with.
I tried to follow this article but I can't seem to understand how to map these tiles into the region appropriately. Using the formula he's provided doesn't seem to mimic the same zoom levels as in react-leaflet as it was previously implemented, and I always get an out of range error when trying to set the region parameters.
I've seen the examples provided and am simply at a loss for how to convert this mapping system to work with OSM tiles that work in a leaflet based map view.
Hello are you still working on this?
I read your question as I have issues with new react native, I use webview not the mapview, it worked fine until react 0.44 then latest versions block webview access to file system of app data files.
Do you manage the unzipping and access to tiles within your app? I will probably try react-native-maps for offline times since I am stuck with using webview for the android app.
About your question, you need some geographic systems (GIS) skills. If you georeference the building corners to latitude, longitude then you can relate it to the tiles scheme used in leaflet, I do this with quantumGIS (qGIS) and QmetaTiles plugin.
I have a question that I have not been able to solve for some time and I have not been able to do it yet. Do you know how to make a text to speech work in background React Native Android app?
If you want sounds to work on iOS in background mode you need to do 2 things:
enable audio capabilities in xcode
configure AVAudioSession. There is already a package for it here: https://github.com/BonnierNews/react-native-audio-session
I did this at the root of the project, using react-native-sound, but should be the same with react-native-audio-session:
import Sound from 'react-native-sound';
Sound.setCategory('Playback'); // this will play sound in background
Somewhere in your background runner:
Tts.speak('Some text);
We can use ACCESSIBILITY.Accessibility, means making your apps usable to both normal users and users with disabilities. Any person can have one or more form of disability.
Step1:-
Turn on TalkBack in your device Settings
Open your device's Settings app Settings app.>>Open Accessibility>> then TalkBack.>>Turn on TalkBack.
then add following props to every component of ReactNative.
accessible={true}
accessibilityLabel={label}
Like this:-
return (
<TouchableOpacity
accessible={true}
accessibilityLabel={label}
accessibilityTraits={"button"}
accessibilityComponentType={"button"}
onPress={() => {
onPress(data.name);
}}
>
<Icon
name={icon}
style={styles.icon}
size={icon_size}
color={icon_color}
/>
</TouchableOpacity>
)
I an writing a react-native app, And I noticed that while the buttons look like native buttons when clicked - they do not behave as one (At lease not like android button behave).
Clicking on android app button - make a sound and give the user an haptic Feedback.
On the sound I saw that there is github discussions and open issue, but I could not found anywhere anything about the haptic Feedback.
How can I make my view (any touchable view..) to make haptic feedback on click?
This is really important feeling in an app.
I want something like this (In android)
View view = findViewById(...)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
This doesn't require from the app to have permission for Vibrate.
And managing haptic feedback on my own with the Vibrate api will cause users that disable this option globally to experience bad behavior
Thanks
If you are using Expo with react-native, I recommend you to use Expo haptics
After installing the library You can use it like:
<TouchableOpacity onPress = { ()=> {
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
or
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
or
Haptics.selectionAsync()
} } > </TouchableOpacity>
I found this component on github https://github.com/charlesvinette/react-native-haptic
I didn't try it yet, but it should help you to get the haptic feedback you want.
I also have nearly the same requirements and I ended up using this library react-native-haptic-feedback.
Keep in mind that haptic feedback is available only on some latest android devices and in iOS above iPhone 6s. Here is a simple code snippet:
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
const options = {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false
};
ReactNativeHapticFeedback.trigger("impactMedium", options);
In your case, it will work directly with the button's onPress method such as:
<TouchableOpacity onPress={()=>{ReactNativeHapticFeedback.trigger("impactMedium", options);}} />
Note: I found that the most versatile type which is supported by maximum devices is impactMedium.
You can use the built-in Vibration module facebook.github.io/react-native/docs/touchablewithoutfeedback
import { Vibration } from 'react-native';
...
<TouchableWithoutFeedback
onPressIn={() => Vibration.vibrate()}
/>
Remember to include this in your AndroidManifest
<uses-permission android:name="android.permission.VIBRATE" />
I published a project on Github which provides this functionality.
Check this repo out: react-native-haptic-view