nklmantey / convene Goto Github PK

Consolidate repetitive configuration options into a single object to avoid redundancy.
Extract common components and styles to improve reusability and maintainability.
Utilize TypeScript features like type definitions for better type safety and code clarity.
Consider optimizing navigation performance by lazy loading screens if needed, especially for screens with heavy dependencies.

Here is an updated code based on the above recommendations:

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { TransitionPresets } from '@react-navigation/stack';
import { TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';
import LoginScreen from '../screens/auth/LoginScreen';
import SignupScreen from '../screens/auth/SignupScreen';
import ForgotPasswordScreen from '../screens/auth/ForgotPasswordScreen';

const Stack = createStackNavigator();

const headerStyles = StyleSheet.create({
headerStyle: {
borderBottomColor: '#eee',
borderBottomWidth: 1,
},
headerTitleStyle: {
fontFamily: 'InterSoftBold',
fontSize: 24,
color: '#000',
},
});

const commonScreenOptions = {
headerShown: true,
headerStyle: headerStyles.headerStyle,
headerTitleStyle: headerStyles.headerTitleStyle,
...TransitionPresets.SlideFromRightIOS,
};

const renderBackButton = () => {
const { goBack } = useNavigation();
return (



);
};

const AuthNavigation = () => {
return (
<Stack.Navigator screenOptions={commonScreenOptions}>
<Stack.Screen name="login" component={LoginScreen} />
<Stack.Screen
name="signup"
component={SignupScreen}
options={{
title: 'Create Account',
headerLeft: renderBackButton,
...TransitionPresets.ModalPresentationIOS,
}}
/>
<Stack.Screen
name="forgot-password"
component={ForgotPasswordScreen}
options={{
title: 'Forgot Password?',
headerLeft: renderBackButton,
}}
/>
</Stack.Navigator>
);
};

const styles = StyleSheet.create({
backButtonContainer: {
marginLeft: 16,
width: 30,
height: 30,
borderRadius: 8,
backgroundColor: '#eee',
alignItems: 'center',
justifyContent: 'center',
},
});

export default AuthNavigation;