I'm still new in react native. I hope you guys can help me. I want to change float to an int in the slider. (in the onValueChange)
This is my code :
<Section style={{padding:10, backgroundColor:'white', borderRadius:10, marginTop:30}}>
<Block xsSize='1/2' smSize='1/2'>
<Slider
style={{width: 200, height: 40}}
minimumValue={1}
maximumValue={100}
minimumTrackTintColor="#0197ca"
maximumTrackTintColor="#a2a2a2"
onValueChange={(value) => this.setState({sliderState:value})}
/>
</Block>
<Block xsSize='1/2' smSize='1/2' style={{padding:10, borderRadius:5, backgroundColor:'#0197ca', width:60, position:'relative', left:90}}>
<Text style={{color:'white'}}>{this.state.sliderState}%</Text>
</Block>
</Section>
I want to change the output in <Text style={{color:'white'}}>{this.state.sliderState}%</Text> become an int. Right now, the output is still float.
When you want the value to be in certain ways make sure to do the changes when you set the state.
In that way, you can have your value to be formatted the way you want.
Try this:
<Section style={{padding:10, backgroundColor:'white', borderRadius:10, marginTop:30}}>
<Block xsSize='1/2' smSize='1/2'>
<Slider
style={{width: 200, height: 40}}
minimumValue={1}
maximumValue={100}
minimumTrackTintColor="#0197ca"
maximumTrackTintColor="#a2a2a2"
onValueChange={(value) =>this.setState({sliderState:Math.round(value)})}
/>
</Block>
<Block
xsSize='1/2'
smSize='1/2'
style={{padding:10, borderRadius:5, backgroundColor:'#0197ca', width:60, position:'relative', left:90}}>
<Text style={{color:'white'}}>
{this.state.sliderState}%
</Text>
</Block>
</Section>
Related
By default MUI Slider thumb is going out of bounds of the track by the radius of the thumb in the first and last positions.
Let's see some examples on the screenshot below:
screenshot 1
code behind it:
<Slider style={{ width: "400px" }} min={0} max={3} step={1} />
<Slider style={{ width: "400px" }} min={0} max={3} step={1} />
<Slider style={{ width: "400px" }} min={0} max={3} step={1} />
slider is in the first position
slider is in the midst position
slider is in the last position
Here's how I want it to be:
screenshot 2
How I currently achieve that behaviour?
code behind it:
<Slider style={{ width: "400px" }} min={-0.081} max={3.085} step={1} />
<Slider style={{ width: "400px" }} min={-0.081} max={3.085} step={1} />
<Slider style={{ width: "400px" }} min={-0.081} max={3.085} step={1} />
The side-effect to that code is that if we try, we can push the thumb to the right-most or left-most position (so it will be the same as on the first screenshot with the problem).
I was wondering how can one disable/disallow first and last positions of a Slider?
Maybe there are other ways to achieve this with css or something else, I'm open to any options.
I have placed a Dropdown picker above a ScrollView, when both Dropdown picker and ScrollView is poppulated with data and I'm trying to scroll through the data in Dropdown it instead scrolling the ScrollView in the background.
Infact the Dropdown isn't scrolling at all, even if there's no ScrollView in the background, I'm not sure what I'm doing wrong.
<View style={styles.lowerContainer}>
{sevaListDrop ? (
<>
<View // specific search section
style={[styles.searchContainer, {zIndex: 2, marginBottom: '2%'}]}>
<DropDownPicker // dropdown
style={{borderColor: '#ccc'}}
containerStyle={{flex: 3, marginLeft: '2%'}}
dropDownContainerStyle={{
borderColor: '#ccc',
zIndex: 1000,
elevation: 1000,
position: 'absolute',
}}
open={openDrop}
setOpen={setOpenDrop}
items={sevaListDrop?.map(item => ({
label: item.sevaName,
value: item.calendarId,
}))}
placeholder="Select Seva"
value={calendarId}
setValue={type => setCalendarId(type)}
/>
<PrimaryButton // search button
name="Search"
action={search}
/>
</View>
<View // lower container for seva list
style={[styles.lowerContainer, {justifyContent: 'center'}]}>
{sevaList ? (
<ScrollView // seva list
style={{width: '100%'}}
contentContainerStyle={{
alignItems: 'center',
paddingBottom: 50,
}}
showsVerticalScrollIndicator={false}>
{sevaList?.map((item, index) => (
<SevaCard // seva card
key={index}
sevakName={item.sevakName}
bookedBy={item.bookedBy}
noOfAttendees={item.noOfAttendees}
onChangeText={text => {
setPeopleCount(item.slotId, text);
}}
onPress={() =>
updateAttendees(item.slotId, item.calendarId)
}
/>
))}
</ScrollView>
) : noDataInner ? (
<CautionSection // no data container
title="No Data Found"
icon="no_user_found"
/>
) : (
<CautionSection // default container
title="Search Patron Id"
icon="search"
/>
)}
</View>
</>
) : (
<View // lower caution container
style={[styles.lowerContainer, {justifyContent: 'center'}]}>
{noData ? (
<CautionSection // no data container
title="No Data Found"
icon="no_user_found"
/>
) : noConnection ? (
<CautionSection // no connection container
title="No Connection"
icon="no_connection"
/>
) : (
<CautionSection // default container
title="Search Patron Id"
icon="search"
/>
)}
</View>
)}
</View>
What is really causing this problem is the zIndex:2 in the <View> // specific search section. If you erase that zIndex you should stop having this problem.
At the same time, you may have a problem with your Dropdown, because you will not see the options anymore (or the Dropdown itself). To solve this you should have your <View // lower container for seva list component inside your <View // specific search section component, and then add a zIndex:0 in that last <View> like this:
<View> // specific search section
<DropdownPicker zIndex={1000}></DropdownPicker>
<PrimaryButton></PrimaryButton>
<View style={{zIndex:0}}>
<ScrollView>
<SevaCard></SevaCard>
</ScrollView>
</View>
</View>
As you can see, I also added a zIndex as an attribute of the element, since it is allowed in DropdownPicker, and preferred.
the style does not work on images (Image); how can I fix it?
For example, style 2-card is applied without an image
but when I add images, the style changes, I don't understand why.
Icons are visible on Card-2, but after adding an image on card-1, the photo closes the icons
export default class Cards extends Component{
render(){
return(
<View style={{...styles.container, backgroundColor:this.props.bg }}>
<View style={styles.col}>
<Image
style={styles.col}
source={this.props.imageUri}
/>
<Icon
name={this.props.icon}
size={30}
color={this.props.bg == "red" ? "red":"red"}
/>
<TouchableOpacity onPress={this.props.onPress}>
<Icon2
style={{marginLeft:50}}
name="dots-vertical"
size={30}
color="red"
/>
</TouchableOpacity>
</View>
<Text style={styles.title}>{this.props.title}</Text>
<Text style={{
...styles.number,
color: this.props.bg == "red" ? "#FFF":"#000",
}}>
{this.props.number}
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
height:200,
width:130,
borderRadius:30,
padding:15,
marginLeft:20
},
col: {
flexDirection:"row"
},
title:{
marginTop:90,
color:"#b8b8aa",
fontWeight:"bold",
fontSize:12
},
number:{
fontWeight:'bold',
fontSize:22
}
})
example
I have created a sample based on your code.
Basically overflow: 'hidden' of the container did the trick
Should get a gradient bluer like the design, but I can't do it, any ideas?
what it should look like
This is how my code look
<ImageBackground
source={{uri: uri}}
style={styles.imageBackground}
imageStyle={styles.imageStyleBackground}
>
<BlurView
style={{width: width * 0.78}}
>
<Text style={styles.date}>{date}</Text>
<Text style={styles.title}>{title}</Text>
</BlurView>
</ImageBackground>
I try to use BlurView component, but it doesn't work the way it's supposed to .
Try with position: 'absolute'
<>
<Image
source={{uri: uri}}
style={styles.imageStyleBackground}
/>
<BlurView style={{width: width * 0.78, position: 'absolute'}}>
<Text style={styles.date}>{date}</Text>
<Text style={styles.title}>{title}</Text>
</BlurView>
</>
You could add an element on top of the image with backdrop-filter:blur(5px) that is masked with a gradient (eg. mask linear-gradient(black, black, transparent))
See https://codepen.io/QuiteQuinn/pen/jOBxGjr.
I fetch some images from Facebook API and I want to display them responsive, to be 100% width and auto height. The problem seems to be that React Native crops my image.
I tried these solutions:
Solution 1
Solution 2
Also, I have tried to use react-native-auto-height-image and set it's width to the screen's one.
Actual code:
<TouchableOpacity onPress={() => Linking.openURL(post.url)}>
<Card style={{ flex: 1 }}>
<CardItem>
<Left>
<Thumbnail source={ThumbnailImage} />
<Body>
<Text>My text</Text>
<Text note>{createdTime}</Text>
</Body>
</Left>
</CardItem>
<CardItem>
<Body>
<AutoHeightImage
width={Dimensions.get('window').width - 35}
source={{ uri: post.media.image.src }}
/>
<Text style={{ marginTop: 10 }}>{post.description}</Text>
</Body>
</CardItem>
</Card>
</TouchableOpacity>
PS: Application is using Native Base as a UI library.
This problem can easily solve by using paddingTop, width, and position. Just try below code.
<View style={{width:'100%',paddingTop:'100%'}}>
<Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
</View>
In the above code, change width and paddingTop as per the required image box size.
I think that to solve this problem is simple, you could use Dimensions to set the width and height of the image with the width of the screen, like bellow:
import { Image, Dimensions } from 'react-native';
var screenWidth = Dimensions.get('window').width;
<View>
<Image source={...} style={{ width: screenWidth, height: screenWidth }} />
</View>
https://snack.expo.io/ryuCvY8cX