I have an Image of the body I am using a <Image> Component for that, and I have to mark wound on the body Image, but the thing is I have used <TouchableOpacity> for gain touch on the Image. Please Help me out on this. Thanks in advance.
I'd suggest you use react-native-svg to render a path instead .. which will allow you to handle onPress event for the path
<Svg {/**props */}>
<Path
d="..." /** Path */
onPress={() => alert('Pressed!')}
/>
</Svg>
It'll also give you sharper looking image...
The onPress handler of TouchableOpacity receive a PressEvent as parameter. This object contains information about the press location.
https://reactnative.dev/docs/pressevent
Related
I'm using the React Native Base Button.
The fontSize prop doesn't seem to work at all, it doesn't do anything. Am I doing something wrong, or misunderstanding the prop?
I did install the library using --legacy-peer-deps, because it doesn't offically support React 18 yet, but it seems to be working fine outside of this.
It appears you can pass props to the underlying Text in the Button with the _text prop:
<Button _text={{fontSize: "2xl"}}>
Press Me
</Button>
You are trying to increase Button's font size that is why it is not working. Think about that you try to increase TouchableOpacity's font size.
Here is a possible Solution
<Button>
<Text style={{fontSize:16}} >Button Title</Text>
</Button>
Need to show the long text, which is retrieved from server.
I'm using web storm and react native 0.57
<Text>{this.state.responseText}</Text>
Should be able to view long text under the text tag. Why long text is not shown under Text component?
Yes, I was also facing same problem. Use WebView instead of text component.
<WebView
originWhitelist={['*']}
source={{html: this.state.responseText}}}
/>
I think you should use numberOfLine = {} property of text component.
you can edit style of your text component and make fontsize larger
<Text style={{fontSize: 40}}>{this.state.responseText}</Text>
I have a detailspage in my RN app with a component called imagescrollview https://github.com/bamlab/react-native-image-header-scroll-view and i want the header image to be a swipable slideshow and I found this package https://www.npmjs.com/package/react-native-image-slider and i am trying to include it into the renderHeader function of the first package.
But the problem is that the slideshow is not clickable because it is inside the headerimagescrollview.
i've tried to set the imageSlider with zIndex: 1 but that doesn't help, i cant set the position to absolute because the image will dissapear.
<HeaderImageScrollView
maxHeight={180}
minHeight={80}
fadeOutForeground
maxOverlayOpacity={0.5}
minOverlayOpacity={0.0}
renderHeader={() => (
<ImageSlider
images={[
ActivityFoto + this.state.dataSource.Foto,
'http://placeimg.com/640/480/any',
'http://placeimg.com/640/480/any'
]}
/>
)}
Did you try to wrap the components with a touchableOpacity. I've a similar case but i'm using react-native-snap-carousel and it's working fine with the touchableOpacity
Use keyboardShouldPersistTaps='always' in all of the click enabled parent (scrollView/Flatlist/TouchableOpacity etc)components then it will work.
I am using the InputText component from react-native-paper. How do I add input masking without having to use another library? In the image below, I want to add an input mask for the mobile number, but I don't know how to do it without using another library, and if I use another library, then I won't have the material design input style. Please help.
Screenshot
You can use react-native-mask-input or any other mark library with react-native-paper. You can use render prop of Text Input to pass react-native-mask-input component such that
<TextInput
label="Phone number"
render={props =>
<TextInputMask
{...props}
mask="+[00] [000] [000] [000]"
/>
}
/>
Refer render of TextInput
HTH
I want to take input from the user in a callout so i can perform actions on it. But using TextInput in MapView.Callout is of no use as the whole Callout is being pressed. How do I achieve this ?
Programmatically set the focus to the TextInput when the callback of the callout gets called. Give the TextInput inside your callout a ref
like so <TextInput ref={textInput => this.textInput = textInput} />.
Now, inside the callback of the callout simply write.
this.textInput.focus().
Sidenote: Make sure you bind to the callback of the callout to this or call it inside a fat arrow function so the this in this.textInput.focus() does not come out to be undefined.
This is a cleaner solution where you do not have to mess around with absolute styles and component overlapping.