App.js

import { StatusBar } from 'expo-status-bar';
import React, {useState} from 'react';
import Button from "./Button.js"
import LabelledSlider from "./LabelledSlider.js"
import Slider from './Slider.js'
import Overlay from "./Overlay.js"
import { Pressable, StyleSheet, Text, View } from 'react-native';

export default function App() {

  const [overlayVisible, setOverlayVisible] = useState(false)
  const [sliderValue, setSliderValue] = useState(0.5)
  function toggleOverlayVisible() {
    console.log("App: toggleOverlayVisible")
    setOverlayVisible(!overlayVisible)
  }

  function onPress() {
    console.log("Button pressed");
  }
  function onLongPress() {
    console.log("Long press");
  }

  function onPressIn() {
    console.log("Press in");
  }

  function onPressOut() {
    console.log("Press out");
    toggleOverlayVisible();
  }

  function onSlidingStart() {
    console.log("Sliding start")
  }

  function onSlidingComplete() {
    console.log("Sliding complete")
  }

  function onValueChange(val) {
    console.log("Slider value changed: " + val)
    setSliderValue(val);
  }

  function onShowOverlay() {
    console.log("Overlay shown")
  }

  const appButtonPressed = () => {
    console.log("App: Button pressed")
    toggleOverlayVisible();
  }

  return (
    <View style={styles.container}>
      <Overlay
        visible={overlayVisible}
        animationType="slide"
        onShow={onShowOverlay}
        onBackgroundPress={toggleOverlayVisible}
        backdropColor='rgba(0, 0, 0, 0.2)'
        overlayStyle={styles.overlayStyle}
        coverage={sliderValue}
      >
        <Button
          onPress={appButtonPressed}
          containerStyle={{ backgroundColor: "blue",  alignItems: "center", justifyContent: "center", padding: 10}}
          labelStyle={{textAlign: "center", backgroundColor: "green"}}
        >Here is the button label</Button>
        {/* <Pressable
          onPress={toggleOverlayVisible}
          style={styles.overlayContentStyle}
        >
 <Text>Here is the overlay Text</Text>
        </Pressable> */}
       
      </Overlay>
      <Text>Open up App.js to start working on your app!</Text>
      
      <Button 
        containerStyle={styles.buttonStyle} 
        labelStyle={styles.labelStyle} 
        onPressIn={onPressIn}
        onPressOut={onPressOut}
        onLongPress={onLongPress}
        onPress={onPress}>

          Button Label
      </Button>
      <LabelledSlider 
        // sliderStyle={styles.sliderStyle}
        label={"Slider value: "+sliderValue}
        labelStyle={{ flex: 1, textAlign: "left", color: "red" }}
        minimumValue={0.1}
        maximumValue={1.0}
        step={0.1}
        value={sliderValue}
        onSlidingStart={onSlidingStart}
        onSlidingComplete={onSlidingComplete}
        onValueChange={onValueChange}
      />
      <Text>{sliderValue}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee',
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonStyle: {
    width: 100,
    height: 50,
    backgroundColor: "rgba(255, 0, 0, 1)",
    justifyContent: "center",
    borderRadius: 12
  },
  labelStyle: {
    color: '#fff',
    textAlign: "center",
  },
  sliderStyle: {
    width: 200,
    height: 100,
  },
  overlayStyle: {
    flex: 1,
    // alignItems: "center",
    // justifyContent: "center",
    backgroundColor: "red",
  },
  overlayContentStyle: {
    backgroundColor: "#0f0"
  }
});