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!
Related
Here is what I am trying to do with React Native:
Get the image URL data from the database.
Check if the image exists in the storage.
If the image exists, render it. If not, render a placeholder image.
Basically, I declared a function to do steps 2&3 and put that as a source in the Image component. However, the Image component won't render any image, even if the target image exists in the storage with the URL.
What might be going on here? Here is the code that I am using. Don't see why this code won't work...Maybe a syntax error? What might be a fix/better way to do this?
//The function to check if the image actually exists and return placeholder if not
const checkImageURL = (url) => {
const placeholder_url='url_of_placeholder_image';
fetch(url)
.then(res => {
if(res.status == 404){
return placeholder_url;
}
else{
return url;
}
})
.catch(err=>{return placeholder_url})
}
//The way I declared the source for the image
<Image source={uri:checkImageURL(url)} style={style.mainImage}/>
Source prop for remote URL must be an object, so you need to add one more curly braces
<Image source={{uri:checkImageURL(url)}} style={style.mainImage}/>
More info about curly braces in props here
I have a situation right now with my RN app, and I don't know how to tackle it.
I'm logging the user in through Facebook API, in our backend, we handle all the FB user data, and also, its profile picture that we crop to a certain size for performance purposes.
To do this, we run an async worker that will do the cropping, in the meantime, in the app we show a default user avatar with the app logo. But once the worker finished the task, the image isn't updated, not until I re-render the view, this re-render causes to run again "renderUserAvatar()" function which validates if the user has a profile picture or not. Which makes sense.
Now here's the help, how can I listen to this URL availability? So that whenever the Image is available, it re-renders?
At first, I thought about adding something like handling the Image's onError, by setting a setInterval, and trying to force a re-render, but that doesn't look very performant it rather sounds ugly.
Is there a clean way to handle this specific case-scenario?
This is my current renderUserAvatar function:
renderUserAvatar() {
const { userInfo } = this.props;
if (!_.isEmpty(userInfo) && userInfo.userPictures && userInfo.userPictures.length) {
const avatar = userInfo.userPictures.filter(pic => pic.isAvatar && pic.isEnabled);
if (avatar && avatar.length) {
const url = `${avatar[0].url}?height=${USER_AVATAR_HEIGHT}&width=${USER_AVATAR_WIDTH}`;
return <Thumbnail large style={ styles.userProfilePic } source={{uri: url}}/>;
}
}
return <Thumbnail large style={ styles.userProfilePic } source={ImageAssets['user-avatar']}/>
}
(Thumbnail is a NativeBase's component based on React-Native Image. So it would have all the Image methods and props too)
You could put your image into a state-variable.
At the first load (or if User-Image are not yet fetched) it is your Placeholder-Image.
If the async function runs on entering the screen and the images was fetched, replace the placeholder-image in the state with your new one.
The change of a state-variable will cause a re-render and this way, you'r image should appear.
I'm new to React Native and I'm trying to have icons that are able to have their color changed based on json data received. I've been able to use React Native Vector Icons. However, I have my own icons that I would like to use. On the linked repo page there is something that talks about generating your own icons, but I'm not familiar enough to know how it is supposed to work. My icons are .png files and I'd like to make them so I can give them a color attribute on the fly in my app. I wanted to see what the process was to be able to do that if it was even possible. Can I use the process described in the repo?
Thanks in advance!
So, to create your own icon component, this could be a simple representation:
import React from 'react'
import { View, Image } from 'react-native'
export default class Example extends React.Component{
renderIcon = (iconName, color) => {
iconName = this.props.iconName
color = this.props.color
return<Image source={require(`/example/icons/${exampleIcon}${color}.png`)}/>
}
render(){
return(
<View>
{this._renderIcon}
</View>
)
}
}
For example, your .png Icon is called IconHomeFocused, and it's an icon of the home icon when it's focused...then you would put, in your component that you want your Icon to be in: <Example iconName = 'IconHome' color = 'Focused'/>. Of course, this requires you to name your icons carefully. I didn't want to write a million if statements so this seemed like the easiest sort of integration for me. I'm sure there are much better interpretations out there though. Good luck.
when its changed source of any image in component there is blinking occurs which I try to avoid.
To do so I searched and decided to use ref(direct manipulation)
but it doenst change anything, so I use traditional way, changing url property in the state, it works but blink occurs.
Changing image source, fired when image started to move;("onPanResponderStart") function. here is code;
onPanResponderStart:(e, gesture)=>{
//not change image!
// this.refs['refTabure'].setNativeProps({
// source: require('../newImage.png')
// });
//it works, but blink occurs
this.setState({tabureSagImageUrl:require('../newImage.png')})
},
...
return (
<View style={styles.TabureStyle}>
<Animated.Image ref="refTabure" style={[panStyle, styles[this.props.Name], {opacity:this.state.opacity}]}
{...this.panResponder.panHandlers}
source={this.state.tabureSagImageUrl}>
</Animated.Image>
</View>
);
how can I edit the source of image without rerendering component that cause blinking ?
I'm using onLayout to detect screen orientation and it's working fine inside my root view, but when I implemented inside the drawer it didn't work, any reason why this happens ?
code :
import Drawer from 'react-native-drawer'
...
onLayout(e) {
console.log('onLayout');
}
<Drawer onLayout={this.onLayout}
It didn't log any thing when orientation changed!
This is because the Drawer component doesn't take onLayout as a prop. You can see in the source code that the rendered View does use onLayout, but it's not pulling from something like this.props.onLayout.
I'm not exactly sure what you're looking to do, but maybe this issue will help you. As it shows, you can pass a function into openDrawerOffset instead of an integer or a ratio in order to be a little more dynamic with how you set your offset:
openDrawerOffset={(viewport) => {
if (viewport.width < 400) {
return viewport.width * 0.1;
}
return viewport.width - 400;
}}
You might also benefit from the Event handlers that react-native-drawer has to offer.