1import Slider from '@react-native-community/slider';
2import * as React from 'react';
3import { Text } from 'react-native';
4
5import { Page, Section } from '../components/Page';
6import Colors from '../constants/Colors';
7
8export default function SliderScreen() {
9  const [value, setValue] = React.useState(0.5);
10
11  return (
12    <Page>
13      <Section title="Standard">
14        <Text>Value: {value && +value.toFixed(3)}</Text>
15        <Slider value={value} onValueChange={setValue} />
16      </Section>
17      <Section title="Custom Color">
18        <Text>Value: {value && +value.toFixed(3)}</Text>
19        <Slider
20          value={value}
21          minimumTrackTintColor="red"
22          maximumTrackTintColor={Colors.tintColor}
23          onValueChange={setValue}
24          thumbTintColor="gold"
25        />
26      </Section>
27    </Page>
28  );
29}
30
31SliderScreen.navigationOptions = {
32  title: 'Slider',
33};
34