Need to adjust slider with Image above.
I see there is a reserved container space for the slider container which I could not match with layout..
I'm using react-native-slider and ImageBackground for this.
What I did is
And I want to achieve as below
How can I achieve this ? Thanks in advance!
Please find the code below
<View style= {{flex: 1,height:300:width:300,backgroundColor:'#fff',justifyContent: 'center'}}>
<ImageBackground source={this.state.currImage} style={styles.backgroundImage} >
<View style={{flex:93}}>
</View>
<View style = {{backgroundColor:'transparent',flex:7}}>
<View style={ styles.timeInfo2 }>
<Text style={ styles.time }>{ timeIsAt }</Text>
<Text style={ styles.timeRight }> { formattedTime( this.state.songDuration - this.state.currentTime ) }</Text>
</View>
</View>
<View >
<View style={{backgroundColor:'transparent'}}>
{/*<View style={styles.slidercontainer1}>*/}
<Slider
onSlidingStart={ this.onSlidingStart.bind(this) }
onSlidingComplete={ this.onSlidingComplete.bind(this) }
onValueChange={ this.onSlidingChange.bind(this) }
maximumValue={this.state.songDuration}
step = {1}
minimumTrackTintColor="#ccc000"
thumbTintColor = "#ccc000"
trackStyle= {{height:5}}
value={this.state.value}
/>
</View>
</View>
</ImageBackground>
</View>
...
const Styles = StyleSheet.create({
backgroundImage: {
flex: 1,
flexDirection:'column',
}
timeInfo2: {
// backgroundColor: "#dfbacc",
backgroundColor:'transparent',
flexDirection: 'row',
},
time: {
color: '#fff',
flex: 1,
fontSize: 15,
fontWeight:'bold'
},
timeRight: {
color: '#fff',
// color: '#7700ff',
textAlign: 'right',
flex: 1,
fontSize: 15,
fontWeight:'bold'
},
})