import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, Button, View, Appearance, useColorScheme } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import Animated, { useSharedValue, withTiming, useAnimatedStyle, Easing, } from 'react-native-reanimated';

export default function App() {
  const randomWidth = useSharedValue(10);

  const config = {
    duration: 500,
    easing: Easing.bezier(0.5, 0.01, 0, 1),
  };

  const style = useAnimatedStyle(() => {
    return {
      width: withTiming(randomWidth.value, config),
    };
  });

  const colorScheme = useColorScheme();

  

  return (
    <SafeAreaProvider>
      <View style={styles.container}>
        <Animated.View style={[styles.box, style]} />
        <Button
          title="Press this to have rectangle change width"
          onPress={() => {
            randomWidth.value = Math.random() * 350;
          }}
        />
        <Text style={[styles.text, themeTextStyle]}>Hello World, it is Caroline Belt!</Text>
        <StatusBar style="auto" />
      </View>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  lightContainer: {
    // white
    backgroundColor: '#FFFFFF',
  },
  darkContainer: {
    // black
    backgroundColor: '#000000',
  },
  lightThemeText: {
    // white
    color: '#000000',
  },
  darkThemeText: {
    // black
    color: '#FFFFFF',
  },
  box: {
    width: 100,
    height: 80,
    backgroundColor: '#528AF6',
    margin: 30,
  },
});