I have zoho image url like this -
https://crm.zoho.in/crm/org60011678237/specific/ViewAttachment?fileId=64i8a0191a1c3019d4a9e89fcecfc367b61dc&module=Accounts&parentId=251496000005863051&creatorId=251496000000244001&id=251496000005863052&name=reportImage%270.41817424824663885%27.jpg&downLoadMode=default
and I am showing this url like this
<View style={{ flex: 1 }}>
<WebView
source={{
html: `
<html>
<body><img src="https://crm.zoho.in/crm/org60011678237/specific/ViewAttachment?fileId=64i8a0191a1c3019d4a9e89fcecfc367b61dc&module=Accounts&parentId=251496000005863051&creatorId=251496000000244001&id=251496000005863052&name=reportImage%270.41817424824663885%27.jpg&downLoadMode=default">
</body></html>`,
// uri: "https://crm.zoho.in/crm/org60011678237/ViewImage?fileId=64i8a0191a1c3019d4a9e89fcecfc367b61dc&module=Accounts&parentId=251496000005863051&creatorId=251496000000244001&id=251496000005863052&name=reportImage%270.41817424824663885%27.jpg&downLoadMode=inline",
}}
javaScriptEnabled
domStorageEnabled
allowFileAccessFromFileURLs
startInLoadingState
originWhitelist={["*"]}
mixedContentMode="compatibility"
/>
{/* <Image
source={{ uri: selectedImage }}
style={{
width: "100%",
height: "50%",
resizeMode: "contain",
}}
/> */}
</View>
but image not loading or sometime opening zoho web page please guide me over this. thanks
Related
How to set full screen image inside Modal that supports all device screen sizes without starching image in react-native ?
<Modal
animationType="fade"
visible={props.isOpen}
onRequestClose={props.onCloseModal}>
<SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>
<View style={{flex: 1}>
<Image source={"path/to/local/image"} resizeMode='stretch' style={imageStyle}/>
</View>
</SafeAreaView>
</Modal>
Use cover for resizeMode in Image.
<Modal
...
>
<Image
resizeMode="cover"
style={{width: '100%', height: '100%'}}
source={{
uri: 'https://reactnative.dev/img/tiny_logo.png',
}}
/>
</Modal>
I have a problem when I try to render an image inside the React Native Maps Callout.
The image does not render.
{this.state.database.map((route, idx) => {
if (route.Image) {
return (
<MapView.Marker
coordinate={{ latitude: Number.parseFloat(route.Latitude), longitude: Number.parseFloat(route.Longitude) }}
key={idx}
image={img_pin}
ref={(ref) => this.marker = ref}
>
<MapView.Callout tooltip style={{ flex: 1, backgroundColor: 'white' }}>
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
<Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
<Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
<Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
</View>
<View style={{ margin: 5 }}>
<Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100 }} />
</View>
</View>
</MapView.Callout>
</MapView.Marker>
);
}
})}
Image error don't render inside Callout
"react-native": "^0.57.8",
"react-native-maps": "^0.24.2",
Use Image inside Text component
<Text> <Image style={{ height: 100, width:100 }} source={{ ... }} resizeMode="cover" /> </Text>
Another workaround by using WebView. I think is the proper solution for this right now.
<View>
<WebView style={{ height: 100 , width: 230, }} source={{ uri: ... }} />
</View>
Make sure your route.image is in the form of url schema,
exampleData
source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
if correct,
GIF and WebP support on Android
When building your own native code, GIF and WebP are not supported by default on Android.
You will need to add some optional modules in android/app/build.gradle, depending on the needs of your app.
build.gradle:
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.10.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.10.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.10.0'
implementation 'com.facebook.fresco:webpsupport:1.10.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.10.0'
}
Usage
<MapView.Callout tooltip={true} style={{ backgroundColor: 'white', height: contentHeight, width: contentWidth }}>
<View style={{ flexDirection: 'column' }}>
<View style={{ flex: 1 }}>
<Text style={styles.textCallout}>Latitude: {route.Latitude}</Text>
<Text style={styles.textCallout}>Longitude: {route.Longitude}</Text>
<Text style={styles.textCallout}>Status: <Icon name={route.Status === 1 ? 'checkmark-circle' : 'close-circle'} style={{ color: route.Status === 1 ? 'green' : 'red', fontSize: 16 }} /> </Text>
<Text style={styles.textCallout}>Velocidade: {route.Speed} km/h</Text>
</View>
<Image source={{ uri: `data:image/gif;base64,${route.Image}` }} style={{ width: 150, height: 100, resizeMode="cover" }} />
</View>
</MapView.Callout>
I am using Webview component in React Native to render HTML content. The problem I am facing is that I cannot make the height variable so it can adapt to any content it has.
return (
<View style={{flex: 1}}>
<Header
containerStyle={{
backgroundColor: 'white',
borderBottomColor: '#dee0e2',
borderBottomWidth: 1
}}
centerComponent={{ text: 'Noticia', style: { color: 'black' } }}
leftComponent={
<TouchableHighlight onPress={() => navigate('homeScreen')}>
<Text style={{color: '#4289f4'}}>Atrás</Text>
</TouchableHighlight>
}
/>
<ScrollView style={{padding: 5}}>
<View style={{flexDirection: 'column'}}>
<Text style={{textAlign: 'center', fontSize: 17, fontWeight: 'bold'}}>{noticia[0].titulo}</Text>
<Image style={{width: '100%', height: 200, alignSelf: 'stretch', marginTop: 10}} source={{uri: noticia[0].imagen}} />
<View style={{height: 200, backgroundColor: 'red'}}>
<WebView
source={{html: noticia[0].articulo}}
scalesPageToFit={(Platform.OS === 'ios') ? false : true}
/>
</View>
</View>
</ScrollView>
</View>
);
If I don't give the <View>' that contents ' <Webview>' a height it does show me nothing. Tried already withflex: 1` but nothing changes.
In your parent view (root view directly under return()) style it as
height: '100%',
width: '100%'
It will adopt to any size screen.
I tried to create an app using react native and used the following code to switch between different views in ViewPagerAndroid:
_onPressButton = (position) => {
this.refs.viewPage.setPage(position);
}
render() {
return (
<ViewPagerAndroid
style={styles.viewPager}
initialPage={0}
ref="viewPage"
>
<View style={styles.pageStyle} key="1">
<Text
style={{ fontSize: 24 }}
>
Spring
</Text>
<Image
source={{ uri: 'https://media.defense.gov/2016/Apr/06/2001512498/780/780/0/160406-F-PM645-019.jpg' }}
style={{ width: 420, height: 230 }}
/>
<Button
onPress={this._onPressButton.bind(this, 2)}
title="Summer"
color="#841584"
/>
</View>
<View style={styles.pageStyle} key="2">
<Text
style={{ fontSize: 24 }}
>
Summer
</Text>
<Image
source={{ uri: 'https://i2.wp.com/gothe-extramile.com/wp-content/uploads/2017/05/kinkakuji002.png?resize=600%2C450&ssl=1' }}
style={{ width: 420, height: 230 }}
/>
<Button
onPress={this._onPressButton.bind(this, 1)}
title="Spring"
color="#841584"
/>
</View>
</ViewPagerAndroid>
);
}
I expected to switch from Spring to Summer and vice versa. However, the button in Summer cannot go back to Spring. Any comment would be appreciated very much.
I have some code to have an image of random size spread to the full width of a container + vertically center inside the container. But what I need is to anchor it at the top.
In CSS i would use background-position, but it's not supported in React Native. I feel I've tried every combination of resizeMode, absolute positioning, etc - but still haven't been able to figure it out.
<View style={{
flex: 1,
height: 120,
}}>
<Image source={{uri: source}} style={{
flex: 1,
width: '100%',
resizeMode: 'cover'
}}>
</Image>
</View>
It seems crazy that there is still not a standard way of anchoring an image in React Native as there is in regular css (at least if there is, I stall haven't found it). But this lib does the trick for me:
react-native-scalable-image
Hope it helps!
If you can get the height of the image h, then you can show the full image first then hide the bottom part with a view container of static height eg. 250:
<View style={{ height: 250 }}>
<Image source={{ uri: source }} style={{ width: null, height: h }} />
</View>
I have found a trick to do that
You need to wrap the wanted height in a View with a overflow hidden
And set a large height in the image style
const WANTED_HEIGHT = 170
<View style={{ height: WANTED_HEIGHT, overflow: 'hidden' }}>
<Image
source={{ uri }}
style={{
width: '100%',
height: 500,
}}
/>
</View>
return (
<View
style={{
flex: 1,
height: 120,
justifyContent: "center",
alignContent: "center"
}}
>
<TouchableOpacity onPress={() => alert("Hello ")}>
<Text style={{ alignSelf: "center" }}>Anchor Tag</Text>
</TouchableOpacity>
<Image
source={{
uri: "https://shoutem.github.io/img/ui-toolkit/examples/image-3.png"
}}
style={{
width: "100%",
height: 100,
resizeMode: "cover"
}}
/>
</View>