Need to adjust slider with Image above

49 views Asked by At

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

enter image description here

And I want to achieve as below

enter image description here

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'
        },

})
0

There are 0 answers