I am using "react-native-action-bar" library for my application action bar.
It's showing white icon when I am using dark background and that's fine, But when i am using white background in case icon also showing white.
I tried with different codes but nothing helped, if anyone having solution for the same please let me know...here is my code
<ActionBar
containerStyle={{height:60,alignSelf: 'center',paddingRight:40}}
backgroundColor={'#fff'}
title={'My Tutorials'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{backgroundColor:'#333',height:18,width:18}}
/>
Try giving background color to your badgeColor
<ActionBar
containerStyle={{height:60,alignSelf: 'center',paddingRight:40}}
backgroundColor={'#fff' }
badgeColor={'#000000'}
title={'My Tutorials'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{height:18,width:18}}
/>
Its working fine for me, check this expo link i just created
https://snack.expo.io/rkMzuYrE4
This code is working for me check below example:
<ActionBar
containerStyle={{height:60,alignSelf: 'center',paddingRight:40}}
backgroundColor={'#fff'}
title={'Gallery'}
titleStyle={styles.pageTitle}
onLeftPress={() => goBack()}
leftIconContainerStyle={{marginTop:22}}
leftIconName={'back'}
leftIconImageStyle={{tintColor: '#000000'}}
/>
Related
I am now showing several markers on the mapview using MapBoxGL.PointAnnotation.
I added MapboxGL.Callout component to show tooltip when the marker is selected.
<MapboxGL.PointAnnotation
key={random.toString()}
id={random.toString() + '_source'}
coordinate={tagCoordinates}>
<Image source={getIconLocal(tagIcon)} />
<MapboxGL.Callout
title={`Tag: Pathogen\n${typeName}\nUser: ${userName}\nDate: ${createDate}`}
style={{minWidth: 200}}
contentStyle={styles.tagContainer}
textStyle={styles.tagText}
tipStyle={styles.tagTip}
/>
</MapboxGL.PointAnnotation>
It's working as I expected.
The problem is that I can't hide tooltip when select the rest area of the mapbox.
When I select another marker, it's working fine (hide current tooltip and show selected marker's tooltip), but tooltip is remained when select the rest area of the mapview except markers.
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.
Background Transparency with BLUR
Is it possible to blur view without using background Image? I want to show the parent content on top of the background blur view in modal.
Similar kind of this:
Tried with react-native-blur :
Its actually blurring the background image. I want to blur and show the content which is behind the modal.
Tried along with react-native-overlay : But no change.
well if you are
using expo
then you should go and check out this link here
else if you are like me
who loves to use 'react-native init' and want some blurry effect based views then i have this for you!
https://github.com/voronianski/react-native-effects-view
an awesome library
it would be very simple to use it like
"if the dialogbox is open then render The blur view else render simple",
here is a simple example for basic how to use!
...imports
var EffectsView = require('react-native-effects-view');
var App = React.createClass({
renderVibrant() {
return (
<View>
<Text style={styles.text}>Do you feel blurry??</Text>
</View>
);
},
render() {
return (
<EffectsView
style={styles.view}
blurStyle="dark"
vibrantContent={this.renderVibrant()}
>
<Image style={styles.bg} source={require('image!bg')} />
</EffectsView>
);
}
});
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?
I am using react-native-navbar, am I doing something wrong? the statusbar color is not changing. It works on iphone but not on android. My code below
<NavigationBar
title={{title:'Notifications', tintColor:'yellow'}}
tintColor="#ef5350"
statusBar={{style: 'light-content',tintColor:'#ef5350'}}
/>
You have to set this prop to the StatusBar component: backgroundColor='#ef5350'
As per the docs
[Android] backgroundColor?: $FlowFixMe
The background color of the status bar.