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.
Related
There is a problem on the TextInput which contains text and emoji together and try to resize them or change color/fontSize by other component (not manually) .
Resizing, changing color and fontSize of TextInput's content works only without emoji.
Can you help how to resolve TextInput problem (described above) with text+emoji content?
I don't have this problem with Android.
allowFontScaling={false} => Didn't helped me.
React Native version: 0.61.5
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'}}
/>
Very simple question :
How do you style this caret? (in the blue circle, it's a small black upside-down triangle). The color: 'white' style only works with the text inside the picker, no success with the caret so far.
I use React-native 0.55.2, this is a React Native Picker component:
https://facebook.github.io/react-native/docs/picker#style
inside your styles.xml file include that line working normally
#ffffff
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?
Consider this simple ScrollView.
On iOS, clicking on the text will but the text to the top because scrollTo({ y: 250 }) scrolls even if end of scrollView is reached.
On Android, the text doesn't move.
How to get on Android the same behavior we have on iOS?
You can work around this by adding padding to the contentContainerStyle of the ScrollView. A good starting point would be to add padding equal to the height of the device's screen.
import { Dimensions } from 'react-native';
const ANDROID_SCREEN_HEIGHT_PADDING = Dimensions.get('window').height;
then, when rendering:
<ScrollView
contentContainerStyle={{paddingBottom: ANDROID_SCREEN_HEIGHT_PADDING}}>
...
</ScrollView>
You could use this for necessary extra Android padding in every direction. If you are using horizontal={true}, for example, you could add padding equal to the width of the screen and add it to the paddingLeft style property to get the intended scrolling behavior on Android.
This behavior is due to the underlying implementation of ScrollView on Android in React-Native. See also:
React native Android ScrollView scrollTo not working