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.
Related
Well, i'm importing a header component where I build my title, subtitle, and top buttons.
I want to import the title, but with a small change on its style, just changing the color to yellow.
How could I change just the color style of title, without touching the other props, or making a new prop in the component?
https://i.stack.imgur.com/oCDpR.png
PS: My first post, I don't know how to paste the img pretty well.
this is the code:
<SimpleHeader
style={styles.header}
title='¡Hola Celia!' /* Yellow color*/
subtitle='¿Qué te lavamos hoy?'
/>
I'm not gonna be able to be exact unless you share the SimpleHeader component but this logic should work for you:
In the SimpleHeader component, add a prop called titleColor and pass it to the text:
<Text title style={[styles.title, {color:props.titleColor}]}>{title}
Pass that extra titleColor prop from the main component:
<SimpleHeader
style={styles.header}
title='¡Hola Celia!' /* Yellow color*/
subtitle='¿Qué te lavamos hoy?'
titleColor='yellow'
/>
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
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'm having trouble force focussing a react native TextInput field.
It's focused when the page loads with autofocus={true}.
But after blurring I would need to press the text input field, but that's hidden because of design reasons. Is there a way to document.getElementById("myText").focus(); in react native that I can call after onBlur()?
Cheers.
You need to assign the TextInput field to a ref like this:
<TextInput ref={ref => (this.ref = ref)} />
Then you can programmatically focus it by running focus() on it, like so:
this.ref.focus();
Here's a little Snack where I run the focus/blur function when pressing a button:
https://snack.expo.io/#marcelkalveram/auto-focus-input-field-using-ref
It should be easy to replicate this for your navigation scenario.
In case you're using react-navigation, this is the part of the docs you'll be interested in: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
I try to add shoutem to other app but when i work with NaviagtionBar and #shoutem/animation i got issue like picture below here:
this i got when using props style NavigationBar 'inline',
and here is my code:
<NavigationBar
styleName="inline"
animationName="solidify"
title={restaurant.name}
share={{
title: restaurant.name,
link: restaurant.url,
}}
/>
but i dont want like that. I want props style is 'clear' for make tranparent navigationbar when start app, i still want show it when scroll down like this:
but when i change props style of NavigationBar to 'clear' i got this issue(when scroll down, NavigationBar still not show up):
Anyone can help me to resolve it?