Is there way to customize padding / position... of the burger button.
In the doc, i just can find the drawerImage parameter to override the burger image...
Saddly no option without forking. You can check the code here:
https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js. Padding and position is fixed.
Actually there's a parameter for it : leftButtonStyle
in my case I use react-native-vector-icons getImageSource for the burger icon
componentWillMount() {
Promise.all([Icon.getImageSource('bars', 16, 'black')])
.then((values) => {
this.setState({
menuIcon: values[0],
});
});
}
then you do something like this:
const menuIcon = {
uri: this.state.menuIcon.uri,
height: 20,
width: 20,
resizeMode: 'stretch',
color: 'white',
};
then in your tabs scene
<Scene
key="main"
type="replace"
initial
drawerImage={menuIcon}
tabs
style={{ backgroundColor: theme.navColor, justifyContent: 'center' }}
>
Related
I have an issue with OpenLayers (v 6.14.1 from npm) where the text on the text label is rather fuzzy.
See the attached image. Compare the text labels with the text in the dialog to the right.
I create the map with pixelRatio: 1, but that shouldn't affect this (?)
const map = new Map({
target: div,
view: new View({
center: fromLonLat ([startLocation.lon, startLocation.lat]),
zoom: startLocation.zoom,
constrainResolution: true,
}),
pixelRatio: 1, //Important, otherwise tiles (WMS) with strange size will be requested
});
I create the text label thus:
export default function (feature, resolution, options) {
return new Text ({
font: 'Normal 14px serif', // Normal 14px Arial
text: getText (feature, resolution, options),
fill: new Fill ({ color: 'black' }),
stroke: new Stroke ({ color: 'white', width: 2 }),
offsetX: -12,
offsetY: -8,
textAlign: 'right',
textBaseline: 'bottom',
placement: 'point',
});
}
I've already tried other fonts (e.g. a sans-serif).
I did as #Mike suggested - see their comment under the question - here's the result:
I think the labels are now a fair bit sharper. Picture doesn't show this too well tho'.
I have a problem with adding shadow to my View Component.
here is the style object:
header: {
width: '95%',
height: '15%',
marginTop: 50,
alignSelf: 'center',
borderRadius: 20,
justifyContent: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
elevation: 2,
},
and it looks like this :
and as soon as I add these style properties :
borderWidth: 1,
borderColor: 'white',
it looks better but not the best way:
what is my problem? can you help me ?
If you'd like to add a shadow to a <View/> component I would suggest you to use the shadow props. You can add a shadow to a view component by using the style properties like so:
// Just picked some random values for each of the properties.
const styles = StyleSheet.create({
header: {
shadowOffset: {
width: 20,
height: 10
},
shadowOpacity: 0.2,
shadowRadius: 20
},
});
Result of example code
I am not able to replicate the styling you have shown with just the code you have supplied. So I can't give you an answer as to why adding borderWidth and borderColor properties change your shadows. If you'd like me to dive into that, please supply the code of the entire component or even better an Expo snack.
What I did notice is that you used the elevation style property, which is will only add a shadow on Android (source). Additionally this property will also affect the z-order for overlapping views, so I would advise against using this if it is just for shadows.
Expo Snack Demo
BackgroundColor:white fixed the problem, thanks to #Ajay
use backgroundColor:'white' fixed the problem
I try to make FlatList where circles are different sizes, for each cirle, i need to have own zIndex.
Numbers in circles, show zIndex number, as you see its not working.
I use zIndex on <TouchableWithoutFeedback>
Here is my component:
<TouchableWithoutFeedback
onPress={() => dispatch(selectHockeyPlayer(item))}
style={[
styles.listItem,
{
width: playerWidth,
height: playerWidth,
transform: [{scale: scaleNum + 1.2}],
zIndex: Math.floor(scaleNum + 2),
},
isRated ? styles.isRated : null,
styles.circle,
activePlayer(item, styles.selectedListItem),
]}>
Place a View inside of TouchableWithoutFeedback and apply TouchableWithoutFeedback styles to the View
Do this
<TouchableWithoutFeedback
onPress={() => dispatch(selectHockeyPlayer(item))}>
<View
style={[
styles.listItem,
{
width: playerWidth,
height: playerWidth,
transform: [{scale: scaleNum + 1.2}],
zIndex: Math.floor(scaleNum + 2),
},
isRated ? styles.isRated : null,
styles.circle,
activePlayer(item, styles.selectedListItem),
]}>
Allright, i figured out what was the problem, FlatList doesnt work with zIndex, so i had to use ScrollView.
When using Stripe elements, is there a way to not use the card element, but still get the auto brand icon show up somewhere (preferably in the cardNumber input field)?
In 2020+, you can use the showIcon option.
const cardNumber = elements.create('cardNumber', {
showIcon: true,
placeholder: 'Card Number',
});
At the moment, no, there isn't. But Elements is still a very new product and we're very open to feedback! Please write to Stripe support at https://support.stripe.com/email to request this feature -- I can't promise it'll be implemented, but it'll certainly be considered.
edit: There isn't an option to have the cardNumber field show the brand icon automatically, but it's possible to implement this yourself by using the brand attribute in the element's change event. Here's an example: https://jsfiddle.net/ywain/L96q8uj5/.
showIcon isn't a top level property - it's nested under options, so you'd have to do something like this:
const OPTIONS = {
showIcon: true,
};
return (
<div className="App">
<CardNumberElement options={OPTIONS} />
</div>
);
and it's only available for CardNumberElement, so you shouldn't be setting it for CardExpiryElement or CardCvcElement
Direct from Stripe Discord Moderators.
Just popping back in here. The appropriate option would be hideIcon as opposed to showIcon.
Stripe documents this in their JS Documentation: https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options-hideIcon
hideIcon is an Options property to elements.create as the doc above shows. So, for example, you would use this snippet:
var card = elements.create('card', {
hidePostalCode: true,
hideIcon: true,
style: {
base: {
iconColor: '#F99A52',
color: '#32315E',
lineHeight: '48px',
fontWeight: 400,
fontFamily: '"Open Sans", "Helvetica Neue", "Helvetica", sans-serif',
fontSize: '15px',
'::placeholder': {
color: '#CFD7DF',
}
},
}
});
card.mount('#card-element');
You can see this in my Fiddle if you'd like: https://jsfiddle.net/fiddler05/4qzcdw1p/18/
So I have a horizontal scrollview at the top of the view. The ScrollView contains nodes that have a specified width. I then have a border on the bottom of the ScrollView, like you can see in this screen cap: http://i.imgur.com/pOV1JFP.png
As you can see the child nodes of the ScrollView at the top don't reach the border. However, if I change the ScrollView to a View with flexDirection: 'row', then the child nodes fill the height fine. I've tried changing a few properties on the scrollview, such as:
Setting padding:0 on contentContainerStyle
automaticallyAdjustContentInsets={false}
Changing the values of contentInsets directly
None of those seem to fix the issue.
The scrollview code & style:
var styles = StyleSheet.create({
nav: {
padding: 0,
marginTop: 30,
flex: 1,
borderBottomWidth: 1,
borderColor: '#000000'
}
});
<ScrollView
style={[{width: screen.width}, styles.nav]}
horizontal={true}
showsHorizontalScrollIndicator={true}
automaticallyAdjustContentInsets={false}>
{dayNavItems}
</ScrollView>
The child components (makes up dayNavItems)
const styles = StyleSheet.create({
container: {
paddingLeft: 15,
paddingRight: 15,
width: 50,
justifyContent: 'center'
},
odd: {
backgroundColor: '#ccc'
},
selected: {
backgroundColor: '#39b54a'
},
text: {
fontFamily: 'Optima'
}
});
class DayNavItem extends React.Component {
static propTypes = {
day: React.PropTypes.object.isRequired,
odd: React.PropTypes.bool,
selectDay: React.PropTypes.func.isRequired,
selected: React.PropTypes.bool
};
render() {
const d = new Date(this.props.day.created_at);
const viewStyles = [styles.container];
if (this.props.selected) {
viewStyles.push(styles.selected);
} else if (this.props.odd) {
viewStyles.push(styles.odd);
}
return (
<TouchableOpacity style={viewStyles} onPress={() => this.props.selectDay(this.props.day.uuid)}>
<View>
<Text style={styles.text}>{getMonth(d)}</Text>
<Text style={styles.text}>{d.getDate()}</Text>
</View>
</TouchableOpacity>
);
}
}
Adding contentContainerStyle={{flexGrow: 1}} will do the trick.
<ScrollView contentContainerStyle={{flexGrow: 1}}>
</ScrollView>
There is a property called contentContainerStyle for ScrollView. I just solved a similar issue where I set flex: 1 to the ScrollView's styles, ScrollView's contentContainerStyle, and the child View component.
The other answers are correct, but just to provide a clarifying example:
<ScrollView contentContainerStyle={{ flex: 1 }}>
{children}
</ScrollView>
Setting flex: 1 for ScrollView's contentContainerStyle property did the trick for me.
I always end up creating this component in all my projects:
import * as React from 'react'
import { ScrollView, ScrollViewProps, StyleSheet } from 'react-native'
export function FullHeightScrollView(
props: {
children: React.ReactNode
} & Omit<ScrollViewProps, 'contentContainerStyle'>
) {
return (
<ScrollView contentContainerStyle={styles.grow} {...props}>
{props.children}
</ScrollView>
)
}
const styles = StyleSheet.create({
grow: { flexGrow: 1 },
})
Use it in place of React Native's ScrollView.
If ScrollView is wrapped inside of a SafeAreaView, put flex: 1 on SafeAreaView, this did the trick for me after hours of debugging...
Parent:
Child (styles ScrollView I implemented has nothing to do with the current issue you reported):
I have made a simple package for those who just want, like me, a working out of the box ScrollView, without having to apply all the time the styles to make it work properly.
https://github.com/SrBrahma/pagescrollview
Usage:
import { PageScrollView } from 'pagescrollview';
<PageScrollView>
{/** Your contents */}
</PageScrollView>