@fadyshawky/react-native-magic 1.0.0

package/template/src/navigation/HeaderComponents.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
+import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
+import {BottomTabHeaderProps} from '@react-navigation/bottom-tabs';
+import {ImageResources} from '../common/ImageResources.g';
+import {CommonSizes} from '../core/theme/commonSizes';
+import {NativeStackNavigationProp} from '@react-navigation/native-stack';
+import {RootStackParamList} from './types';
+
+export function Header({title}: {title: string}) {
+  return (
+    <View style={styles.headerBase}>
+      <Text style={CommonStyles.h2_regular}>{title}</Text>
+    </View>
+  );
+}
+
+export function HeaderBack({
+  title,
+  navigation,
+}: {
+  title: string;
+  navigation: NativeStackNavigationProp<RootStackParamList>;
+}) {
+  return (
+    <View style={styles.headerWithBack}>
+      <View style={styles.titleContainer}>
+        <Text style={CommonStyles.h2_regular}>{title}</Text>
+      </View>
+      <BackButton navigation={navigation} />
+    </View>
+  );
+}
+
+export function WebViewHeader({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<RootStackParamList>;
+}) {
+  return (
+    <View style={styles.webViewHeader}>
+      <BackButton navigation={navigation} />
+    </View>
+  );
+}
+
+function BackButton({
+  navigation,
+}: {
+  navigation: NativeStackNavigationProp<RootStackParamList>;
+}) {
+  return (
+    <TouchableOpacity
+      style={styles.backButton}
+      onPress={() => navigation.pop()}>
+      <Image style={styles.backIcon} source={0} />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  headerBase: {
+    width: '100%',
+    height: 80,
+    backgroundColor: 'transparent',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    marginBottom: 25,
+  },
+  headerWithBack: {
+    width: '100%',
+    height: 80,
+    backgroundColor: 'transparent',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    flexDirection: 'row',
+  },
+  webViewHeader: {
+    width: '100%',
+    height: 120,
+    backgroundColor: 'white',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    flexDirection: 'row',
+  },
+  titleContainer: {
+    width: screenWidth,
+    alignItems: 'center',
+    position: 'absolute',
+    zIndex: 0,
+  },
+  backButton: {
+    width: 60,
+    height: 40,
+    justifyContent: 'flex-end',
+  },
+  backIcon: {
+    width: 20,
+    height: 20,
+    resizeMode: 'contain',
+  },
+});

package/template/src/navigation/MainNavigation.tsx

@@ -0,0 +1,55 @@
+// In App.js in a new project
+
+import {NavigationContainer} from '@react-navigation/native';
+import * as React from 'react';
+import {useRef} from 'react';
+import {useAppSelector} from '../core/store/reduxHelpers';
+import {AuthStack} from './AuthStack';
+import {AppMainNavigator} from './MainStack';
+import {navigationRef} from './RootNavigation';
+
+function AppNavigator() {
+  const routeNameRef = useRef<string | undefined>(undefined);
+  const {accessToken} = useAppSelector(state => state.user);
+
+  return (
+    <NavigationContainer
+      ref={navigationRef}
+      theme={{
+        dark: false,
+        colors: {
+          primary: '#000',
+          background: 'transparent',
+          card: '#fff',
+          text: '#000',
+          border: '#000',
+          notification: '#ff0000',
+        },
+        fonts: {
+          regular: {
+            fontFamily: 'System',
+            fontWeight: 'normal',
+          },
+          medium: {
+            fontFamily: 'System',
+            fontWeight: '500',
+          },
+          bold: {
+            fontFamily: 'System',
+            fontWeight: '700',
+          },
+          heavy: {
+            fontFamily: 'System',
+            fontWeight: '900',
+          },
+        },
+      }}
+      onReady={() => {
+        routeNameRef.current = navigationRef.current?.getCurrentRoute()?.name;
+      }}>
+      {!accessToken ? <AuthStack /> : <AppMainNavigator />}
+    </NavigationContainer>
+  );
+}
+
+export default AppNavigator;

package/template/src/navigation/MainStack.tsx

@@ -0,0 +1,99 @@
+import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
+import {
+  createNativeStackNavigator,
+  NativeStackHeaderProps,
+  NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
+import React from 'react';
+import {ImageResources} from '../common/ImageResources.g';
+import {localization} from '../common/localization/localization';
+import {Main} from '../screens/main/Main';
+import {Profile} from '../screens/profile/Profile';
+import {Settings} from '../screens/Settings/Settings';
+import {Header, HeaderBack} from './HeaderComponents';
+import {TabBar} from './TabBar';
+import {RootStackParamList} from './types';
+
+const MainScreens = [
+  {
+    id: 'Main',
+    component: Main,
+    options: {
+      headerShown: false,
+    },
+  },
+  {
+    id: 'Profile',
+    component: Profile,
+    options: {
+      tabBarLabel: 'Profile',
+      header: () => {
+        return <Header title={localization.profile.studentProfile} />;
+      },
+    },
+  },
+];
+
+const AppStack = [
+  {
+    id: 'Home',
+    component: MainTabs,
+    options: {
+      headerShown: false,
+    },
+  },
+  {
+    id: 'Settings',
+    component: Settings,
+    options: {
+      header: (props: NativeStackHeaderProps) => {
+        return (
+          <HeaderBack
+            title={'Settings'}
+            navigation={
+              props.navigation as NativeStackNavigationProp<RootStackParamList>
+            }
+          />
+        );
+      },
+    },
+  },
+];
+
+const Stack = createNativeStackNavigator();
+
+const Tab = createBottomTabNavigator();
+
+function MainTabs() {
+  return (
+    <Tab.Navigator
+      initialRouteName="Main"
+      tabBar={props => <TabBar {...props} />}>
+      {MainScreens.map(s => (
+        <Tab.Screen
+          key={s.id}
+          name={s.id}
+          component={s.component}
+          options={s.options}
+        />
+      ))}
+    </Tab.Navigator>
+  );
+}
+
+export function AppMainNavigator() {
+  return (
+    <Stack.Navigator screenOptions={{animation: 'none'}}>
+      {AppStack.map(s => {
+        return (
+          <Stack.Screen
+            key={s.id}
+            name={s.id}
+            component={s.component}
+            options={s.options}
+          />
+        );
+      })}
+    </Stack.Navigator>
+  );
+}

package/template/src/navigation/RootNavigation.tsx

@@ -0,0 +1,33 @@
+import {createNavigationContainerRef} from '@react-navigation/native';
+import {CommonActions} from '@react-navigation/native';
+
+type RootStackParamList = {
+  Home: undefined;
+  // Add other screens here
+  Profile: {userId: string};
+  Settings: undefined;
+};
+
+export const navigationRef = createNavigationContainerRef<RootStackParamList>();
+
+export function navigate<T extends keyof RootStackParamList>(
+  name: never,
+  params?: RootStackParamList[T],
+) {
+  if (navigationRef.isReady()) {
+    // Type assertion is not needed since name and params are already properly typed
+    navigationRef.current?.navigate(name, params);
+  }
+}
+
+// Function to reset the navigation stack and navigate to the "Home" screen
+export const resetToHomeScreen = () => {
+  navigationRef.dispatch(
+    CommonActions.reset({
+      index: 0,
+      routes: [{name: 'Home'}],
+    }),
+  );
+};
+
+// Call the function to reset the navigation stack and navigate to the "Home" screen

package/template/src/navigation/TabBar.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import {View, Text, TouchableOpacity, Image, StyleSheet} from 'react-native';
+import {CommonStyles} from '../core/theme/commonStyles';
+import {Colors} from '../core/theme/colors';
+import {
+  BottomTabBarProps,
+  BottomTabNavigationOptions,
+} from '@react-navigation/bottom-tabs';
+import {ImageSourcePropType} from 'react-native';
+import {toString} from 'lodash';
+
+interface TabBarOptions extends BottomTabNavigationOptions {
+  selectedIcon: ImageSourcePropType;
+  icon: ImageSourcePropType;
+  tabBarTestID?: string;
+}
+
+export function TabBar({state, descriptors, navigation}: BottomTabBarProps) {
+  return (
+    <View style={styles.container}>
+      {state.routes.map((route, index) => {
+        const {options} = descriptors[route.key] as unknown as {
+          options: TabBarOptions;
+        };
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+            ? options.title
+            : route.name;
+
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        return (
+          <TouchableOpacity
+            key={route.key}
+            accessibilityRole="button"
+            accessibilityState={isFocused ? {selected: true} : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={styles.tabButton}>
+            <Image source={isFocused ? options.selectedIcon : options.icon} />
+            <Text style={[styles.label, isFocused && styles.labelFocused]}>
+              {toString(label)}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 100,
+    borderTopLeftRadius: 50,
+    borderTopRightRadius: 50,
+    justifyContent: 'space-evenly',
+    ...CommonStyles.shadow,
+  },
+  tabButton: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  label: {
+    color: Colors.gray,
+  },
+  labelFocused: {
+    color: Colors.primary100,
+  },
+});

package/template/src/navigation/TopTabBar.tsx

@@ -0,0 +1,75 @@
+import {Animated, View, TouchableOpacity} from 'react-native';
+import {Colors} from '../core/theme/colors';
+import {CommonStyles, screenWidth} from '../core/theme/commonStyles';
+
+export function TopBar({state, descriptors, navigation, position}: any) {
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        backgroundColor: Colors.gray,
+        width: screenWidth - 60,
+        alignSelf: 'center',
+        height: 40,
+        borderRadius: 20,
+        marginBottom: 24,
+      }}>
+      {state.routes.map((route, index) => {
+        const {options} = descriptors[route.key];
+        const label =
+          options.tabBarLabel !== undefined
+            ? options.tabBarLabel
+            : options.title !== undefined
+            ? options.title
+            : route.name;
+
+        const isFocused = state.index === index;
+
+        const onPress = () => {
+          const event = navigation.emit({
+            type: 'tabPress',
+            target: route.key,
+            canPreventDefault: true,
+          });
+
+          if (!isFocused && !event.defaultPrevented) {
+            navigation.navigate(route.name, route.params);
+          }
+        };
+
+        const onLongPress = () => {
+          navigation.emit({
+            type: 'tabLongPress',
+            target: route.key,
+          });
+        };
+
+        return (
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityState={isFocused ? {selected: true} : {}}
+            accessibilityLabel={options.tabBarAccessibilityLabel}
+            testID={options.tabBarTestID}
+            onPress={onPress}
+            onLongPress={onLongPress}
+            style={{
+              flex: 1,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: isFocused ? Colors.white : Colors.gray,
+              borderRadius: 20,
+            }}>
+            <Animated.Text
+              style={
+                isFocused
+                  ? {...CommonStyles.h4_bold, fontWeight: 'bold'}
+                  : CommonStyles.h4_regular
+              }>
+              {label}
+            </Animated.Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+}

package/template/src/navigation/types.ts

@@ -0,0 +1,5 @@
+export type RootStackParamList = {
+  Home: undefined;
+  Details: {id: string};
+  // ... add other screens as needed
+};

package/template/src/screens/Login/Login.tsx

@@ -0,0 +1,114 @@
+import {useNavigation} from '@react-navigation/native';
+import {toLower} from 'lodash';
+import React, {useRef, useState} from 'react';
+import {
+  NativeSyntheticEvent,
+  StyleSheet,
+  Text,
+  TextInputFocusEventData,
+  findNodeHandle,
+} from 'react-native';
+import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
+import {ButtonType} from '../../../types';
+import {PrimaryButton} from '../../common/components/PrimaryButton';
+import {PrimaryTextInput} from '../../common/components/PrimaryTextInput';
+import {localization} from '../../common/localization/localization';
+import {useAppDispatch} from '../../core/store/reduxHelpers';
+import {userLogin} from '../../core/store/user/userActions';
+import {Colors} from '../../core/theme/colors';
+import {CommonSizes} from '../../core/theme/commonSizes';
+import {CommonStyles} from '../../core/theme/commonStyles';
+
+export function Login(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  async function loginUser() {
+    setLoading(true);
+    await dispatch(
+      userLogin({
+        email: toLower(email),
+        password,
+      }),
+    );
+
+    setLoading(false);
+  }
+  const scroll = useRef<KeyboardAwareScrollView>(null);
+  function scrollToInput(reactNode: any) {
+    // Add a 'scroll' ref to your ScrollView
+
+    // setTimeout(() => {
+    scroll.current?.scrollToFocusedInput(reactNode);
+    // }, 500);
+  }
+  return (
+    <KeyboardAwareScrollView
+      ref={scroll}
+      resetScrollToCoords={{x: 0, y: 0}}
+      scrollEnabled={true}
+      enableOnAndroid={true}
+      testID={'MainPageID'}
+      contentContainerStyle={styles.contentContainer}
+      contentInsetAdjustmentBehavior={'automatic'}
+      style={styles.container}>
+      <Text style={CommonStyles.h1_semiBold}>{localization.login.Login}</Text>
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        autoCapitalize="none"
+        value={email}
+        onChangeText={setEmail}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.Email}
+        placeholder={localization.login.EnterEmail}
+      />
+      <PrimaryTextInput
+        onFocus={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+          scrollToInput(findNodeHandle(event.target));
+        }}
+        clearButtonMode="never"
+        value={password}
+        secureTextEntry
+        onChangeText={setPassword}
+        containerStyle={CommonStyles.textInputContainer}
+        label={localization.login.Password}
+        placeholder={localization.login.EnterPassword}
+      />
+      <PrimaryButton
+        label={localization.login.forgetPassword}
+        type={ButtonType.borderless}
+        style={{alignSelf: 'flex-end'}}
+      />
+      <PrimaryButton
+        isLoading={loading}
+        onPress={loginUser}
+        label={localization.login.continue}
+        type={ButtonType.solid}
+      />
+    </KeyboardAwareScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  imageContainer: {
+    ...CommonStyles.flex1,
+    justifyContent: 'flex-end',
+  },
+  container: {
+    flexGrow: 1,
+    backgroundColor: Colors.white,
+    borderTopRightRadius: CommonSizes.spacing.large,
+    borderTopLeftRadius: CommonSizes.spacing.large,
+  },
+  contentContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: CommonSizes.spacing.large,
+    paddingVertical: 26,
+    gap: 16,
+  },
+});

package/template/src/screens/Settings/Settings.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function Settings(): JSX.Element {
+  return <></>;
+}

package/template/src/screens/main/Main.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function Main(): JSX.Element {
+  return <></>;
+}

package/template/src/screens/profile/Profile.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function Profile(): JSX.Element {
+  return <></>;
+}

package/template/src/screens/splash/Splash.tsx

@@ -0,0 +1,19 @@
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect} from 'react';
+import {LoadingComponent} from '../../common/components/LoadingComponent';
+import {useAppSelector} from '../../core/store/reduxHelpers';
+
+export function Splash(): JSX.Element {
+  const isUserLoggedIn = useAppSelector(state => state.user.accessToken);
+  const navigation = useNavigation();
+
+  useEffect(() => {
+    if (isUserLoggedIn) {
+      navigation.navigate('Main' as never);
+    } else {
+      navigation.navigate('Login' as never);
+    }
+  }, [isUserLoggedIn]);
+
+  return <LoadingComponent />;
+}

package/template/src/sheetManager/sheets.tsx

@@ -0,0 +1,14 @@
+// We extend some of the types here to give us great intellisense
+
+import {registerSheet, SheetDefinition} from 'react-native-actions-sheet';
+
+type Sheet = SheetDefinition;
+
+// across the app for all registered sheets.
+declare module 'react-native-actions-sheet' {
+  interface Sheets {
+    'first-sheet': Sheet;
+  }
+}
+
+export {};

package/template/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@react-native/typescript-config/tsconfig.json"
+}