Introduce Dynamic constants, Theming option

android/app/build.gradle

@@ -152,6 +152,7 @@ dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
     implementation("androidx.swiperefreshlayout:swiperefreshlayout:1.0.0")
+    implementation 'com.facebook.android:facebook-android-sdk:11.1.0'
 
     // Import the BoM for the Firebase platform
     implementation platform('com.google.firebase:firebase-bom:31.2.3')

android/app/src/main/AndroidManifest.xml

@@ -1,10 +1,12 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <!-- <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> -->
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="com.google.android.gms.permission.AD_ID" tools:node="remove"/>
+
 
 
     <application
@@ -26,10 +28,25 @@
             <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
       </activity>
+      <activity android:name="com.facebook.FacebookActivity"
+          android:configChanges=
+                  "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
+          android:label="@string/app_name" />
+      <activity
+          android:name="com.facebook.CustomTabActivity"
+          android:exported="true">
+          <intent-filter>
+              <action android:name="android.intent.action.VIEW" />
+              <category android:name="android.intent.category.DEFAULT" />
+              <category android:name="android.intent.category.BROWSABLE" />
+              <data android:scheme="@string/fb_login_protocol_scheme" />
+          </intent-filter>
+      </activity>
       <meta-data
         android:name="com.google.android.geo.API_KEY"
         android:value="AIzaSyDmwJddIPTcALyZtj7p9mFFlkMvpMkati8"/>
       <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
+   	  <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
     </application>
 
 </manifest>

android/app/src/main/res/values/strings.xml

@@ -1,4 +1,6 @@
 <resources>
     <string name="app_name">Go_social</string>
-    <string name="facebook_app_id">2349388348405699</string>
+    <string name="facebook_app_id">222891166977339</string>
+    <string name="fb_login_protocol_scheme">fb1234</string>
+    <string name="facebook_client_token">PLACE_YOUR_CLIENT_TOKEN_HERE</string>
 </resources>

app/components/HomePostComponent/HomePostComponent.js

@@ -25,7 +25,7 @@ export default class HomePostComponent extends Component {
         <View style={style.cardTitleBar}>
           <View style={style.userAvatarArea}>
             <Image
-              source={require("../../images/user_image_1.jpg")}
+              source={require("../../assets/images/user_image_1.jpg")}
               style={style.userAvatarImage}
             />
           </View>
@@ -44,7 +44,7 @@ export default class HomePostComponent extends Component {
             has been the industry's standard dummy text ever since the 1500s
           </Text>
           <View style={style.postImageArea}>
-            <Image source={require("../../images/post_01.jpg")} style={style.postImage} />
+            <Image source={require("../../assets/images/post_01.jpg")} style={style.postImage} />
           </View>
           <View
             style={{

app/constants/index.js

@@ -0,0 +1,3 @@
+import { COLORS, SIZES, FONTS, SCALE } from "./theme";
+
+export { COLORS, SIZES, FONTS, SCALE };

app/constants/theme.js

@@ -0,0 +1,102 @@
+import { Dimensions } from "react-native";
+
+const { width, height } = Dimensions.get("window");
+
+//Guideline sizes are based on standard ~5" screen mobile device
+const guidelineBaseWidth = 428;
+const guidelineBaseHeight = 926;
+
+export const SCALE = size => (width / guidelineBaseWidth) * size;
+
+export const COLORS = {
+  primary: "#3d9bf9",
+  secondary: "#1dd1a1",
+  black: "#000000",
+  white: "#ffffff",
+  white2: "rgba(255,255,255,0.2)",
+  gray: "#E8E8E8",
+};
+
+export const SIZES = {
+  // app dimensions
+  width,
+  height,
+
+  // radius
+  r4: SCALE(4),
+  r10: SCALE(10),
+  r20: SCALE(20),
+
+  // regular width and height
+  s400: SCALE(400),
+  s372: SCALE(372),
+  s200: SCALE(200),
+  s120: SCALE(120),
+  s100: SCALE(100),
+  s90: SCALE(90),
+  s80: SCALE(80),
+  s70: SCALE(70),
+  s60: SCALE(60),
+  s50: SCALE(50),
+  s40: SCALE(40),
+  s32: SCALE(32),
+  s24: SCALE(24),
+  s18: SCALE(18),
+
+  // paddings and margins
+  m4: SCALE(4),
+  m6: SCALE(6),
+  m10: SCALE(10),
+  m14: SCALE(14),
+  m16: SCALE(16),
+  m18: SCALE(18),
+  m20: SCALE(20),
+  m24: SCALE(24),
+  m30: SCALE(30),
+  m40: SCALE(40),
+
+  // font sizes
+  f6: SCALE(6),
+  f8: SCALE(8),
+  f10: SCALE(10),
+  f12: SCALE(12),
+  f14: SCALE(14),
+  f16: SCALE(16),
+  f18: SCALE(18),
+  f20: SCALE(20),
+  f24: SCALE(24),
+  f28: SCALE(28),
+  f32: SCALE(32),
+  f36: SCALE(36),
+  f40: SCALE(40),
+};
+
+export const FONTS = {
+  //Bold
+  bold20: { fontFamily: "OpenSans-Bold", fontSize: SIZES.f20 },
+
+  // SemiBold
+  semibold14: { fontFamily: "OpenSans-SemiBold", fontSize: SIZES.f14 },
+  semibold16: { fontFamily: "OpenSans-SemiBold", fontSize: SIZES.f16 },
+  semibold18: { fontFamily: "OpenSans-SemiBold", fontSize: SIZES.f18 },
+  semibold20: { fontFamily: "OpenSans-SemiBold", fontSize: SIZES.f20 },
+  semibold24: { fontFamily: "OpenSans-SemiBold", fontSize: SIZES.f24 },
+  semibold32: { fontFamily: "OpenSans-SemiBold", fontSize: SIZES.f32 },
+
+  // Medium
+  medium10: { fontFamily: "OpenSans-Medium", fontSize: SIZES.f10 },
+  medium12: { fontFamily: "OpenSans-Medium", fontSize: SIZES.f12 },
+  medium14: { fontFamily: "OpenSans-Medium", fontSize: SIZES.f14 },
+  medium16: { fontFamily: "OpenSans-Medium", fontSize: SIZES.f16 },
+  medium18: { fontFamily: "OpenSans-Medium", fontSize: SIZES.f18 },
+  medium20: { fontFamily: "OpenSans-Medium", fontSize: SIZES.f20 },
+
+  // Regular
+  regular8: { fontFamily: "OpenSans-Regular", fontSize: SIZES.f8 },
+  regular10: { fontFamily: "OpenSans-Regular", fontSize: SIZES.f10 },
+  regular12: { fontFamily: "OpenSans-Regular", fontSize: SIZES.f12 },
+  regular14: { fontFamily: "OpenSans-Regular", fontSize: SIZES.f14 },
+  regular16: { fontFamily: "OpenSans-Regular", fontSize: SIZES.f16 },
+};
+
+export default { COLORS, SIZES, FONTS, SCALE };

app/screens/ChatListScreen/chatListScreen.js

@@ -211,37 +211,37 @@ export default class ChatListScreen extends Component {
               <SuggestCardView
                 onPress={this.viewChat}
                 name={"Cherryl"}
-                userImage={require("../../images/user_image_1.jpg")}
+                userImage={require("../../assets/images/user_image_1.jpg")}
               />
               <SuggestCardView
                 onPress={this.viewChat}
                 name={"Cherryl"}
-                userImage={require("../../images/user_image_1.jpg")}
+                userImage={require("../../assets/images/user_image_1.jpg")}
               />
               <SuggestCardView
                 onPress={this.viewChat}
                 name={"Cherryl"}
-                userImage={require("../../images/user_image_1.jpg")}
+                userImage={require("../../assets/images/user_image_1.jpg")}
               />
               <SuggestCardView
                 onPress={this.viewChat}
                 name={"Cherryl"}
-                userImage={require("../../images/user_image_1.jpg")}
+                userImage={require("../../assets/images/user_image_1.jpg")}
               />
               <SuggestCardView
                 onPress={this.viewChat}
                 name={"Cherryl"}
-                userImage={require("../../images/user_image_1.jpg")}
+                userImage={require("../../assets/images/user_image_1.jpg")}
               />
               <SuggestCardView
                 onPress={this.viewChat}
                 name={"Cherryl"}
-                userImage={require("../../images/user_image_1.jpg")}
+                userImage={require("../../assets/images/user_image_1.jpg")}
               />
               <SuggestCardView
                 onPress={this.viewChat}
                 name={"Cherryl"}
-                userImage={require("../../images/user_image_1.jpg")}
+                userImage={require("../../assets/images/user_image_1.jpg")}
               />
             </ScrollView>
           </View>
@@ -254,39 +254,39 @@ export default class ChatListScreen extends Component {
               name="Toney Herford"
               posted="2 days ago"
               onPress={this.viewChat}
-              userImage={require("../../images/user_image_1.jpg")}
+              userImage={require("../../assets/images/user_image_1.jpg")}
               message="Hello Jhon, I would like to invite you to participate ..."
               count="5"
             />
             <ConversationBanner
               name="Toney Herford"
               posted="2 days ago"
               onPress={this.viewChat}
-              userImage={require("../../images/user_image_1.jpg")}
+              userImage={require("../../assets/images/user_image_1.jpg")}
               message="Hello Jhon, I would like to invite you to participate ..."
               count="2"
             />
             <ConversationBanner
               name="Toney Herford"
               posted="2 days ago"
               onPress={this.viewChat}
-              userImage={require("../../images/user_image_1.jpg")}
+              userImage={require("../../assets/images/user_image_1.jpg")}
               message="Hello Jhon, I would like to invite you to participate ..."
               count="3"
             />
             <ConversationBanner
               name="Toney Herford"
               posted="2 days ago"
               onPress={this.viewChat}
-              userImage={require("../../images/user_image_1.jpg")}
+              userImage={require("../../assets/images/user_image_1.jpg")}
               message="Hello Jhon, I would like to invite you to participate ..."
               count="7"
             />
             <ConversationBanner
               name="Toney Herford"
               posted="2 days ago"
               onPress={this.viewChat}
-              userImage={require("../../images/user_image_1.jpg")}
+              userImage={require("../../assets/images/user_image_1.jpg")}
               message="Hello Jhon, I would like to invite you to participate ..."
               count="2"
             />

app/screens/ForgotPasswordScreen/forgotPasswordScreen.js

@@ -33,7 +33,7 @@ export default class ForgotPasswordScreen extends Component {
           <View style={styles.container}>
             <KeyboardAvoidingView behavior="position">
               <View style={styles.logoContainer}>
-                <Image source={require("../../images/logo.png")} style={styles.logo} />
+                <Image source={require("../../assets/images/logo.png")} style={styles.logo} />
               </View>
               <View style={styles.formContainer}>
                 <TextInput

app/screens/ForumScreen/forumScreen.js

@@ -8,7 +8,7 @@ export default class ForumScreen extends Component {
   render() {
     return (
       <View>
-        <HeaderBar image={require("../../images/Ask-SCORE-Logo.png")} title={"Home"} />
+        <HeaderBar image={require("../../assets/images/Ask-SCORE-Logo.png")} title={"Home"} />
 
         <ScrollView
           style={styles.scrollView}

app/screens/HomeScreen/homeScreen.js

@@ -12,7 +12,7 @@ export default class HomeScreen extends Component {
           style={styles.postButton}
           onPress={() => this.props.navigation.navigate("NewPost")}>
           <View style={styles.row}>
-            <Image style={styles.profileImage} source={require("../../images/user_image_1.jpg")} />
+            <Image style={styles.profileImage} source={require("../../assets/images/user_image_1.jpg")} />
             <Text style={styles.text}> Whats on Your Mind?</Text>
           </View>
         </TouchableOpacity>