I'm using a cloud based storage for avatar images. If an image for a user doesn't exist I want to fallback to the user title.The code below works for android, but on IOS the image is just blank and no title.
<Avatar rounded source={{ uri: avatarUrl }} title={userName.slice(0, 2)} />
On a regular Image you can use onError to handle this, but I don't see how I can use this on the Avatar.
Anyone have any suggestions how to fix this? or another package that handles it better?
Thanks!
Related
As the title said I really don't know how to stop react-native Image component to cache the images from the same URI. I'm always using the same URL to get the user profile image because the generated URI has a static part and a variable part based on the user id, if the user change profile image, this image is never updated (on device). I've already tried to add a uuid to the end of the URL as query param but nothing has changed:
<Image
source={{
uri: `${Config.profileImageBaseUrl}/${user.id}.jpg?id=${imageUuid}`,
}}
</Image>
Do you have some other suggestions or some workaroud to this problem?
If you need some other information feel free to ask!
The display for image from local file system stops work with Image in React Native 0.66. Here is the code:
<Image
source={{uri: img_source}}
.../>
Here img_source is a string returned by image picker (not from react-native-cameraroll). here is an example of imp_source in iOS emulator:
/Users/macair/Library/Developer/CoreSimulator/Devices/107E832C-4828-47D9-83D1-DABE20BA32F3/data/Containers/Data/Application/5C0BB55D-4834-47A9-B7CF-22CE9355C3FD/tmp/react-native-image-crop-picker/A52D733E-DB54-4C72-90DE-2444C3C45FD4.jpg
The app has the permission to pick up image from local gallery. Tried 'file://' + imp_source with no avail. How to make the code above working with Image?
Use the uri value from image picker. It looks like you're attaching a bunch of things prior to the root of the application in your URL. Without seeing the code, I'm assuming the URI should be file:///tmp/react-native-image-crop-picker/A52D733E-DB54-4C72-90DE-2444C3C45FD4.jpg, not the full system path.
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.
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>
)