module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: ["react-native-reanimated/plugin"],
};

import "react-native-gesture-handler";
import React from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { enableScreens } from "react-native-screens";
import MainScreen from "./screens/MainScreen";

enableScreens();

const Stack = createStackNavigator();

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Main" component={MainScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </GestureHandlerRootView>
  );
}

import React from "react";
import { View } from "react-native";
import { BeforeAfterSlider } from "react-native-before-after-slider";

const beforeImage = require("./path-to-before-image.jpg");
const afterImage = require("./path-to-after-image.jpg");
const delimiterIcon = require("./path-to-icon.png");

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <BeforeAfterSlider
        beforeImage={beforeImage}
        afterImage={afterImage}
        handleWidth={30}
        handleColor="blue"
        delimiterIcon={delimiterIcon}
        delimiterIconStyles={{ width: 30, height: 30, tintColor: "red" }} // Customize the styles here
      />
    </View>
  );
};

export default App;