From e54997e2cf61d7f469ccf1821fdaedfe20bbb106 Mon Sep 17 00:00:00 2001 From: Nishant Kohli Date: Tue, 7 Sep 2021 06:03:39 +0530 Subject: [PATCH] clipboard & pressable --- .eslintrc.js | 55 +++++-------- README.md | 4 +- app/assets/i18n/en/common.json | 2 +- app/assets/i18n/fr/common.json | 4 +- app/assets/i18n/hi/common.json | 2 +- app/assets/themes/Dark.js | 14 ++-- app/assets/themes/Light.js | 14 ++-- app/navigation/DrawerLayout.js | 4 +- app/navigation/DrawerNav.js | 3 +- app/navigation/TabsNav.js | 3 +- app/screens/home/Home.android.js | 59 ++++++++++++++ app/screens/home/Home.ios.js | 11 +-- app/screens/intro/IntroScreen1.js | 2 +- app/screens/onboarding/Onboarding.js | 13 ++- app/store/lang.store.js | 2 +- app/store/onboard.store.js | 9 +- app/store/theme.store.js | 1 - package.json | 118 +++++++++++++-------------- 18 files changed, 177 insertions(+), 143 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 6236357..c2a1151 100644 --- a/.eslintrc.js +++ b/.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'], + }, }; diff --git a/README.md b/README.md index b9412e4..8f410f8 100644 --- a/README.md +++ b/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) \ No newline at end of file +If you found this project helpful, consider [buying me a coffee](https://www.buymeacoffee.com/nish1896) diff --git a/app/assets/i18n/en/common.json b/app/assets/i18n/en/common.json index e892811..fa90f2b 100644 --- a/app/assets/i18n/en/common.json +++ b/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", diff --git a/app/assets/i18n/fr/common.json b/app/assets/i18n/fr/common.json index ee34791..114ba79 100644 --- a/app/assets/i18n/fr/common.json +++ b/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}}" } -} \ No newline at end of file +} diff --git a/app/assets/i18n/hi/common.json b/app/assets/i18n/hi/common.json index 19c67e5..e939cbd 100644 --- a/app/assets/i18n/hi/common.json +++ b/app/assets/i18n/hi/common.json @@ -25,7 +25,7 @@ "connection": "कृपया अपने इंटरनेट कनेक्शन की जाँच करें", "enterPhone": "फोन नंबर दर्ज करें (कोड के साथ)", "enterOTP": "OTP दर्ज करें", - "getOTP":"OTP प्राप्त करें", + "getOTP": "OTP प्राप्त करें", "submitOTP": "प्रस्तुत", "ssoGoogle": "Google से साइन इन करें", "ssoFacebook": "Facebook से साइन इन करें", diff --git a/app/assets/themes/Dark.js b/app/assets/themes/Dark.js index 15bee4e..855b7ca 100644 --- a/app/assets/themes/Dark.js +++ b/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 */, }, }; diff --git a/app/assets/themes/Light.js b/app/assets/themes/Light.js index 7802bf5..d5eff45 100644 --- a/app/assets/themes/Light.js +++ b/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 */, }, }; diff --git a/app/navigation/DrawerLayout.js b/app/navigation/DrawerLayout.js index 6b91253..f7391bb 100644 --- a/app/navigation/DrawerLayout.js +++ b/app/navigation/DrawerLayout.js @@ -57,7 +57,9 @@ const DrawerLayout = () => { size={CommonStyles.icons.drawerIcon} /> )} - label={() => {t('DRAWER.settings')}} + label={() => ( + {t('DRAWER.settings')} + )} onPress={() => { navigation.navigate('Settings'); }} diff --git a/app/navigation/DrawerNav.js b/app/navigation/DrawerNav.js index 001ab0e..972d826 100644 --- a/app/navigation/DrawerNav.js +++ b/app/navigation/DrawerNav.js @@ -17,8 +17,7 @@ const NavDrawer = () => { initialRouteName="Home" overlayColor="transparent" screenOptions={{ headerShown: false }} - drawerContent={() => } - > + drawerContent={() => }> diff --git a/app/navigation/TabsNav.js b/app/navigation/TabsNav.js index 94b8788..9581569 100644 --- a/app/navigation/TabsNav.js +++ b/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"> { 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 = () => {
+ Welcome to the HomeScreen !!! + + + + Pressable Component - Click/Press the button + + + setPressText('normal press')} + onPressOut={() => setPressText('Press Me')} + onLongPress={() => setPressText('On Long Press...')}> + + + {pressText} + + + + + + + + Click here to copy to Clipboard + + + + + View copied text + + + {copiedText} + ); diff --git a/app/screens/home/Home.ios.js b/app/screens/home/Home.ios.js index e51ea33..20993a1 100644 --- a/app/screens/home/Home.ios.js +++ b/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 = () => { - Click The Appropriate Btn to see their functionality + Pressable Component - Click/Press the button { View copied text - - {copiedText} - + {copiedText} diff --git a/app/screens/intro/IntroScreen1.js b/app/screens/intro/IntroScreen1.js index 937eb17..87b0b06 100644 --- a/app/screens/intro/IntroScreen1.js +++ b/app/screens/intro/IntroScreen1.js @@ -4,7 +4,7 @@ import Header from '_Shared/Header'; const IntroScreen1 = () => ( -
+
Hiii from IntroScreen 1. ); diff --git a/app/screens/onboarding/Onboarding.js b/app/screens/onboarding/Onboarding.js index 44faf59..164ab2c 100644 --- a/app/screens/onboarding/Onboarding.js +++ b/app/screens/onboarding/Onboarding.js @@ -32,15 +32,14 @@ const IntroScreen = () => { }; const PageImage = () => ( - + ); - + const InternetImage = () => ( ); @@ -102,4 +101,4 @@ const styles = StyleSheet.create({ }, }); -export default IntroScreen; \ No newline at end of file +export default IntroScreen; diff --git a/app/store/lang.store.js b/app/store/lang.store.js index 4f2e15c..559c903 100644 --- a/app/store/lang.store.js +++ b/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' }, ]; diff --git a/app/store/onboard.store.js b/app/store/onboard.store.js index 09ee235..3eb4a48 100644 --- a/app/store/onboard.store.js +++ b/app/store/onboard.store.js @@ -3,14 +3,13 @@ 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() { @@ -18,8 +17,7 @@ export class OnboardStore { 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); - diff --git a/app/store/theme.store.js b/app/store/theme.store.js index 364011c..1c05429 100644 --- a/app/store/theme.store.js +++ b/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() { diff --git a/package.json b/package.json index 9c52e6c..dbd4098 100644 --- a/package.json +++ b/package.json @@ -1,61 +1,61 @@ { - "name": "react-native-libs", - "version": "1.0.0", - "private": true, - "scripts": { - "android": "react-native run-android", - "ios": "react-native run-ios", - "start": "react-native start", - "test": "jest", - "lint": "eslint .", - "prettier": "prettier --write ." - }, - "rnpm": { - "assets": [ - "./app/assets/fonts" - ] - }, - "dependencies": { - "@react-native-async-storage/async-storage": "^1.15.7", - "@react-native-community/clipboard": "^1.5.1", - "@react-native-community/netinfo": "^6.0.1", - "@react-native-picker/picker": "^1.16.7", - "@react-navigation/drawer": "^6.1.4", - "@react-navigation/material-bottom-tabs": "^6.0.5", - "@react-navigation/native": "^6.0.2", - "@react-navigation/stack": "^6.0.7", - "babel-plugin-module-resolver": "^4.1.0", - "i18next": "^20.6.0", - "mobx": "^6.3.3", - "mobx-react-lite": "^3.2.1", - "react": "17.0.2", - "react-i18next": "^11.11.4", - "react-native": "0.65.1", - "react-native-config": "^1.4.4", - "react-native-gesture-handler": "^1.10.3", - "react-native-onboarding-swiper": "^1.1.4", - "react-native-paper": "^4.9.2", - "react-native-picker-select": "^8.0.4", - "react-native-reanimated": "1.13.3", - "react-native-safe-area-context": "^3.3.1", - "react-native-screens": "^3.6.0", - "react-native-vector-icons": "^8.1.0", - "react-native-web": "^0.17.1", - "styled-components": "^5.3.1" - }, - "devDependencies": { - "@babel/core": "^7.12.9", - "@babel/runtime": "^7.12.5", - "@react-native-community/eslint-config": "^2.0.0", - "babel-jest": "^26.6.3", - "eslint": "7.14.0", - "eslint-plugin-react": "^7.25.1", - "jest": "^26.6.3", - "metro-react-native-babel-preset": "^0.66.0", - "react-native-codegen": "^0.0.7", - "react-test-renderer": "17.0.2" - }, - "jest": { - "preset": "react-native" - } + "name": "react-native-libs", + "version": "1.0.0", + "private": true, + "scripts": { + "android": "react-native run-android", + "ios": "react-native run-ios", + "start": "react-native start", + "test": "jest", + "lint": "eslint .", + "prettier": "prettier --write ." + }, + "rnpm": { + "assets": [ + "./app/assets/fonts" + ] + }, + "dependencies": { + "@react-native-async-storage/async-storage": "^1.15.7", + "@react-native-community/clipboard": "^1.5.1", + "@react-native-community/netinfo": "^6.0.1", + "@react-native-picker/picker": "^1.16.7", + "@react-navigation/drawer": "^6.1.4", + "@react-navigation/material-bottom-tabs": "^6.0.5", + "@react-navigation/native": "^6.0.2", + "@react-navigation/stack": "^6.0.7", + "babel-plugin-module-resolver": "^4.1.0", + "i18next": "^20.6.0", + "mobx": "^6.3.3", + "mobx-react-lite": "^3.2.1", + "react": "17.0.2", + "react-i18next": "^11.11.4", + "react-native": "0.65.1", + "react-native-config": "^1.4.4", + "react-native-gesture-handler": "^1.10.3", + "react-native-onboarding-swiper": "^1.1.4", + "react-native-paper": "^4.9.2", + "react-native-picker-select": "^8.0.4", + "react-native-reanimated": "1.13.3", + "react-native-safe-area-context": "^3.3.1", + "react-native-screens": "^3.6.0", + "react-native-vector-icons": "^8.1.0", + "react-native-web": "^0.17.1", + "styled-components": "^5.3.1" + }, + "devDependencies": { + "@babel/core": "^7.12.9", + "@babel/runtime": "^7.12.5", + "@react-native-community/eslint-config": "^2.0.0", + "babel-jest": "^26.6.3", + "eslint": "7.14.0", + "eslint-plugin-react": "^7.25.1", + "jest": "^26.6.3", + "metro-react-native-babel-preset": "^0.66.0", + "react-native-codegen": "^0.0.7", + "react-test-renderer": "17.0.2" + }, + "jest": { + "preset": "react-native" + } }