import React , { useMemo } from 'react' ; import { Slider } from 'react-native' ; import { Caption } from 'react-native-paper' ; import { debounce , round } from 'lodash' ; import { useBrightness } from '@use-expo/brightness' ; import { Example , Information , Link , Page } from '../../atoms' ; import { MoleculeProps } from '../../providers/molecule' ; import { docs } from '../../providers/urls' ; export const UseBrightness = props => { const [ brightness , setBrightness ] = useBrightness ( ) ; const setBrightnessDebounced = useMemo ( ( ) => debounce ( setBrightness , 100 ) , [ setBrightness ] ) ; return ( < Page title = { props . name } subtitle = { props . description } > < Information > This example only uses the < Link url = { docs . brightness } > Brightness < /Link> module. It renders the current screen brightness and a slider to change that . < /Information> < Example > < Caption > { round ( Number ( brightness ) * 100 , 1 ) . toFixed ( 1 ) } % < /Caption> < Slider style = { { width : '100%' } } value = { brightness } onValueChange = { setBrightnessDebounced } step = { 0.001 } minimumValue = { 0.001 } maximumValue = { 1 } minimumTrackTintColor = "#333" thumbTintColor = "#333" / > < /Example> < /Page>); } ; UseBrightness . defaultProps = { name : 'useBrightness' , description : 'change the screen brightness' , } ;