Skip to content

minimumTrackImage, maximumTrackImage, and trackImage do not work together  #271

@YeetOrBeYate

Description

@YeetOrBeYate

Environment

System:
OS: macOS 10.15.7
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Memory: 1008.80 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.15.3 - /var/folders/1t/_jt97n35417ff5hsqd0m7dbw0000gn/T/yarn--1615841103810-0.40424128651417157/node
Yarn: 1.22.4 - /var/folders/1t/_jt97n35417ff5hsqd0m7dbw0000gn/T/yarn--1615841103810-0.40424128651417157/yarn
npm: 6.14.9 - ~/.nvm/versions/node/v14.15.3/bin/npm
Watchman: Not Found
Managers:
CocoaPods: Not Found
SDKs:
iOS SDK:
Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
Android SDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6626763
Xcode: 12.4/12D4e - /usr/bin/xcodebuild
Languages:
Java: Not Found
Python: 3.8.5 - /Users/kylecorbin/.pyenv/shims/python
npmPackages:
@react-native-community/cli: Not Found
expo: ^40.0.0
react: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz => 0.63.2
react-native-macos: Not Found
expo-cli: 4.0.16
npmGlobalPackages:
react-native: Not Found
✨ Done in 26.91s.

Description

This looks like a new issue, please direct me to another thread if there is one.

Only trying this on the ios version. Setting any of the above minimumTrackImage/maximumTrackImage props along with a trackImage prop does not work. Doesn't matter if its just one minimumTrackImage/maximumTrackImage or both, they don't work. Even when I try to set a minimumTrackImage/maximumTrackImage props without setting a trackImage prop, neither works.

Is minimumTrackImage/maximumTrackImage meant to be used in conjunction of a trackImage? Are they meant to work without one? Is using all three part of the problem?

Reproducible Demo

import React from 'react';
import { Image, StyleSheet, View } from 'react-native';
import Slider from '@react-native-community/slider';

const track = require('./assets/GrayColor.png');

const mini = require('./assets/redColor.png');
const max = require('./assets/blueColor.png');

export default function App() {
  return (
    <View style={styles.sliderContainer}>
      <Slider
        style={styles.slider}
        minimumTrackImage={mini}
        maximumTrackImage={max}
        trackImage={track}
        minimumValue={0}
        maximumValue={100}
        value={50}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  sliderContainer: {
    position: 'absolute',
    bottom: 5,
    width: '90%',
    opacity: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: COLORS.DARK_80,
    borderRadius: 17,
  },
  slider: {
    marginRight: 10,
    marginLeft: 10,
    flex: 1,
  },
});

Metadata

Metadata

Assignees

Labels

bug reportSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions