I implemented a dropdown picker.I wanted to reduce the height of picker but when I try to reduce the height of picker in container style its reducing the height of view that hold the dropdownpicker,no changes are reflecting on dropdown.How to reduce the height of dropdown picker?Or can anyone suggest a good dropdown library?
<DropDownPicker
dropDownDirection='BOTTOM'
dropDownContainerStyle={{height : hp('10%'),width : wp('20%')}}
style={{
marginRight : wp('4%'),
}}
containerStyle={{
width:wp('20%'),
marginRight : wp('7%'),
height : hp('5%'),
}}
labelStyle={{fontSize : hp('1.25%')}}
value={this.state.lineValue}
items={this.ITEMS}
open={this.state.open}
onSelectItem={item => this.onChangeWeek(item.value)}
textStyle={{fontSize : hp('1.25%')}}
setOpen={item => this.setState({open : item})}
/>
Dropdown picker is good enough. You can use listItemContainerStyle or dropDownContainerStyle.
listItemContainerStyle compresses all of your elements so they fit in a certain height:
listItemContainerStyle={{
height: hp('5%') }}
dropDownContainerStyle cuts to the height you just tell it to:
dropDownContainerStyle={{
height: hp('5%') }}
Both make the Dropdown Container smaller, you can use the one that works fine for you.
Related
When i try to run the app, my app behaves differently to the below two methods
height: 15%(Dimensions.get('window').height);
// above is not program just my sum up
and
height:'15%'
when I try to set the height to my text input with two methods my apps behave differently, is there any reasons behind it ?
I am in react-native 0.61.4
Giving from Dimension always takes the screen window's height/width. However, giving with the string % percentage would not take the whole screen window's height, width. If there is a wrapper around the View (or element object) it will calculate the wrapper's height/width. For example:
<View style={{ height: 100, width: 300 }}>
<View style={{ height: "10%", width: "10%" }} />
</View>
Inside of the View has 10 height & 30 width it will calculate from parent view. However, if you will take it from Dimension, it will calculate from the whole screen window's height/width.
I have a circle button (made with borderRadius) in React Native. The text in the component should be centered both vertically and horizonatlly.
Horyzontally it's fine, but the vertical alignment seems to fail whatever I do. Even if it looks good on large cicles with small fontSize, the small circles proof it wrong!
<View style = {{
alignItems:'center',
justifyContent:'center',
backgroundColor:'yellow',
borderColor: this.props.color,
width:size, height:size,
borderRadius:size,
borderWidth:borderWidth,
}}>
<Text style = {{
textAlign: 'center',
backgroundColor:'none',
fontSize:fontSize,
lineHeight:fontSize,
}}>
{this.props.title}
</Text>
</View>
Although already answered elsewhere, I'm unable to center text (in this case) in a circle properly.
As one can see on the image with the green background of the <Text>-Component, the text is just not centered perfectly. Even though the itself is perfecttly aligned...
Here is a snack for Expo with the whole code reduced to the necessary and with different example sizes: https://repl.it/#PaulHuchner/Centered-Text-in-Circles
I have tried the previous answer with only Text and calculating line-height. which looks like a little overkill and didn't work for me. So here's my answer.
I am using View as the container with justifyContent:center
<View style={{
width: 40,
height: 40,
borderRadius: 20,
borderWidth: 1,
borderColor: 'black',
borderStyle: 'solid',
justifyContent: 'center'}}>
<Text style={{fontSize: 20,textAlign: 'center'}}>20</Text></View>
You're trying to set the same fontSize and lineHeight as the circle's diameter, which has borderWidth of 10 included to it.
Due to the borderWidth, the text is being cut and overlayed over the circle. The lineHeight assigned to the cut Text is more than required, hence it is displayed misaligned.
Therefore you need to reduce the fontSize and the lineHeight based on the borderRadius of the circle, to function properly for all dimensions.
<Text style = {{
textAlign: 'center',
backgroundColor:'green',
fontSize:fontSize - 2 * borderWidth, //... One for top and one for bottom alignment
lineHeight:fontSize - (Platform.OS === 'ios' ? 2 * borderWidth : borderWidth), //... One for top and one for bottom alignment
}}>
Here's a snack link
The solution that worked the best for me was instead of using a Text Element, instead, use a plus Icon. The difference is that the viewBox of "+" as a character isn't centered.
If that is confusing look at these three letters
A+a
Notice that "A" is taller than "+" and also "a". So instead, use a PLUS icon instead and it will be perfectly centered such as 24x24 px. This drove me mad!
I can't change the default size of the thumbnail from NativeBase. I can display the default circle, which is the small and the large one, but I want to display a bigger circle than the default size. Here's my code for the thumbnail :
<Thumbnail size={200} style={{margin: 30}} source={require('../../../public/images/profile/yellow.jpg')} />
The props size doesn't work, the thumbnail remains small.
My NativeBase version : 2.3.5
Native Base Component doesn't have a size props, you should add width and height, and one more thing you shouldn't forget please add borderRadius divided by 2 to ensure the shape is retain Circle
<Thumbnail style={{width: 30, height: 30, borderRadius: 30/2}} source={require('../../../public/images/profile/yellow.jpg')} />
You can simply increase the Thumbnail size by using this trick. Just take the property of scale with <Thumbnail/>.
Just copy-paste the below code in your app
<Thumbnail
scaleX={3} scaleY={3} style={{margin: 30}}
source={require('../../../public/images/profile/yellow.jpg')}/>
You can change the scale values as per your need. Let me know if this fixes your issue.
The Thumbnail component from NativeBase doesn't have the size attribute. Try to set width and height properties of the style attribute
<Thumbnail style={{width: 100, height: 100, margin: 30}} source={require('../../../public/images/profile/yellow.jpg')} />
NativeBase Thumbnail component comes with small and large props for size. You can also set width and height to have image with other dimensions
So, I want to create a layout similar to whats below. [Refer the Image]
So the background has a full screen MapView (React Native Maps) with Markers over it, which needs to be clickable.
And there is a Scrollview with full screen height over the MapView which initially has some top-margin associated with its contents.
But the issue if I arrange my Views this way, the Markers on the map are not clickable in the initial state.
<View>
<MapView>
<Marker clickEventHere></Marker>
<Marker clickEventHere></Marker>
</MapView>
<ScrollView fullscreen>
<View marginTop></View>
</ScrollView>
<View>
I am unsure if its really possible to solve this out.
Initial State
After Scrolling
Solution Tried
yScrolled = event.nativeEvent.contentOffset.y;
yValue = this.state.yValue - yScrolled;
upwardScroll = yScrolled > 0;
if(upwardScroll && (yValue > 0)){
this.setState({
yValue: yValue
});
}
if(yScrolled === 0){
yScrolled = -10;
}
if(!upwardScroll && (yValue <= scrollViewMarginTop)){
yValue = this.state.yValue - yScrolled;
console.debug("UPDATE DOWNWARD");
this.setState({
yValue: yValue
});
}
I'd start with adding absolute positioning to your ScrollView, (position: absolute) starting at whatever y coordinate you would like. I would make this y value a state, eg
yValue: new Animated.Value(start_value) or simply yValue: start_value
I would then use ScrollView's prop onScroll event to handle the change in this y coordinate, for example for the first 100 pixels of a scroll it would simply change the yValue instead of scrolling the view.
This should enable you to press the markers you have in your parent view, and use the same component structure that you have provided.
Note: You would need to do this for collapsing the scrollview also.
Note2: if this doesn't give you the result you were looking for, i'd suggest looking into using some sort of collapsable component for this task, eg https://github.com/oblador/react-native-collapsible
Hope this helps
EDIT: To collapse the scrollview you could first identify if the scroll direction is downwards ( which i think youve done via upwardScroll ) and then..
1) Either simply add the content offset to your yValue
2) If you used Animated.Value for yValue, you can have an animate function that animates the scrollview downwards to your desired position. I think this would look nicer as the user would only need a simple downwards flick to collapse the view, which seems like the industry standard.
There is also a library that is called react-native-touch-through-view that can do this for you. This it how it works basically:
<View style={{ flex: 1 }}>
// Your map goes here
</View>
<TouchThroughWrapper style={{
position: 'absolute'',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}>
<ScrollView
style={{
backgroundColor: 'transparent',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
// Maybe in your case is flex: 1 enough
}}
bounces={false}
showsVerticalScrollIndicator={false}
>
<TouchThroughView
style={{
height: 400, // This is the "initial space" to the top
}}
/>
// The "slide up stuff" goes here
</ScrollView>
</TouchThroughWrapper>
For example, this then can look like this:
So the map is overlayed by the TouchThroughView that passes all the events right to the view behind. In my case this worked better than using pointer-events box-none.
I'm trying to set the dimensions of the image so that the width will always take up the full width of the card (minus the horizontal margin) and with a flexible height, so that it can scale as it needs to.
How can I do this? It seems that the style needs a height, it won't accept null.
I have tried a LOT of combinations using various resizeModes, heights, widths etc.
Here is the component:
And here is my current code:
renderImage(image) {
const { width, height } = Dimensions.get('window');
if (image) {
return (
<View style={styles.imageContainer}>
<Image
style={{ width, resizeMode: 'contain', height: 300 }}
source={{ uri: image }}
/>
</View>
);
}
}
The aspectRatio property solves this problem nicely.
<Image
style={{ width: '100%', aspectRatio: 1 }}
source={{uri: 'https://online.picture/dynamic_size'}}/>
I had same problem for images from web (where no exact width & height was known) and created react-native-web-image. Currently not for local images, only for remote. Try it, I will be glad if it will help.
Set the width to be the screen width, and set height to be undefined.