I m currently using the slider from react-native-community and i am having trouble doing more than one thing while using onValueChange.
now the value taken from onValueChange is set to control the strokeDashOffset (sdo) of an SVG element. It is working just fine but i need to add some more rendering depending on the slider value. That's to say for example when the value reaches 340 i need to setState something, then when it reaches 650 i need to set some other state etc...
here is the code of my slider :
<Slider style={styles.slider}
minimumValue={0}
maximumValue={1570}
value={sdo}
step={1}
onValueChange = {value => setSdo(value)}
/>
(in my svg component the strokeDashOffset is set to this sdo value but i don't feel like putting my svg code is relevant here, I guess i have to add some stuff in the onValueChange but i cannot use if statements and i have no idea how to proceed)
How can i conditionally render things based on the slider value (while stille having the slider value attached to strokeDashOffset of my SVG)?
thanks in advance !
Related
The situation:
I am building a tooltip that has to programmatically position itself based on an avatar component that lives in a different package.
The avatar lives in the header part of the screen and I can't colocate the tooltip to be next to it code-wise, because the tooltip needs to be dismissed once the user interacts/touches the screen.
The Problem:
is that I can't just use onLayout event on the avatar because it fades into the view and the layout event always results in { x: 0, y: 0 }, which is not accurate and doesn't reflect the actual position of the avatar.
Thanks in advance for any help or advice that you can offer!
What I tried:
Passing a callback for onLayout, but as I mentioned above it doesn't return the correct values.
Using the measure function, but it resulted in the same values as onLayout.
Using the PanResponder on that avatar and requested to respond to move events, but because the avatar doesn't move the onPanResponderMove doesn't get triggered.
as the doc says: ellipsizemode props defines how text will be truncated. in my case, i want to show a expand button instead of ellipsis glyph, and i could expand the text to show all of them by press the button.
so i want to figure out how numberOfLines actually works in Text component in react-native. then i could archive this, anyone could help?
It will show your content in <Text> component which is fitted in those numberOfLines.
With output you are expecting or want to perform, you can use dynamic numberOfLines using state.
Just have that state variable default value of lineNumbers and change it when pressing on button or any other component.
this.state = {
lineNumbers: 2
}
This indicates your numberOfLines will be default 2, and once user press on button or read more
this.setState({lineNumbers: null})
It will show whole content.
<Text numberOfLines={this.state.lineNumbers}>
I have designed a custom player view by using react-native-slider. There are multiple sliders arranged in this view. I am playing one audio file by following the sliders which are arranged in a FlatList component. All slider having its minimum and maximum value difference is 5 seconds.
Audio is playing as expected in each slider, but I need to tap on any of the slider position to set my current slider cursor on the same place. I am trying to get the position when click on the slider. The following methods :
onValueChange
onTouchStart
onTouchEnd
have no help to get the position/value on tap on any of the slider.
Following is the slider implementation in my code :
<Slider
key={index}
step={1}
onTouchStart={this.onSliderEditStart}
onTouchEnd={this.onSliderEditEnd}
value={sliderValue}
onValueChange={this.onSliderEditing}
maximumValue={item.endTime}
minimumValue={item.startTime}
animateTransitions
// maximumTrackTintColor='transparent'
maximumTrackTintColor={'#000'}
minimumTrackTintColor={'#d3d3d3'}
thumbStyle={{height: 55, width: 2.5}}
thumbTintColor={currentTime >= item.endTime ? 'transparent' : '#000066'}
trackStyle={{height: 55, backgroundColor: '#E6E6E6'}}
/>
Please help to find out the solution if any.
I'm looking for a way to dynamically add bordered property to the button element, how can I do that?
So I need to switch from <Button> to <Button bordered>. Any way to do this without assigning an entire <Button><Text>I'm a button</Text></Button> to a variable, then duplicating the same but with bordered?
You can use true or false based on your selection. Store its value in state and when you do some operation set it to true. This is how your Button will look.
<Button bordered={this.state.isBordered}><Text>I'm a button</Text></Button>
whenever you want to change its value just use setState and it's done
this.setState({
isBordered:true
})
Update:
Combine it with transparent parameter and it will work
<Button transparent bordered={this.state.isBordered}><Text>I'm a button</Text></Button>
I'm trying to set the initial scroll position of a ListView in react native.
Right now, I'm doing this:
componentDidMount() {
let i = this.props.images.indexOf(this.props.current);
if(i != -1) {
this.refs.listView.scrollTo({ x:i*this.props.width, y:0, animated:false });
}
}
where the images prop is the datasource for the ListView, the current prop is where I want to be initially scrolled to, and the width prop is the width of the component. (The component scrolls horizontally).
This works, but there's a delay between the initial render and the call to componentDidMount, giving me a flash of the end of end of the list before the list is scrolled.
Is there a way of setting an initial scroll position of the list? Or better way of doing this to get rid of that flash?
On iOS you can use the ScrollView#contentOffset to set the initial scroll position of a ListView, which inherits the properties of ScrollView.
If you are looking for an Android solution, the ListView.scrollTo method you are calling seems like the best bet for the general case.
That said, if I interpret your code sample correctly, you are using the ListView for a paginated, horizontal list, perhaps with the help of the pagingEnabled property? If this is the case, on Android you might look at using ViewPagerAndroid instead, and setting the initialPage property.