In react native navigation I use a custom icon, I want to be able to change this icon depending on if the user is in dark mode or normal mode.
The challenge I'm having is passing in the value of the path dynamically. I want to call a method inline that returns the file name of the icon.
<Marker
coordinate={this.state.region}
image={require("./" + {chkDarkMode()} + ".png")}
/>
How can I dynamically set the image? I've seen the conditional if length is equal to zero, but that example doesn't allow for multiple possible images.
Unfortunately, that's not allowed.
You can instead call require conditionally:
const image = darkMode ? require("./darkModeImage.png") : require("./lightModeImage.png")
One way to do this:
getImagePath = () => {
return `./${chkDarkMode()}.png`
}
<Marker
coordinate={this.state.region}
image={getImagePath()}
/>
Related
I would like to create a react-leaflet object dynamically. Normal leaflet objects work, but react-leaflet do not.
Code example on:
https://codesandbox.io/s/show-problem-react-leaflet-marker-popup-object-hm0o8?file=/src/MapView.js
Left click shows the desired behavior with leaflet objects and right click the problem with react-leaflet.
problem code:
var lat = e.latlng.lat;
var lon = e.latlng.lng;
// create popup contents
// use <Marker> from react-leaflet
var newMarker = <Marker position={[lat, lon]}>
{/* use Edit Popup */}
<Popup editable open>
Your stylable content here.
</Popup>
</Marker>;
// Problem addTo(map)
newMarker.addTo(map);
newMarker is a react element. You can't call the leaflet method addTo on it, because it is not a leaflet L.Marker instance.
If you want to be able to manage the markers through react, you would need to keep a state variable which is an array of coordinates. On map click, you can add the coordinate to that array, and then render a series of <Marker /> elements from that.
In your event handlers, you're simply going to capture the position of the click and pass it to a callback setMarkers:
function MyRightClickEventHandler({ setMarkers }) {
useMapEvents({
contextmenu: (e) => {
setMarkers(e.latlng);
}
});
return null;
}
setMarkers is a callback to setState on your primary MapView component, which adds the latlng to the state variable, which contains an array of latlngs:
// inside you'r MapContainer:
<MyRightClickEventHandler
setMarkers={(markers) =>
this.setState({
MarkerArray: [...this.state.MarkerArray, markers]
})
}
/>
Then map over the latlngs that are in that state variable, if there are any:
{this.state.MarkerArray &&
this.state.MarkerArray.map((latlng) => (
<Marker position={latlng}>
<Popup editable removable>
Thanks for using my editable popup plugin!
</Popup>
</Marker>
))}
Working codesandbox
Note that if you're going to use the editable, removable, or open props on editable popups rendered dynamically from an array, be sure to read my section on using editable popups rendered from a dynamic state array - it can get hairy if you're not careful. Feel free to ask questions in the comments if you run into problems.
When user adds new data to the list I want to add icon dynamically(social icons commonly) in react native. For example,when user adds item that has name facebook then facebook icon should be added in background to the list(item name may be face,fcb etc) How can I achieve this logic ?
Your question is quite vague but I'm guessing you're looking for what's called "conditional rendering".
<View>
{someCondition &&
<FacebookIcon />
}
</View>
The FacebookIcon component will only be rendered if someCondition is true.
So in your case, you probably wanna have a variable that is true or false based on whether your "list" contains the data you want, and use that variable to determine whether to show the icon.
If you want the icon to be dynamic (eg, be able to have Facebook, Insta, Whatsapp), you have another variable that holds the social network you've identified, and pass that as a prop to the icon component:
const listSocialNetwork = 'facebook' // or whatever you find in your list
const showIcon = !!listSocialNetwork // true if a social network was found in the list
// in your render
<View>
{showIcon &&
<SocialIcon socialNetwork={listSocialNetwork} />
}
</View>
I know that the practice of react native is to use onChangeText for change value as follow.
<TextInput
onChangeText = {(text)=> this.setState({myText: text})}
value = {this.state.myText}
/>
However, I wonder if i could do something like this. To summarise, I want to loop through all the TextInput and get the ref and value. I just want to do things in javascript way as follow. Is that possible to be done?
<TextInput id="id1" ref={ref => (this.remark = ref)} />
<TextInput id="id2" ref={ref => (this.remark1 = ref)} />
onSubmit = () => {
forEach(TextInput in component) {
console.log(TextInput.id) <- note id is custom property
console.log(TextInput.refName)
console.log(TextInput.value)
}
}
Yes, but I wouldn't recommend this approach. You could simply create an array of refs and loop through it in your onSubmit function.
forEach(TextInput in component) {
This is not possible in any javascript environment (not only because forEach and for..in syntax is different but also you can't expect to be able to loop over component elements by type (?) and get them)
What you want to do is not javascript way but old style browser way:
there are no ids in react-native
technically you could get uncontrolled TextInput's value like you would do in plain react in browser environment (via this.textInputRef._lastNativeText) but it's discouraged in react-native, most likely because because instead of DOM react native has to render to native views which all differ depending on the platform (iOS, Android, Windows, etc) but have to work the same
So it's not only impossible in react native but in plain react as well. It looks to me like you want to create a form, and sooner or later you will find out that you want validation or transformation on your inputs and switch back to controlled components anyway
I am trying to add a custom image source to the attribute iconButtonCenter in the React Native library named react-native-circle-button.
https://github.com/dwicao/react-native-circle-button
According to the documentation, iconButtonCenter is of type enum, so I imported the icon and then passed it in directly where I create my CircleButton object. It does not yell as if it is a number or string, yet I still am not 100% sure it is technically of type enum. I know for a fact it is finding the image in the right path. I also know that it is doing something, because the default image is no longer observable on the app, it just no longer has an icon. I am not getting any compilation errors or warning, yet I still do not see the icon appear over the button as it should. How do I fix this?
Here is the render within my component that allows circle button's to be draggable. I also went ahead and put my import at the top so you can see how this was stored.
import letterA from '../assets/letters/alpha-a.svg';
render() {
let { pan } = this.state;
let [translateX, translateY] = [pan.x, pan.y];
let moveableStyle = {transform: [{translateX}, {translateY}]};
const panStyle = {
transform: this.state.pan.getTranslateTransform()
}
return (
<Animated.View
{...this._panResponder.panHandlers}
style={[moveableStyle, panStyle]}>
<CircleButton iconButtonCenter={letterA} /> <--- Here is the image source reference.
</Animated.View>
);
}
The CircleButton component should successfully have the image fed to it and remain centered over the button even when dragged along the string.
Problem was the picture format was an .svg, converting the icons to .png worked like a charm!
I use the same code for android & iOS. However, I found the appearances are different between two platforms, especially the image size (shown as below).
I wanna ask:
How can I set a configuration to make two platforms become consistent?
How to set android & iOS stylesheet setting on the same code?
Thanks!!
<MenuButton onPress={() => this.toggle()} style={styles.menuButton}>
<Image source={require('../images/menu.png')} style={styles.menuButtonImage}/>
</MenuButton>
StyleSheet setting
Android & iOS output
I also noticed images get rendered differently on the other platform. If I remember correctly it should be enough to set a static size. If you have to tweak the style for each platform I would do the following:
# Use a ternary statement in the function that gets your style object:
getImage () {
const getStyle = () => ({height:(Platform.OS === 'ios' ? 36 : 48)})
# then call it where you set the propery:
return <Image source={require('../images/menu.png')} style={getStyle()} />
}
This way it will get called on each re-render of the parent.
In fact, I have all styles defined like this. It works like a charm for dynamic styles that may be dependent on properties. Also, it's a nice pattern to keep components and functions in components that return elements as self contained as possible.