commont sytle added

styles/commonStyles.js

@@ -0,0 +1,129 @@
+import { StyleSheet } from "react-native"
+import { FONTS, COLORS, SIZES } from "../constants"
+
+export const commonStyles = StyleSheet.create({
+    header: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        paddingBottom: 4
+    },
+    footer: {
+        flex: 3,
+        backgroundColor: '#fff',
+        borderTopLeftRadius: 30,
+        borderTopRightRadius: 30,
+        paddingHorizontal: 22,
+        paddingVertical: 30
+    },
+    headerTitle: {
+        ...FONTS.h2,
+        color: COLORS.white
+    },
+    subHeaderTitle: {
+        ...FONTS.body4,
+        color: COLORS.white,
+        marginVertical: SIZES.padding,
+        textAlign: 'center'
+    },
+    subHeaderTitleBold: {
+        fontSize: 14,
+        fontFamily: 'bold',
+        color: COLORS.white,
+        textAlign: 'center'
+    },
+    inputHeader: {
+        ...FONTS.body4,
+        marginVertical: 4,
+        fontFamily: "semiBold",
+    },
+    checkBoxContainer: {
+        flexDirection: "row",
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginVertical: 18
+    },
+    checkbox: {
+        marginRight: 8,
+        height: 16,
+        width: 16,
+    },
+    btn: {
+        width: SIZES.width - 44,
+        marginBottom: SIZES.padding,
+    },
+    btn1: {
+        width: SIZES.width - 44,
+        marginVertical: SIZES.padding,
+    },
+    center: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginVertical: 8
+    },
+    socialContainer: {
+        flexDirection: "row",
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginVertical: SIZES.padding2
+    },
+    socialLogo: {
+        height: 62,
+        width: 62
+    },
+    socialIconContainer: {
+        marginHorizontal: SIZES.padding
+    },
+    backIcon: {
+        position: "absolute",
+        top: 10,
+        left: 20,
+        height: 30,
+        width: 30,
+        borderRadius: 15,
+        backgroundColor: COLORS.white,
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+    OTPStyle: {
+        backgroundColor: COLORS.gray,
+        borderColor: COLORS.black,
+        borderWidth: 1,
+        borderRadius: 10,
+        height: 58,
+        width: 58,
+        borderBottomWidth: 1,
+    },
+    header1Icon: {
+        height: 45,
+        width: 45,
+        borderRadius: 22.5,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: COLORS.gray
+    },
+    header2Icon: {
+        height: 45,
+        width: 45,
+        borderRadius: 22.5,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: COLORS.white
+    },
+    header3Icon: {
+        height: 45,
+        width: 45,
+        borderRadius: 22.5,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255,255,255,0.6)',
+    },
+    header1: {
+        flexDirection: 'row',
+        justifyContent: "space-between",
+        alignItems: 'center',
+        marginTop: 20,
+    }
+})

styles/onBoadingStyles.js

@@ -0,0 +1,72 @@
+import { StyleSheet } from 'react-native';
+import { COLORS, FONTS, SIZES } from '../constants';
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    contentContainer: {
+        flex: 1,
+        alignItems: 'center'
+    },
+    illustration: {
+        height: SIZES.width * 0.96,
+        width: SIZES.width * 0.96,
+        position: "absolute",
+        bottom: 360
+    },
+    ornament: {
+        position: "absolute",
+        bottom: 372,
+        zIndex: -99,
+        width: SIZES.width * 0.7
+    },
+    titleContainer: {
+        marginVertical: 18,
+        alignItems: 'center',
+    },
+    title: {
+        ...FONTS.h3,
+        color: COLORS.black,
+        textAlign: "center",
+    },
+    subTitle: {
+        ...FONTS.h3,
+        color: COLORS.primary,
+        textAlign: "center",
+        marginTop: 8,
+    },
+    description: {
+        ...FONTS.body3,
+        color: COLORS.black,
+        textAlign: 'center',
+        marginBottom: 16
+    },
+    dotsContainer: {
+        marginBottom: 20,
+        marginTop: 8,
+    },
+    buttonContainer: {
+        position: 'absolute',
+        bottom: 0,
+        padding: 22,
+        borderTopLeftRadius: SIZES.radius,
+        borderTopRightRadius: SIZES.radius,
+        height: 360,
+    },
+    nextButton: {
+        width: SIZES.width - 44,
+        marginBottom: SIZES.padding,
+        backgroundColor: COLORS.primary,
+        borderColor: COLORS.primary,
+        marginTop: 22
+    },
+    skipButton: {
+        width: SIZES.width - 44,
+        marginBottom: SIZES.padding,
+        backgroundColor: 'transparent',
+        borderColor: COLORS.primary
+    },
+});
+
+export default styles;