feat: add screen container component

App.tsx

@@ -1,21 +1,14 @@
-import { StatusBar } from 'expo-status-bar';
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Text } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+// components
+import { ScreenContainer } from '@core/ui/containers'
 
 export default function App() {
   return (
-    <View style={styles.container}>
-      <Text>Welcome!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <SafeAreaProvider>
+      <ScreenContainer>
+        <Text>Welcome!</Text>
+      </ScreenContainer>
+    </SafeAreaProvider>
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-});

__tests__ /App.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import 'jest-styled-components'
 import { render } from '@testing-library/react-native';
 import App from '../App';
 

__tests__ /core/ui/containers/ScreenContainer.test.tsx

@@ -0,0 +1,38 @@
+import 'jest-styled-components'
+import { Text } from 'react-native'
+import { render } from '@testing-library/react-native';
+import { ScreenContainer } from '@core/ui/containers';
+
+describe('ScreenContainer', () => {
+    it('renders correctly without scrollable', () => {
+        const { getByText } = render(
+            <ScreenContainer scrollable={false}>
+                <Text>Test Content</Text>
+            </ScreenContainer>
+        );
+
+        expect(getByText('Test Content')).toBeTruthy();
+    });
+
+    it('renders correctly with scrollable', () => {
+        const { getByText } = render(
+            <ScreenContainer scrollable={true}>
+                <Text>Test Content</Text>
+            </ScreenContainer>
+        );
+
+        expect(getByText('Test Content')).toBeTruthy();
+    });
+
+    it('applies custom styles correctly', () => {
+        const customStyle = { backgroundColor: 'red' };
+        const { getByTestId } = render(
+            <ScreenContainer style={customStyle}>
+                <Text>Test Content</Text>
+            </ScreenContainer>
+        );
+
+        const container = getByTestId('screen-container');
+        expect(container.props.style).toContainEqual(customStyle);
+    });
+});

babel.config.js

@@ -16,9 +16,7 @@ module.exports = {
             "./"
           ],
           "alias": {
-            "@tests": "tests/*",
-            "@components/*": "src/components/*",
-            "@utils/*": "src/utils/*"
+            "@core/*": "src/core/*",
           }
         }]
     ]