I tried with customCallout from react-native-maps library but it is not working on iOS simulator.
in my issue what I was implementing the react-native-map library and i want to display the image in my custom-callout view (custom callout is annotation view in map library which show popup after clicking the marker) but if i put the image tag in that view image is not displaying.
<Callout alphaHitTest tooltip>
<CustomCallout>
<View style={{ flexDirection: "row" }}>
<Icon name="map-marker" size={30} />
<Text style={{ width: "50%" }}>
{this.state.currentAddress} //coordinates
</Text>
<Text>
<Image
source={require("./../assets/images/profile.png")}
/>
</Text>
</View>
</CustomCallout>
</Callout>
Related
<View style={{alignItems:'center',marginTop: 15, height:320,backgroundColor:'#fff',paddingTop:10}}>
<TouchableOpacity style={{position:'absolute',right:15,top:25,elevation:2}}>
<Icon name="share-social-outline" size={30} color="#0057ff"/>
</TouchableOpacity>
<Carousel
autoplay
autoplayTimeout={5000}
loop
index={0}
pageSize={BannerWidth}
>
{images.map((image, index) => renderPage(image, index, navigation))}
</Carousel>
</View>
</View>
I used TouchableOpacity on icon and Gave Elevation to Touchable Opacity which is on image carousel, Its Not working. Please Help
I got the answer by experimenting myself; In Order To get Touchableopacity on icon over Image Carousel, we just need to use 'zIndex=3' Not 'elevation'.
In Android system, all icons are showing normally. But in TestFlight on ios, the icons showing like image below;
Error
edit:
the mentioned code:
<Card borderRadius={25}>
<View style={{marginBottom: 15}}>
<Input
placeholder="Email"
onChangeText={login => setLogin({ login })}
value={login}
inputStyle={{ marginLeft: 10, color: 'black' }}
containerStyle={{ width: '100%' }}
keyboardType="email-address"
returnKeyType="next"
autoCorrect={false}
leftIcon={
<Icon
name="envelope"
type="font-awesome"
color="#00A2BC"
size={20}
/>
}/>
</View>
</Card>
I am using
import { Icon } from 'react-native-elements';
i installed the app using TestFlight on iphone ios.
I have a checkbox with text next to it, requiring an Image (which is an icon) attached to the last word for more information. I haven't found a reliable way to do this. The only way is either breaking up the text into different chunks and wrapping the parent or absolute positioning of the icon - both of which end up positioned differently on different devices depending on size.
When I add the image inside of the text, I get a weird background image of a file icon.
When I keep it outside, It just defaults to the end of the text block:
My code snippet:
<View style={{ flexDirection: 'row' }}>
<Checkbox style={styles.checkbox} checked={agreedChecked} />
<View style={{ flexDirection: 'row', flex: 1 }}>
<Text style={[ styles.label]}>Yes, I agree to using this payment method for automatic monthly charges.</Text>
<Image source={require('../../assets/Icon_Info.png')} />
</View>
</View>
Blown up to show weird file background:
(note it does not have the background when outside the text element)
Can you simply copy & paste this code segment and try it? It works for me. If you want, I can create a repo for you.
Github Example Repo
https://github.com/WrathChaos/react-native-text-ends-with-icon-example
import React from "react";
import {
SafeAreaView,
Image,
View,
Text,
StatusBar,
TouchableOpacity
} from "react-native";
const App = () => {
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<View style={{ flexDirection: "row" }}>
{/* <Checkbox style={styles.checkbox} checked={agreedChecked} /> */}
<View style={{ flexDirection: "row", flex: 1 }}>
<Text style={{ color: "#757575" }}>
Yes, I agree to using this payment method for automatic monthly
charges.{" "}
<TouchableOpacity onPress={() => {}}>
<Image
style={{ height: 15, width: 15 }}
source={require("./assets/icon.png")}
/>
</TouchableOpacity>
</Text>
</View>
</View>
</SafeAreaView>
</>
);
};
export default App;
If anyone stumbles upon this, it was a known bug and is fixed in React Native 0.61.4!
https://github.com/facebook/react-native/pull/26653
I'm using react-native-maps for my react-native application. I need to post image on the MapView on the map. But, I get image from web. Whereas, as I know only local images can be added to Mapview in react-native-maps. Do you know any way to post image from uri in the react-native-maps MapView?
I tried with
<MapView style={{flex: 1}}
loadingEnabled={true}
region={this.state.region}
onRegionChangeComplete={this.onRegionChangeComplete}>
<MapView.Marker
coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
title={this.props.user_name}
description={this.props.user_desc}>
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
</MapView.Marker>
</MapView>
and the result is
And then I just deleted the <Image/> with
<MapView style={{flex: 1}}
loadingEnabled={true}
region={this.state.region}
onRegionChangeComplete={this.onRegionChangeComplete}>
<MapView.Marker
coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
title={this.props.user_name}
description={this.props.user_desc}>
</MapView.Marker>
</MapView>
and the result is
you can try custom marker view
<MapView.Marker coordinate={marker.latlng}>
<Image source={{uri: 'http://someCustomImageURL' }} />
</MapView.Marker>
I find out the way.
Actually, I used Native-Base in my application. So, component Thumbnail is imported from Native-base.
My code is like
<MapView style={{flex: 1, justifyContent: 'space-between'}}
loadingEnabled={true}
region={this.state.region}
onRegionChangeComplete={this.onRegionChangeComplete}>
<MapView.Marker
coordinate={{latitude: this.props.user_location[0], longitude: this.props.user_location[1]}}
title={this.props.user_name}
description={this.props.user_desc}>
<View>
<Thumbnail source={{uri: this.props.user_photo}} />
</View>
</MapView.Marker>
</MapView>
I am new to React-Native. With help from this forum and others, I was able to create a small App with images loading from Firebase in ListView. I have a question ... is it possible to implement features that are in iOS Photos?
What I am trying to do is, when a user touches and holds on an image in ListView, I would like to popup the image with options (Like, Favorite) in the image below. Appreciate any help.
Update:
I changed the code like this:
render() {
return (
<View style={styles.container}>
<ListView dataSource={this.state.dataSource} renderRow={this._renderItem.bind(this)} enableEmptySections={true} removeClippedSubviews={true} style={styles.listview}> </ListView>
</View>
);
}
_renderItem(item) {
return (
<ListItem item={item}/>
);
}
ListItem.js
class ListImages extends Component {
render() {
return (
<MenuContext style={{flexDirection: 'row', padding: 5}}>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger>
<Image resizeMode={Image.resizeMode.contain} style={{width: 400, height: 250}} source={{ uri: this.props.item.name }} />
</MenuTrigger>
<MenuOptions>
<View width={400} height={600} style={styles.listimagecontainer}>
<Image resizeMode={Image.resizeMode.contain} style={{width: 350, height: 500}} source={{ uri: this.props.item.name }} />
</View>
<MenuOption value={1} text='Test' />
</MenuOptions>
</Menu>
</MenuContext>
);
}
}
Images in the ListView are displaying ok. When I click on any image, new view opens up with the image. But the next image in the ListView overlays on the view hiding more than half the view. What am I doing wrong here ? I also want to display the image in full with correct aspect ratio. Appreciate any help.
UPDATE with suggested code:
<MenuContext style={{flexDirection: 'row', padding: 5}}>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger>
<Image resizeMode={Image.resizeMode.contain} style={{width: 400, height: 250}} source={{ uri: this.props.item.name }} />
</MenuTrigger>
<MenuOptions>
<MenuOption onSelect={() => alert(`Like`)} text='Like' />
<MenuOption onSelect={() => alert(`Share`)} text='Share' />
<MenuOption onSelect={() => alert(`Delete`)} text='Delete' />
</MenuOptions>
</Menu>
</MenuContext>
Here is screen shot:
What I am trying to do is, ListView displays images at 400x250. When the user clicks on the image, show a larger image of the same (say 325x500 like in iOS) and present the user with options say - like, share, delete. Appreciate any help.
It looks like you have two images, hence why you see two.
MenuTrigger is the component you want the user to click on (in your case it is the image).
MenuOptions is a "list" of the things you want to popup for example three Text: "Like" "Share" "Delete" .. etc.
But it is clear that you have the same image both under trigger and under options. What you want is something like this:
<MenuContext style={{flexDirection: 'row', padding: 5}}>
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
<MenuTrigger>
<Image resizeMode={Image.resizeMode.contain} style={{width: 400, height: 250}} source={{ uri: this.props.item.name }} />
</MenuTrigger>
<MenuOptions>
<MenuOption onSelect={() => alert(`Like`)} text='Like' />
<MenuOption onSelect={() => alert(`Share`)} text='Share' />
<MenuOption onSelect={() => alert(`Delete`)} text='Delete' />
</MenuOptions>
</Menu>
</MenuContext>