I'm trying to create custom buttons with assets that I've been sent by the designer. I want to use touchable highlight to create the buttons with the images in them.
<TouchableHighlight style={styles.touch}
onPress={() =>
Alert.alert('You tapped Sign In!')
}>
<Image
style={styles.button}
source={require('./signin/SignInButton.png')}
/>
</TouchableHighlight>
touch: {
backgroundColor: 'pink',
},
button: {
padding: 10,
width: Dimensions.get('window').width*0.7,
resizeMode: 'contain',
// height: Dimensions.get('window').height/3,
},
That's the code, the problem is the touchable area is too big, I want it to be just the button area. But I also want the button to be sized dynamically with the screen, for different screen sizes. So is there a way to fix the size of the Touchable based on the image size?
Related
Following is my code
<TouchableOpacity style={{backgroundColor: 'pink', height: 100, width: 100}} activeOpacity={0.5} onPress={() => console.log('On Press'}>
<Image source={} style={{height: 50, width: 50, borderRadius: 25} imageType ={'profilePhoto'}/> />
</TouchableOpacity>
TouchableOpacity's size is bigger than theImage. If I touch outside of Image then onPress is working. But If I touch over the Image then onPress is not firing.
This is happening only in iOS. Working as expected in Android. I am using RN0.63
Am I missing anything here?
It seems that you are using an unofficial Image component. Any nested Touchable or other gesture component in it will affect your click results.
Try to use the official Image component. Or read the docs of the component you are using. It may has its own onPress event.
I'm using react-bootstrap button and fortawesome/react-fontawesome for the icon. I'm setting the button height and width using this code
#button-size{
height: 1vh;
width: 1vw;
}
then I'm inserting the icon inside the button using this code
<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} />
</Button>
but my problem is the icon goes outside of the button. How can I center the icon inside the button
Using viewport measurements for height and width on the Button to control its size won't work well in this setup especially when you are using font icons (also, apparently, in the library you are using they generate the output as svg). I suggest you control the size of the button through padding or pixel measurements.
Example:
#button-size {
padding: 6px 20px;
}
In addition, If you need to adjust the size of the font icon you can do that using the size prop or you can use CSS font-size
<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} size={"5x"}/>
</Button>
CodeSandBox: https://codesandbox.io/s/angry-drake-5pexo?file=/src/App.js
If you absolutely must use the viewport measurements on your project, which I highly discourage, you can opt to assign position-relative to the button and style the font-icon component as necessary to center.
Example:
export default function App() {
const customFontIconStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
};
return (
<Container>
<Button id="button-size" className="position-relative">
<FontAwesomeIcon icon={faFacebookF} style={customFontIconStyle} />
</Button>
</Container>
);
}
I am trying to create an animation in react native where a character do some push ups.
Going up and down is done at the moment I want.
So I separated a gif animation in 2 gifs, without repetition. One to make him going up and the other one to make him going down..
These images are locally stored
The problem is that there is a flickering when the gif change.
I tried react-fast-image, but the gif animation is too slow and the gif is looped automatically.
I tried to put a transition image in the meatime images are switching but still a flicker behaviour.
The image onLoadEnd callback seems to be called too early, before the image actually ends up to load.
here how I switch the images
if (up.includes(this.props.timer))
this.setState({ currentGif: upGif, cacheImage: downPng })
if (down.includes(this.props.timer))
this.setState({ currentGif: downGif, cacheImage: upPng })
Here is the render:
render() {
return (
<View
style={{ position: 'absolute', bottom: 70 }}
>
<Image
source={this.state.cacheImage}
style={{ width: 400, height: 330, position: 'relative', bottom: 70 }}
fadeDuration={0}
/>
<Image
source={this.state.currentGif}
style={{ width: 400, height: 330, position: 'absolute', bottom: 70 }}
fadeDuration={0}
onLoadEnd={() => {this.setState({cacheImage: null})}} // the Image should be loaded so I can hide the cache Image, but it desapear before the gif is loaded
/>
</View>
)
}
You can use the Image.getSize API.
To get the size, RN downloads and caches the image. It's stated in the docs that this method can be used for preloading images. They also mention that a more explicit API will be provided in the future, so you can use this for now and switch to a better API when it's available.
Somehow I could not figure this out. I have tried several solutions available online, but none of them worked.
Here is the issue. I have some wide images that I wanted to stack on top of each other. The height does not matter, but I want it to have a fixed width. For some reason, the images are being cropped.
I want it to look like this. For example, if you change .meat's height to 10px, it will resize but will maintain its ratio.
http://jsfiddle.net/iggyfiddle/mtL7e2jz/
This is the image code:
{items.map((item, index) =>
<View key={index}>
<View style={styles.imageWrapper}>
{ item.image_url_large && <Image style={styles.image} resizeMode='cover' source={{ uri: item.image_url_large }} /> }
</View>
</View>
)}
It is mapping over an array of several images.
I have tried:
a simple
const styles = {
image: {
height: 100
},
};
I tried following the same pattern on the fiddle, by giving it fixed height and width according to this SO post
const styles = {
imageWrapper: {
height: 50,
width: 400
},
image: {
height: '100%'
},
};
But it still crops the top bun and tomato
I have tried some solutions described on this GH discussion but they don't seem to work.
How can I automatically resize the image from web to fixed width without it being cropped?
use resizeMode='contain' instead of cover and specify the width and height.
<Image
style={{width:300,height:300}}
source={{ uri: display_image_small }}
resizeMode='contain'>
</Image>
I want an image to appear across the width of the screen, and be scaled so it retains its proportions.
I currently have this
<ScrollView style={styles.background}>
<Text>Some Header Text</Text>
<Image
style={{width: null}}
resizeMode="contain"
source={require("./assets/images/map.png")}
/>
</ScrollView>
which half works. The image is scaled correctly in width. but it is retaining its height, so there is a large border above and below the image.(ie the layout is still using the images height unscaled)
If I add a height: null or replace the width with a height then no image is displayed.
How do I do this (I expect) trivial thing?
(same behavior on ios and android.)
So I have had to calculate things myself.
This scales the image as I want, and the image is re-scaled when the phone is rotated.
I am not sure if componentWillMount is the right event to choose to calculate the width/height ratio. I would be happy for any other code review comments!
import React, {Component} from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
Image,
Button,
Dimensions
} from "react-native";
import resolveAssetSource from "resolveAssetSource";
import {Actions} from "react-native-router-flux";
export default class Main extends Component {
measureView(event) {
this.setState({
width: event.nativeEvent.layout.width,
height: event.nativeEvent.layout.width
});
}
componentWillMount() {
let source = resolveAssetSource(require("./assets/images/map.png"));
this.setState({ratio: source.height / source.width});
}
render() {
return (
<ScrollView
onLayout={event => this.measureView(event)}
>
<Text style={styles.header}>
Some Header Text
</Text>
<Image
style={{
width: this.state.width,
height: this.state.width * this.state.ratio
}}
resizeMode="contain"
source={require("./assets/images/map.png")}
/>
</ScrollView>
);
}
}