search

wix / react-native-ui-lib

UI Components Library for React Native
https://wix.github.io/react-native-ui-lib/
MIT License
6.45k stars 706 forks source link

Slider track disappeared #2002

Closed alzhab closed 2 years ago

alzhab commented 2 years ago

Description

Hello, tried to look at example code of Slider component link, but all sliders, except GradientSlider, show only thumb and stay at initial position

Related to

Steps to reproduce

  1. Copy code from example of Slider component link

Expected behavior

Show Track line

Actual behavior

Show only Thumb

Code snippet

import React, { Component } from 'react'
import { StyleSheet, ScrollView } from 'react-native'
import {
  Colors,
  View,
  Text,
  Icon,
  Slider,
  GradientSlider,
  ColorSliderGroup,
  Constants,
} from 'react-native-ui-lib'

const INITIAL_VALUE = 0
const COLOR = Colors.blue30

interface SliderScreenProps {
  componentId: string
}

interface SliderScreenState {
  alpha: number
  color: string
  sliderValue: number
}

export default class SliderScreen extends Component<
  SliderScreenProps,
  SliderScreenState
> {
  constructor(props: SliderScreenProps) {
    super(props)

    this.state = {
      alpha: 1,
      color: COLOR,
      sliderValue: INITIAL_VALUE,
    }
  }

  onSliderValueChange = (value: number) => {
    this.setState({ sliderValue: value })
  }

  onGradientValueChange = (value: string, alpha: number) => {
    this.setState({ color: value, alpha })
  }

  onGroupValueChange = (value: string) => {
    console.warn('onGroupValueChange: ', value)
  }

  render() {
    const { color, alpha, sliderValue } = this.state

    return (
      <ScrollView showsVerticalScrollIndicator={false}>
        <View flex padding-20>
          <Text titleHuge $textDefault marginB-20>
            Sliders
          </Text>

          <View row centerV style={Constants.isRTL && styles.ltr}>
            <Icon assetName={'search'} style={styles.image} />
            <Slider
              onValueChange={this.onSliderValueChange}
              value={INITIAL_VALUE}
              minimumValue={0}
              maximumValue={100}
              step={1}
              containerStyle={styles.sliderContainer}
              disableRTL
            />
            <Text bodySmall $textNeutral style={styles.text}>
              {sliderValue}%
            </Text>
          </View>

          <Text $textDefault marginT-30>
            Negatives
          </Text>
          <Slider
            minimumValue={-100}
            maximumValue={100}
            value={-30}
            minimumTrackTintColor={Colors.red30}
            thumbTintColor={Colors.red50}
            containerStyle={styles.slider}
          />
          <Slider
            minimumValue={-300}
            maximumValue={-100}
            value={-130}
            minimumTrackTintColor={Colors.red30}
            thumbTintColor={Colors.red50}
            containerStyle={styles.slider}
          />

          <Text $textDefault marginT-20>
            Disabled
          </Text>
          <Slider
            minimumValue={100}
            maximumValue={200}
            value={120}
            containerStyle={styles.slider}
            disabled
          />

          <Text $textDefault marginT-15>
            Custom with Steps
          </Text>
          <Slider
            value={50}
            minimumValue={0}
            maximumValue={100}
            step={25}
            containerStyle={styles.slider}
            trackStyle={styles.track}
            thumbStyle={styles.thumb}
            activeThumbStyle={styles.activeThumb}
            thumbTintColor={Colors.violet70}
            minimumTrackTintColor={Colors.violet40}
            maximumTrackTintColor={Colors.violet70}
          />

          <Text $textDefault marginT-15>
            Gradient Sliders
          </Text>
          <View row centerV>
            <Text text90 $textNeutral>
              DEFAULT
            </Text>
            <GradientSlider
              color={color}
              containerStyle={styles.gradientSliderContainer}
              onValueChange={this.onGradientValueChange}
            />
            <View style={styles.box}>
              <View
                style={{ flex: 1, backgroundColor: color, opacity: alpha }}
              />
            </View>
          </View>
          <View row centerV>
            <Text text90 $textNeutral>
              HUE
            </Text>
            <GradientSlider
              type={GradientSlider.types.HUE}
              color={COLOR}
              containerStyle={styles.gradientSliderContainer}
              onValueChange={this.onGradientValueChange}
            />
            <View style={styles.box}>
              <View style={{ flex: 1, backgroundColor: color }} />
            </View>
          </View>

          <Text $textDefault marginT-25 marginB-20>
            Color Slider Group
          </Text>
          <ColorSliderGroup
            initialColor={color}
            sliderContainerStyle={styles.slider}
            containerStyle={styles.group}
            showLabels
            // onValueChange={this.onGroupValueChange}
          />
        </View>
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  ltr: {
    flexDirection: 'row-reverse',
  },
  image: {
    tintColor: Colors.$iconNeutral,
  },
  text: {
    width: 40,
  },
  slider: {
    marginVertical: 6,
  },
  sliderContainer: {
    flex: 1, // NOTE: to place a slider in a row layout you must set flex in its 'containerStyle'!!!
    marginHorizontal: 8,
  },
  gradientSliderContainer: {
    flex: 1, // NOTE: to place a slider in a row layout you must set flex in its 'containerStyle'!!!
    marginHorizontal: 20,
    marginVertical: 10,
  },
  track: {
    height: 2,
  },
  thumb: {
    width: 26,
    height: 26,
    borderRadius: 13,
    borderColor: Colors.violet40,
    borderWidth: 1,
    shadowColor: Colors.white,
  },
  activeThumb: {
    width: 40,
    height: 40,
    borderRadius: 20,
  },
  box: {
    width: 20,
    height: 20,
    borderRadius: 4,
    borderWidth: 1,
    borderColor: Colors.$outlineDefault,
  },
  group: {
    backgroundColor: Colors.$backgroundNeutralMedium,
    padding: 10,
    borderRadius: 6,
  },
})

Screenshots/Video

Simulator Screen Shot - iPhone 13 mini - 2022-04-19 at 20 45 42

Environment

Affected platforms

lidord-wix commented 2 years ago

@alzhab It works fine for me in our demo app. Do you get this behavior on a simulator? can you maybe share a link to your project?

alzhab commented 2 years ago

@alzhab It works fine for me in our demo app. Do you get this behavior on a simulator? can you maybe share a link to your project?

Hello, sorry, cant share project i can show my package.json in project i use storybook v5, can it affect to RNULib ?

{ "name": "chefio", "version": "0.0.1", "private": true, "scripts": { "android": "npx react-native run-android", "ios": "npx react-native run-ios --simulator='iPhone 13 mini'", "start": "npx react-native start", "storybook": "rnstl && start-storybook -p 7007", "gen-icons": "npx svg-to-rnicons './src/assets/icons-import' './src/assets/icons'", "test": "jest" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.15.17", "@react-native-community/blur": "^3.6.0", "@react-native-community/datetimepicker": "^6.1.0", "@react-native-community/netinfo": "^8.2.0", "@react-native-picker/picker": "^2.4.0", "@react-navigation/native": "^6.0.7", "@react-navigation/stack": "^6.1.1", "axios": "^0.25.0", "mobx": "^6.3.13", "mobx-react": "^7.2.1", "react": "17.0.2", "react-hook-form": "^7.29.0", "react-native": "0.67.2", "react-native-fast-image": "^8.5.11", "react-native-gesture-handler": "^2.2.0", "react-native-modal": "^13.0.1", "react-native-reanimated": "^2.5.0", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.10.2", "react-native-size-matters": "^0.4.0", "react-native-splash-screen": "^3.3.0", "react-native-svg": "^12.1.1", "react-native-ui-lib": "^6.13.2" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/preset-typescript": "^7.16.7", "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "^2.0.0", "@storybook/addon-actions": "^5.3", "@storybook/addon-knobs": "^5.3", "@storybook/addon-links": "^5.3", "@storybook/addon-ondevice-actions": "^5.3.23", "@storybook/addon-ondevice-knobs": "^5.3.25", "@storybook/react-native": "^5.3.25", "@storybook/react-native-server": "^5.3.23", "@testing-library/react-native": "^9.1.0", "@types/jest": "^27.4.1", "@types/react-native": "^0.66.15", "@types/react-native-dotenv": "^0.2.0", "@types/react-test-renderer": "^17.0.1", "@typescript-eslint/eslint-plugin": "^5.7.0", "@typescript-eslint/parser": "^5.7.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.4", "babel-plugin-module-resolver": "^4.1.0", "eslint": "^7.14.0", "jest": "^27.5.1", "metro-react-native-babel-preset": "^0.67.0", "prettier": "^2.5.1", "react-dom": "17.0.2", "react-native-dotenv": "^3.3.1", "react-native-storybook-loader": "^2.0.5", "react-test-renderer": "17.0.2", "typescript": "^4.4.4" }, "resolutions": { "@types/react": "^17" }, "jest": { "preset": "react-native", "moduleFileExtensions": [ "ts", "tsx", "js", "jsx", "json", "node" ], "transformIgnorePatterns": [ "/node_modules/(?!(@react-native|react-native|react-native-ui-lib|react-native-size-matters|react-native-reanimated|react-native-swipe-gestures|react-native-modal-selector|react-native-modal-datetime-picker|react-native-modal|react-native-animatable|@react-navigation|react-native-splash-screen)/).*/" ], "setupFiles": [ "./jestSetup.js" ] }, "config": { "react-native-storybook-loader": { "searchDir": [ "./src/components", "./storybook" ], "pattern": "*/.stories.tsx", "outputFile": "./storybook/storyLoader.js" } } }

alzhab commented 2 years ago

Tried to check on empty project, everything work fine, will try to find what breaks Slider track