clipboard & pressable

.eslintrc.js

@@ -1,38 +1,21 @@
 module.exports = {
-	'env': {
-		'browser': true,
-		'es2021': true
-	},
-	'extends': [
-		'eslint:recommended',
-		'plugin:react/recommended'
-	],
-	'parserOptions': {
-		'ecmaFeatures': {
-			'jsx': true
-		},
-		'ecmaVersion': 12,
-		'sourceType': 'module'
-	},
-	'plugins': [
-		'react'
-	],
-	'rules': {
-		'indent': [
-			'error',
-			'tab'
-		],
-		'linebreak-style': [
-			'error',
-			'unix'
-		],
-		'quotes': [
-			'error',
-			'single'
-		],
-		'semi': [
-			'error',
-			'always'
-		]
-	}
+    env: {
+        browser: true,
+        es2021: true,
+    },
+    extends: ['eslint:recommended', 'plugin:react/recommended'],
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+        ecmaVersion: 12,
+        sourceType: 'module',
+    },
+    plugins: ['react'],
+    rules: {
+        indent: ['error', 'tab'],
+        'linebreak-style': ['error', 'unix'],
+        quotes: ['error', 'single'],
+        semi: ['error', 'always'],
+    },
 };

README.md

@@ -4,8 +4,8 @@
 
 ## Libraries Used
 
-- [@react-native-community/clipboard](https://www.npmjs.com/package/@react-native-community/clipboard)
+-   [@react-native-community/clipboard](https://www.npmjs.com/package/@react-native-community/clipboard)
 
 # Support Me
 
-If you found this template helpful and saved your valuable time, consider [buying me a coffee](https://www.buymeacoffee.com/nish1896)  
+If you found this project helpful, consider [buying me a coffee](https://www.buymeacoffee.com/nish1896)

app/assets/i18n/en/common.json

@@ -25,7 +25,7 @@
         "connection": "Please Check your Internet Connection",
         "enterPhone": "Enter Phone Number(With Country Code)",
         "enterOTP": "Enter OTP",
-        "getOTP":"Get OTP",
+        "getOTP": "Get OTP",
         "submitOTP": "Submit",
         "ssoGoogle": "Sign in with Google",
         "ssoFacebook": "Sign in with Facebook",

app/assets/i18n/fr/common.json

@@ -25,7 +25,7 @@
         "connection": "S'il vous plait, vérifiez votre connexion internet",
         "enterPhone": "Entrez téléphone (Avec code de pays)",
         "enterOTP": "Entrez OTP",
-        "getOTP":"Obtenez OTP",
+        "getOTP": "Obtenez OTP",
         "submitOTP": "Soumettre",
         "ssoGoogle": "Connectez Google",
         "ssoFacebook": "Connectez Facebook",
@@ -39,4 +39,4 @@
     "USER": {
         "hiuser": "Salut {{userName}}"
     }
-}
+}

app/assets/i18n/hi/common.json

@@ -25,7 +25,7 @@
         "connection": "कृपया अपने इंटरनेट कनेक्शन की जाँच करें",
         "enterPhone": "फोन नंबर दर्ज करें (कोड के साथ)",
         "enterOTP": "OTP दर्ज करें",
-        "getOTP":"OTP प्राप्त करें",
+        "getOTP": "OTP प्राप्त करें",
         "submitOTP": "प्रस्तुत",
         "ssoGoogle": "Google से साइन इन करें",
         "ssoFacebook": "Facebook से साइन इन करें",

app/assets/themes/Dark.js

@@ -1,12 +1,12 @@
 export default Dark = {
     dark: true,
     colors: {
-        primary: '#ff5071', /* pinkish-red */
-        background: '#25293e', /* darkbluish black */
-        card: '#008c8c', /* maars-green */
-        text: '#f7f6f3', /* soft-white */
-        border: '#959fa8', /* light-gray */
-        notification: '#8a79af', /* black-currant */ 
-        heading: '#fdd261', /* mango */
+        primary: '#ff5071' /* pinkish-red */,
+        background: '#25293e' /* darkbluish black */,
+        card: '#008c8c' /* maars-green */,
+        text: '#f7f6f3' /* soft-white */,
+        border: '#959fa8' /* light-gray */,
+        notification: '#8a79af' /* black-currant */,
+        heading: '#fdd261' /* mango */,
     },
 };

app/assets/themes/Light.js

@@ -1,12 +1,12 @@
 export default Light = {
     dark: false,
     colors: {
-        primary: '#008cd1', /* sky-blue */
-        background: '#f7f6f3', /* soft-white */
-        card: '#6d9773', /* soft-green */
-        text: '#25293e',  /* soft black */
-        border: '#76777c', /* gray */
-        notification: '#8a79af', /* black-currant */ 
-        heading: '#04437d', /* dark-blue */
+        primary: '#008cd1' /* sky-blue */,
+        background: '#f7f6f3' /* soft-white */,
+        card: '#6d9773' /* soft-green */,
+        text: '#25293e' /* soft black */,
+        border: '#76777c' /* gray */,
+        notification: '#8a79af' /* black-currant */,
+        heading: '#04437d' /* dark-blue */,
     },
 };

app/navigation/DrawerLayout.js

@@ -57,7 +57,9 @@ const DrawerLayout = () => {
                             size={CommonStyles.icons.drawerIcon}
                         />
                     )}
-                    label={() => <ThemedHeading>{t('DRAWER.settings')}</ThemedHeading>}
+                    label={() => (
+                        <ThemedHeading>{t('DRAWER.settings')}</ThemedHeading>
+                    )}
                     onPress={() => {
                         navigation.navigate('Settings');
                     }}

app/navigation/DrawerNav.js

@@ -17,8 +17,7 @@ const NavDrawer = () => {
             initialRouteName="Home"
             overlayColor="transparent"
             screenOptions={{ headerShown: false }}
-            drawerContent={() => <DrawerLayout />}
-        >
+            drawerContent={() => <DrawerLayout />}>
             <Drawer.Screen name="Home" component={Home} />
             <Drawer.Screen name="TabsNav" component={TabsNav} />
             <Drawer.Screen name="Settings" component={Settings} />

app/navigation/TabsNav.js

@@ -32,8 +32,7 @@ const TabsNav = () => {
             initialRouteName="Feed"
             barStyle={styles.barStyles}
             shifting={false} // inactive tabs label won't show
-            backBehavior="order"
-        >
+            backBehavior="order">
             <Tab.Screen
                 name="Feed"
                 component={IntroScreen1}

app/screens/home/Home.android.js

@@ -4,6 +4,7 @@ import {
     Text,
     Modal,
     View,
+    Pressable,
     StyleSheet,
     TouchableOpacity,
 } from 'react-native';
@@ -29,6 +30,18 @@ const App = () => {
         return true; /* else the app will exit */
     };
 
+    const [pressText, setPressText] = React.useState('Press me');
+    const [copiedText, setCopiedText] = React.useState('');
+
+    const copyToClipboard = () =>
+        Clipboard.setString('this is a copied string');
+
+    const fetchCopiedText = async () => {
+        /* Somehow shows blank text when console.log, but setText() works */
+        const text = await Clipboard.getString();
+        setCopiedText(text);
+    };
+
     const styles = StyleSheet.create({
         centeredView: {
             flex: 1,
@@ -61,6 +74,21 @@ const App = () => {
             alignItems: 'center',
         },
         touchArea: { padding: 10 },
+        copyCard: { marginTop: 30 },
+        pressView: {
+            borderColor: 'grey',
+            padding: 10,
+            backgroundColor: 'silver',
+            marginTop: 10,
+            marginBottom: 10,
+        },
+        pressedText: {
+            color: 'red',
+        },
+        copiedText: {
+            marginTop: 10,
+            color: '#007aba',
+        },
     });
 
     const ModalComponent = () => (
@@ -112,9 +140,40 @@ const App = () => {
             <Header title={t('DRAWER.home')} openDrawer />
             <ThemedBody>
                 <ModalComponent />
+
                 <ThemedCard>
                     <ThemedText>Welcome to the HomeScreen !!!</ThemedText>
                 </ThemedCard>
+
+                <ThemedCard style={styles.copyCard}>
+                    <ThemedText style={styles.headerText}>
+                        Pressable Component - Click/Press the button
+                    </ThemedText>
+
+                    <Pressable
+                        onPressIn={() => setPressText('normal press')}
+                        onPressOut={() => setPressText('Press Me')}
+                        onLongPress={() => setPressText('On Long Press...')}>
+                        <View style={styles.pressView}>
+                            <ThemedText style={styles.pressedText}>
+                                {pressText}
+                            </ThemedText>
+                        </View>
+                    </Pressable>
+
+                    <TouchableOpacity onPress={copyToClipboard}>
+                        <View style={styles.pressView}>
+                            <ThemedText>
+                                Click here to copy to Clipboard
+                            </ThemedText>
+                        </View>
+                    </TouchableOpacity>
+                    <TouchableOpacity onPress={fetchCopiedText}>
+                        <ThemedText>View copied text</ThemedText>
+                    </TouchableOpacity>
+
+                    <ThemedText>{copiedText}</ThemedText>
+                </ThemedCard>
             </ThemedBody>
         </ThemedContainer>
     );

app/screens/home/Home.ios.js

@@ -16,13 +16,12 @@ const App = () => {
     const [pressText, setPressText] = React.useState('Press me');
     const [copiedText, setCopiedText] = React.useState('');
 
-    const copyToClipboard = () => {
+    const copyToClipboard = () =>
         Clipboard.setString('this is a copied string');
-    };
 
     const fetchCopiedText = async () => {
+        /* Somehow shows blank text when console.log, but setText() works */
         const text = await Clipboard.getString();
-        console.log('text: ', text);
         setCopiedText(text);
     };
 
@@ -36,7 +35,7 @@ const App = () => {
 
                 <ThemedCard style={styles.copyCard}>
                     <ThemedText style={styles.headerText}>
-                        Click The Appropriate Btn to see their functionality
+                        Pressable Component - Click/Press the button
                     </ThemedText>
 
                     <Pressable
@@ -61,9 +60,7 @@ const App = () => {
                         <ThemedText>View copied text</ThemedText>
                     </TouchableOpacity>
 
-                    <ThemedText>
-                        {copiedText}
-                    </ThemedText>
+                    <ThemedText>{copiedText}</ThemedText>
                 </ThemedCard>
             </ThemedBody>
         </ThemedContainer>

app/screens/intro/IntroScreen1.js

@@ -4,7 +4,7 @@ import Header from '_Shared/Header';
 
 const IntroScreen1 = () => (
     <ThemedContainer>
-        <Header title="TABS"/>
+        <Header title="TABS" />
         <ThemedText> Hiii from IntroScreen 1.</ThemedText>
     </ThemedContainer>
 );

app/screens/onboarding/Onboarding.js

@@ -32,15 +32,14 @@ const IntroScreen = () => {
     };
 
     const PageImage = () => (
-            <Image
-                source={require('_Images/hi.png')}
-                style={styles.image}
-            />
+        <Image source={require('_Images/hi.png')} style={styles.image} />
     );
-    
+
     const InternetImage = () => (
         <Image
-            source={{ uri: "https://images.unsplash.com/photo-1607252650355-f7fd0460ccdb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YW5kcm9pZHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80"}}
+            source={{
+                uri: 'https://images.unsplash.com/photo-1607252650355-f7fd0460ccdb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YW5kcm9pZHxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&w=1000&q=80',
+            }}
             style={styles.image}
         />
     );
@@ -102,4 +101,4 @@ const styles = StyleSheet.create({
     },
 });
 
-export default IntroScreen;
+export default IntroScreen;

app/store/lang.store.js

@@ -39,7 +39,7 @@ export const LangStoreContext = createContext(langStore);
 export const useLangStore = () => useContext(LangStoreContext);
 
 export const Languages = [
-    { label: 'English', value: 'en', },
+    { label: 'English', value: 'en' },
     { label: 'Français', value: 'fr' },
     { label: 'हिंदी', value: 'hi' },
 ];

app/store/onboard.store.js

@@ -3,23 +3,21 @@ import { makeAutoObservable, configure } from 'mobx';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export class OnboardStore {
-
     isOnboard = false;
 
     constructor() {
         configure({
             enforceActions: 'never' /* disable strict-mode warning */,
-        });   
-        makeAutoObservable(this, {}, { autoBind: true })
+        });
+        makeAutoObservable(this, {}, { autoBind: true });
     }
 
     async getOnboardAction() {
         try {
             const firstVisit = await AsyncStorage.getItem('isOnboard');
             if (firstVisit) {
                 this.isOnboard = true;
-            }
-            else {
+            } else {
                 this.isOnboard = false;
             }
         } catch (e) {
@@ -41,4 +39,3 @@ const onboardStore = new OnboardStore();
 
 export const OnboardContext = createContext(onboardStore);
 export const useOnboardStore = () => useContext(OnboardContext);
-

app/store/theme.store.js

@@ -5,7 +5,6 @@ import Light from '_Themes/Light';
 import Dark from '_Themes/Dark';
 
 export class ThemeStore {
-
     themeObj = Light;
 
     constructor() {