How to used in class component？

[SteveChina]

No description provided.

[SteveChina]

#85 (comment)

[SteveChina]

``import React, {PureComponent} from 'react'; import PropTypes from "prop-types";

import {
View,
Text
} from 'react-native';

import RangeSlider from 'rn-range-slider';
import {color,themeColor, colorDark, fontFamily} from "../../const/style"

import {DarkModeContext,DynamicStyleSheet,DynamicValue,useDynamicStyleSheet} from "react-native-dark-mode"

class RangeSlider extends PureComponent {

constructor(props) {
    super(props)
}

static propTypes={
};

static defaultProps={

};

static contextType = DarkModeContext

checkState(){
            let var1 = "pro/param/";
            if(var1.length){
                let matchUserList = [
                    {
                    location:{
                        country:"usa",
                        state:'clar',
                        city:"New York"
                    },
                    age:22,
                    username:'Emily',
                    likeStatus:0,
                    isHidden:0,
                    isBlocked:0,
                    memberShip:0,
                    gender:{
                        id:0,
                        label:"women"
        
                    },
                    photoVerify:1,
        
                },
                {
                    location:{
                        country:"usa",
                        state:'clar',
                        city:"New York"
                    },
                    age:22,
                    username:'Emily',
                    likeStatus:0,
                    isHidden:0,
                    isBlocked:0,
                    memberShip:0,
                    gender:{
                        id:0,
                        label:"women"
        
                    },
                    photoVerify:1,
        
                }
                ];
                if(matchUserList.length){
                    if(this.checkTime()==false)
                    return false;
                }
            }
            return false;
        }

    checkTime(){
                let var1 = "pro/param/";
                if(var1.length){
                    let matchUserList = [
                        {
                        location:{
                            country:"usa",
                            state:'clar',
                            city:"New York"
                        },
                        age:22,
                        username:'Emily',
                        likeStatus:0,
                        isHidden:0,
                        isBlocked:0,
                        memberShip:0,
                        gender:{
                            id:0,
                            label:"women"
            
                        },
                        photoVerify:1,
            
                    },
                    {
                        location:{
                            country:"usa",
                            state:'clar',
                            city:"New York"
                        },
                        age:22,
                        username:'Emily',
                        likeStatus:0,
                        isHidden:0,
                        isBlocked:0,
                        memberShip:0,
                        gender:{
                            id:0,
                            label:"women"
            
                        },
                        photoVerify:1,
            
                    }
                    ];
                    if(matchUserList.length){
                        return false;
                    }
                }
                return false;
            }

render() {
    if(this.checkTime())return;
    let {props} = this;
    let {
        min,
        max,
        onValueChanged,
        style
    } = props;

    const styles = dynamicStyles[this.context]

    return (
        <View style={[styles.sliderView,style]}>
        <View style={styles.sliderTextView}>
            {/* <Image source={imageAgeRange} style={styles.titleImage}></Image> */}
            <Text style={[styles.slideText, {flex:1}]}>Age range</Text>
            <Text style={styles.slideRightText}>{min} - {max}</Text>
        </View>
        <RangeSlider
            style={styles.slider}
            min={18}
            max={99}
            step={1}
            low={min}
            high={max}
            floatingLabel={true}
            onValueChanged={(low,high,fromUser)=>{
                if(fromUser){
                    if(low==high)
                        return;
                    
                    onValueChanged(low,high)
                }
            }}
            renderThumb={()=>{
                return <View style={{
                    width: THUMB_RADIUS * 2,
                    height: THUMB_RADIUS * 2,
                    borderRadius: THUMB_RADIUS,
                    borderWidth: 2,
                    borderColor: color.themeColor,
                    backgroundColor: '#ffffff',
                }}/>
            }}
            renderRail={()=>{
                return <View style={{
                    flex: 1,
                    height: 4,
                    borderRadius: 2,
                    backgroundColor: this.context == 'dark'?colorDark.splitColor:color.splitColor,
                }}/>
            }}
            renderRailSelected={()=>{
                return <View style={{
                    height: 4,
                    backgroundColor: color.themeColor,
                    borderRadius: 2,
                }}/>
            }}
            renderLabel={()=>{
                return <View style={{
                            alignItems: 'center',
                            padding: 8,
                            backgroundColor: color.themeColor,
                            borderRadius: 4,
                        }}>
                            <Text style={{fontSize: 16, color: '#fff',}}>{min} - {max}</Text>
                        </View>
            }}
            
            renderNotch={()=>{
                return <View style={{
                    width: 10,
                    height: 30,
                    borderLeftColor: 'transparent',
                    borderRightColor: 'transparent',
                    borderTopColor: color.themeColor,
                    borderLeftWidth: 10,
                    borderRightWidth: 10,
                    borderTopWidth: 30,
                }}/>
            }}
        />
    </View>
    )
}

}
const THUMB_RADIUS = 13;
const sizeoffont = 17
const dynamicStyles = new DynamicStyleSheet
//const style=StyleSheet.create
({
sliderView:{
//paddingHorizontal:10,
//borderTopWidth: 0,
borderColor: new DynamicValue(color.splitColor,colorDark.splitColor),
height: 100,
//alignItems: 'center',
justifyContent:center,
//paddingRight:20,
//backgroundColor:'red'
},
sliderTextView:{
flexDirection:'row',
justifyContent:'flex-start',
flex:1,
alignItems:'center',
//backgroundColor:'red'
},
slider:{
//paddingTop:-30,
paddingVertical:15,
marginHorizontal:0,
//flex: 1,
//height: 40,
//width:500,
//padding: 10,
backgroundColor: new DynamicValue(color.bg,colorDark.bg),
//backgroundColor:'red'
},
slideText:{
fontSize:15,
color:new DynamicValue(color.title,colorDark.title),
},
slideRightText:{
fontSize:15,
color:new DynamicValue(color.textColor,colorDark.textColor),
},
});

export default RangeSlider

[SteveChina]

above is my code, and steps at below.

step 1:push in config view, I slide the thumb(slider in the config view)，pop config view.
setp 2:push in config view again, InteractionManager.runAfterInteractions function of the config view will not be called. And push in other views have the same problem.

anything else I need to do?
thanks!

[githuboftigran]

@SteveChina , don't really understand the problem.