Support for Expo

[Badreddinez]

I receive the following on expo

and it would be really great if you support it. I see this as the best slider existing out there. Waiting for your feedback!

regards,

[aminsaedi]

Hi.

i'm using this lib with expo and there isn't any issue. You have to import all these props renderThumb & renderRail & renderRailSelected & renderLabel & renderNotch

You can find basic implementation of needed components (Thumb, Rail, RailSelected, Label, Notch) here.

[Harsh2110mishra]

Hi.

i'm using this lib with expo and there isn't any issue. You have to import all these props renderThumb & renderRail & renderRailSelected & renderLabel & renderNotch

You can find basic implementation of needed components (Thumb, Rail, RailSelected, Label, Notch) here.

Hey Amin, In my App this slider is not showing. Can you please help me to solve this issue?

[aminsaedi]

Here you are :))

I put a zip file below witch has all app.js and other files you need. please ping me your result Goodluck.

Archive.zip

[Harsh2110mishra]

Here you are :))

I put a zip file below which has all app.js and other files you need. please ping me your result Goodluck.

Archive.zip

I have imported your files and then use in class-based component but still, the slider is not visible. I am not able to find the solution for it. Please see this: https://github.com/githuboftigran/rn-range-slider/issues/110

[aminsaedi]

First of all sorry for delay. these days I'm so busy.

import React, { Component } from "react";
import RangeSlider from "rn-range-slider";
import Thumb from "./Thumb";
import Rail from "./Rail";
import RailSelected from "./RailSelected";
import Label from "./Lable";
import Notch from "./Notch";

import { View } from "react-native";

class ClassSlider extends Component {
  state = { low: 0, high: 0 };
  handleValueChange = (low, high) => {
    // setLow(low);
    // setHigh(high);
  };
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "#fff",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <RangeSlider
          style={{ width: 300, height: 10 }}
          min={0}
          max={100}
          step={1}
          floatingLabel
          renderThumb={(props) => <Thumb {...props} />}
          renderRail={(props) => <Rail {...props} />}
          renderRailSelected={(props) => <RailSelected {...props} />}
          renderLabel={(props) => <Label {...props} />}
          renderNotch={(props) => <Notch {...props} />}
          //   onValueChanged={handleValueChange}
        />
      </View>
    );
  }
}

export default ClassSlider;

I Also tries this in class component and it works with a simple change

[Harsh2110mishra]

First of all sorry for delay. these days I'm so busy.

import React, { Component } from "react";
import RangeSlider from "rn-range-slider";
import Thumb from "./Thumb";
import Rail from "./Rail";
import RailSelected from "./RailSelected";
import Label from "./Lable";
import Notch from "./Notch";

import { View } from "react-native";

class ClassSlider extends Component {
  state = { low: 0, high: 0 };
  handleValueChange = (low, high) => {
    // setLow(low);
    // setHigh(high);
  };
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: "#fff",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <RangeSlider
          style={{ width: 300, height: 10 }}
          min={0}
          max={100}
          step={1}
          floatingLabel
          renderThumb={(props) => <Thumb {...props} />}
          renderRail={(props) => <Rail {...props} />}
          renderRailSelected={(props) => <RailSelected {...props} />}
          renderLabel={(props) => <Label {...props} />}
          renderNotch={(props) => <Notch {...props} />}
          //   onValueChanged={handleValueChange}
        />
      </View>
    );
  }
}

export default ClassSlider;

I Also tries this in class component and it works with a simple change

Hey Amin, No issues. Thank you so much for your help. But I have already used another library which is working fine. But in the future, If I need I will use this code for the slider.

[githuboftigran]

The slider works normally with expo. So closing this thread.