import React from 'react';

  import {
    StyleSheet,
    Text,
    View,
    StatusBar,
    TouchableOpacity,
    Keyboard,
    TouchableWithoutFeedback,
  } from 'react-native';

  import {MultiSliderProps} from 'react-native-multi-slider'

  import Slider from 'react-native-slider';
  import { Header, Icon, Button, Avatar, Input } from 'react-native-elements';


  const DismissKeyboard = ({ children }) => (
    <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
      {children}
    </TouchableWithoutFeedback>
  );

  export default class App extends React.Component {
    state = {
      value1: 500,
      value2: 1000,
    };

    render() {
      return (
        <DismissKeyboard>
          <View style={styles.container}>
            <Header />

            <View
              style={{
                backgroundColor: '#FFF',
                marginHorizontal: 10,
                borderRadius: 8,
                flex: 0.23,
                flexDirection: 'column',
                alignItems: 'stretch',
                justifyContent: 'flex-start',
              }}>

              <Text style = {{
                    color: '#E41D32',
                    fontfamily: 'Roboto',
                    fontstyle: 'normal',
                    fontweight: '',
                    lineheight: 16,
                    marginTop: 20,
                    marginLeft: 15,
                    }}>Цена</Text>

              <Slider
                style={{ marginHorizontal: 10 }}
                value={this.state.value1}
                maximumValue={3024}
                step={1}
                thumbTintColor = '#E41D32'
                maximumTrackTintColor = '#E41D32'
                minimumTrackTintColor = '#AEAFB2'
                trackStyle = {{height: 2}}
                thumbStyle = {{}}
                onValueChange={value1 => this.setState({ value1 })}
              />

              <Slider
                thumbTintColor = '#E41D32'
                maximumTrackTintColor = '#AEAFB2'
                minimumTrackTintColor = '#E41D32'
                style={{ marginTop: -10, marginHorizontal: 10 }}
                value={this.state.value2}
                trackStyle = {{height: 2}}
                maximumValue={3024}
                step={1}
                onValueChange={value2 => this.setState({ value2 })}
              />

              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'flex-end',
                  justifyContent: 'center',
                  flex: 0.1,
                  marginTop:10,
                }}>
                <Text>{this.state.value1} руб</Text>

                <Text> - </Text>

                <Text>{this.state.value2} руб</Text>
              </View>
            </View>

          </View>
        </DismissKeyboard>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#E5E5E5',
      alignItems: 'stretch',
      flexDirection: 'column',
      justifyContent: 'flex-start',
    },
  });