From 033f35a5fcc7edf4ab1f547b5a06cfde53911ddd Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Wed, 14 Apr 2021 17:53:52 +0530 Subject: [PATCH 1/4] fix strict typescript issues --- package.json | 3 + src/navigation/DrawerNavigator.tsx | 2 +- src/navigation/RootNavigator.tsx | 11 +-- src/views/avatars.tsx | 24 ++---- src/views/badge.tsx | 34 ++++---- src/views/buttons.tsx | 3 +- src/views/lists2.tsx | 24 ++++-- src/views/ratings.tsx | 6 +- src/views/settings.tsx | 36 ++++++-- src/views/social_icons.tsx | 52 +++++++----- src/views/tooltip.tsx | 130 +++++++++++++++-------------- yarn.lock | 11 ++- 12 files changed, 193 insertions(+), 143 deletions(-) diff --git a/package.json b/package.json index d4c911d4..43c80fcf 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,9 @@ "devDependencies": { "@expo/webpack-config": "~0.12.45", "@react-native-community/eslint-config": "^2.0.0", + "@types/lodash": "^4.14.168", + "@types/react": "^17.0.3", + "@types/react-native": "^0.64.2", "babel-preset-expo": "8.3.0", "eslint": "^7.3.1", "gh-pages": "^2.1.1", diff --git a/src/navigation/DrawerNavigator.tsx b/src/navigation/DrawerNavigator.tsx index abab4b5c..d3b84808 100644 --- a/src/navigation/DrawerNavigator.tsx +++ b/src/navigation/DrawerNavigator.tsx @@ -17,7 +17,7 @@ function CustomContentComponent(props) { style={{ flex: 1, height: '100%', - backgroundColor: theme.colors.grey5, + backgroundColor: theme?.colors?.grey5, }} edges={['right', 'left', 'bottom']} > diff --git a/src/navigation/RootNavigator.tsx b/src/navigation/RootNavigator.tsx index d33ec741..6b0319fe 100644 --- a/src/navigation/RootNavigator.tsx +++ b/src/navigation/RootNavigator.tsx @@ -33,14 +33,15 @@ import WhatsappClone from '../views/whatsappClone'; const Drawer = createDrawerNavigator(); function RootNavigator() { - const { ThemeState, dispatch } = useContext(ThemeReducerContext); + const { ThemeState } = useContext(ThemeReducerContext); const { theme } = useContext(ThemeContext); return ( diff --git a/src/views/avatars.tsx b/src/views/avatars.tsx index f84d8a6c..82661b62 100644 --- a/src/views/avatars.tsx +++ b/src/views/avatars.tsx @@ -4,40 +4,32 @@ import _ from 'lodash'; import { Avatar } from 'react-native-elements'; import { Header, SubHeader } from './header'; -const dataList = [ +type AvatarData = { + image_url?: string; +}; + +const dataList: AvatarData[] = [ { image_url: 'https://uifaces.co/our-content/donated/6MWH9Xi_.jpg', - icon: null, - title: null, }, { image_url: 'https://randomuser.me/api/portraits/men/36.jpg', - icon: null, - title: null, }, { image_url: 'https://cdn.pixabay.com/photo/2019/11/03/20/11/portrait-4599553__340.jpg', - icon: null, - title: null, }, { image_url: 'https://cdn.pixabay.com/photo/2014/09/17/20/03/profile-449912__340.jpg', - icon: null, - title: null, }, { image_url: 'https://cdn.pixabay.com/photo/2020/09/18/05/58/lights-5580916__340.jpg', - icon: null, - title: null, }, { image_url: 'https://cdn.pixabay.com/photo/2016/11/22/21/42/adult-1850703__340.jpg', - icon: null, - title: null, }, ]; @@ -80,8 +72,7 @@ const Avatars: React.FunctionComponent = () => { ))} @@ -205,8 +196,7 @@ const Avatars: React.FunctionComponent = () => { size={64} rounded source={{ - uri: - 'https://randomuser.me/api/portraits/women/57.jpg', + uri: 'https://randomuser.me/api/portraits/women/57.jpg', }} title="Bj" containerStyle={{ backgroundColor: 'grey' }} diff --git a/src/views/badge.tsx b/src/views/badge.tsx index e7302544..5fbf57d5 100644 --- a/src/views/badge.tsx +++ b/src/views/badge.tsx @@ -3,7 +3,7 @@ import { Text, View } from 'react-native'; import { Avatar, Badge, Icon, withBadge } from 'react-native-elements'; import { Header, SubHeader } from './header'; -const BadgedIcon = withBadge(5)(Icon) +const BadgedIcon = withBadge(5)(Icon); const badgeComponent = () => { return ( @@ -16,7 +16,8 @@ const badgeComponent = () => { justifyContent: 'space-around', marginTop: 20, marginBottom: 40, - }}> + }} + > @@ -29,7 +30,8 @@ const badgeComponent = () => { justifyContent: 'space-around', marginTop: 20, marginBottom: 20, - }}> + }} + > @@ -40,13 +42,14 @@ const badgeComponent = () => { flexDirection: 'row', justifyContent: 'space-around', marginBottom: 20, - }}> - Success - Error - Primary - Warning + }} + > + Success + Error + Primary + Warning - + { justifyContent: 'space-around', marginTop: 20, marginBottom: 40, - }}> + }} + > @@ -80,4 +84,4 @@ const badgeComponent = () => { ); }; -export default badgeComponent; \ No newline at end of file +export default badgeComponent; diff --git a/src/views/buttons.tsx b/src/views/buttons.tsx index a3a6cbaf..75a985f8 100644 --- a/src/views/buttons.tsx +++ b/src/views/buttons.tsx @@ -252,7 +252,7 @@ const Buttons: React.FunctionComponent = () => { borderColor: 'rgba(78, 116, 289, 1)', }} type="outline" - raised="true" + raised={true} titleStyle={{ color: 'rgba(78, 116, 289, 1)' }} containerStyle={{ width: 200, @@ -378,4 +378,3 @@ const styles = StyleSheet.create({ }); export default withTheme(Buttons, ''); - diff --git a/src/views/lists2.tsx b/src/views/lists2.tsx index 386e6e97..8a0a48d0 100644 --- a/src/views/lists2.tsx +++ b/src/views/lists2.tsx @@ -14,7 +14,12 @@ import { Header } from './header'; import colors from '../config/colors'; const log = () => console.log('this is an example method'); -const list1 = [ + +type List1Data = { + title?: string; + icon: string; +}; +const list1: List1Data[] = [ { title: 'Appointments', icon: 'av-timer', @@ -37,7 +42,14 @@ const list1 = [ }, ]; -const list2 = [ +type List2Data = { + name?: string; + avatar_url?: string; + subtitle?: string; + linearGradientColors?: string[]; +}; + +const list2: List2Data[] = [ { name: 'Amy Farha', avatar_url: 'https://uifaces.co/our-content/donated/XdLjsJX_.jpg', @@ -78,7 +90,7 @@ const Lists2: React.FunctionComponent = () => { const [expanded, setExpanded] = React.useState(false); const listItemProps = {}; - const renderRow = ({ item }) => { + const renderRow = ({ item }: { item: List1Data }) => { return ( @@ -147,9 +159,9 @@ const Lists2: React.FunctionComponent = () => { setExpanded(!expanded); }} > - {list2.map((l, i) => ( + {list2.map((l: List2Data, i: React.Key) => ( - + {l.name} {l.subtitle} @@ -247,7 +259,7 @@ const Lists2: React.FunctionComponent = () => { } data={list1} - keyExtractor={(a) => a.title} + keyExtractor={(a: List1Data, index: number) => index.toString()} renderItem={renderRow} /> diff --git a/src/views/ratings.tsx b/src/views/ratings.tsx index c339e7eb..f9684187 100644 --- a/src/views/ratings.tsx +++ b/src/views/ratings.tsx @@ -8,7 +8,7 @@ const WATER_IMAGE = require('../images/water.png'); type RatingsComponentProps = {}; const Ratings: React.FunctionComponent = () => { - const ratingCompleted = (rating) => { + const ratingCompleted = (rating: number) => { console.log('Rating is: ' + rating); }; @@ -119,14 +119,14 @@ const styles = StyleSheet.create({ fontWeight: 'bold', textAlign: 'center', paddingVertical: 5, - fontFamily: Platform.OS === 'ios' ? 'Menlo-Bold' : null, + fontFamily: Platform.OS === 'ios' ? 'Menlo-Bold' : '', color: '#27ae60', }, subtitleText: { fontSize: 18, fontWeight: '400', textAlign: 'center', - fontFamily: Platform.OS === 'ios' ? 'Trebuchet MS' : null, + fontFamily: Platform.OS === 'ios' ? 'Trebuchet MS' : '', color: '#34495e', }, viewContainer: { diff --git a/src/views/settings.tsx b/src/views/settings.tsx index 9e1e268c..29afa5ba 100644 --- a/src/views/settings.tsx +++ b/src/views/settings.tsx @@ -11,7 +11,6 @@ import { import { Header } from './header'; import { ThemeReducerContext } from '../helpers/ThemeReducer'; - const ORANGE = '#FF9500'; const BLUE = '#007AFF'; const GREEN = '#4CD964'; @@ -19,7 +18,21 @@ const RED = '#FF3B30'; const GREY = '#8E8E93'; const PURPLE = '#5856D6'; const TEAL_BLUE = '#5AC8FA'; -const sections = [ + +type SettingData = { + title?: string; + icon?: string; + backgroundColor?: string; + hideChevron?: boolean; + checkbox?: boolean; + rightTitle?: string; +}; + +type SettingsData = { + data: SettingData[]; +}; + +const sections: SettingsData[] = [ { data: [ { @@ -126,7 +139,7 @@ const Settings: React.FunctionComponent = () => { const [switched, setSwitched] = useState(false); const { ThemeState } = useContext(ThemeReducerContext); - const onSwitchEventHandler = (value) => { + const onSwitchEventHandler = (value: boolean) => { setSwitched(value); }; @@ -134,6 +147,8 @@ const Settings: React.FunctionComponent = () => { const renderItem = ({ item: { title, backgroundColor, icon, rightTitle, hideChevron, checkbox }, + }: { + item: SettingData; }) => ( = () => { const renderSectionHeader = () => ; const ItemSeparatorComponent = () => ( - + ); @@ -182,7 +203,12 @@ const Settings: React.FunctionComponent = () => { ); - const keyExtractor = (item, index) => index; + const keyExtractor: (item: SettingData, index: number) => string = ( + item: SettingData, + index: React.Key + ) => { + return index.toString(); + }; return ( <> diff --git a/src/views/social_icons.tsx b/src/views/social_icons.tsx index 22d93736..77d03bae 100644 --- a/src/views/social_icons.tsx +++ b/src/views/social_icons.tsx @@ -1,10 +1,16 @@ import React from 'react'; import { View, ScrollView } from 'react-native'; -import _ from 'lodash'; import { SocialIcon, SocialIconProps } from 'react-native-elements'; import { Header } from './header'; +import { SocialMediaType } from 'react-native-elements/dist/social/SocialIcon'; +import _ from 'lodash'; + +type IconData = { + type?: SocialMediaType; + iconType?: string; +}; -const dataList = [ +const dataList: IconData[] = [ { type: 'facebook', }, @@ -100,26 +106,28 @@ const SocialIcons: React.FunctionComponent = () => { <>
- {_.chunk(dataList, 3).map((chunk, chunkIndex) => ( - - {chunk.map((l, i) => ( - - ))} - - ))} + {_.chunk(dataList, 3).map( + (chunk: IconData[], chunkIndex: React.Key) => ( + + {chunk.map((l: IconData, i: React.Key) => ( + + ))} + + ) + )} ); diff --git a/src/views/tooltip.tsx b/src/views/tooltip.tsx index 48f9bc15..ca8d91a0 100644 --- a/src/views/tooltip.tsx +++ b/src/views/tooltip.tsx @@ -14,71 +14,73 @@ const TooltipComponent: React.FunctionComponent = () => { <>
- - - no caret!} - withPointer={false} - > - without caret - - Tooltip info goes here} - width={200} - backgroundColor={colors.primary} - > - Press me - + + + no caret!} + withPointer={false} + > + without caret + + Tooltip info goes here} + width={200} + backgroundColor={colors.primary} + > + Press me + + + + Tooltip info goes here too. Find tooltip everywhere + } + containerStyle={{ width: 200, height: 60 }} + > + Press me + + {`Some big text full of important stuff for the super duper user that our design has been created for`} + } + > + HUGE + + + + Tooltip info goes here} + > + More attention + + + + Tooltip info goes here} + > + I'm different + + Tooltip info goes here} + > + Press me + + - - Tooltip info goes here too. Find tooltip everywhere - } - containerStyle={{ width: 200, height: 60 }} - > - Press me - - {`Some big text full of important stuff for the super duper user that our design has been created for`}} - > - HUGE - - - - Tooltip info goes here} - > - More attention - - - - Tooltip info goes here} - > - I'm different - - Tooltip info goes here} - > - Press me - - - ); diff --git a/yarn.lock b/yarn.lock index 58bd160d..5f3073f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2235,6 +2235,11 @@ resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad" integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA== +"@types/lodash@^4.14.168": + version "4.14.168" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008" + integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q== + "@types/minimatch@*": version "3.0.4" resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.4.tgz#f0ec25dbf2f0e4b18647313ac031134ca5b24b21" @@ -2273,14 +2278,14 @@ "@types/react" "*" "@types/react-native" "*" -"@types/react-native@*": +"@types/react-native@*", "@types/react-native@^0.64.2": version "0.64.2" resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.64.2.tgz#2e344aeec0b4eb21fb9eaa0ed8973245c5601d56" integrity sha512-w2y04h+GVLY+OMlFSmq4adPuS51XtEp1yUr83OvXf+moMQ4zDG1Q07HhyvYDXdc+BSS9ANHySBqVCz0hFxli9Q== dependencies: "@types/react" "*" -"@types/react@*": +"@types/react@*", "@types/react@^17.0.3": version "17.0.3" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.3.tgz#ba6e215368501ac3826951eef2904574c262cc79" integrity sha512-wYOUxIgs2HZZ0ACNiIayItyluADNbONl7kt8lkLjVK8IitMH5QMyAh75Fwhmo37r1m7L2JaFj03sIfxBVDvRAg== @@ -10099,7 +10104,7 @@ react-native-appearance@~0.3.4: "react-native-elements@https://github.com/react-native-elements/react-native-elements#dist": version "3.3.2" - resolved "https://github.com/react-native-elements/react-native-elements#7bc7896c513e341e2a0936c1c0142ff0f2416248" + resolved "https://github.com/react-native-elements/react-native-elements#2aa2681784cedad6f298d104ecaba0adf29738ec" dependencies: "@types/react-native-vector-icons" "^6.4.6" color "^3.1.2" From 23d0892b842208db0a535c3aa9a778536bd96a91 Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Thu, 15 Apr 2021 20:20:54 +0530 Subject: [PATCH 2/4] fix typescript strict mode enabled issues --- src/helpers/AssetsCaching.tsx | 4 +-- src/helpers/AssetsCaching.web.tsx | 7 ++-- src/navigation/DrawerNavigator.tsx | 10 ++++-- src/views/avatars.tsx | 2 +- src/views/lists/content.tsx | 25 ++++++++++---- src/views/login/screen2.tsx | 52 +++++++++++++++++++----------- src/views/login/screen3.tsx | 39 +++++++++++----------- src/views/settings.tsx | 4 +-- 8 files changed, 90 insertions(+), 53 deletions(-) diff --git a/src/helpers/AssetsCaching.tsx b/src/helpers/AssetsCaching.tsx index fd8f1cbc..93a3bc14 100644 --- a/src/helpers/AssetsCaching.tsx +++ b/src/helpers/AssetsCaching.tsx @@ -2,11 +2,11 @@ import { Image } from 'react-native'; import { loadAsync } from 'expo-font'; import { Asset } from 'expo-asset'; -export const cacheFonts = (fonts) => { +export const cacheFonts = (fonts: string[]) => { return fonts.map((font) => loadAsync(font)); }; -export const cacheImages = (images) => { +export const cacheImages = (images: string[]) => { return images.map((image) => { if (typeof image === 'string') { return Image.prefetch(image); diff --git a/src/helpers/AssetsCaching.web.tsx b/src/helpers/AssetsCaching.web.tsx index 187437ae..a48a4867 100644 --- a/src/helpers/AssetsCaching.web.tsx +++ b/src/helpers/AssetsCaching.web.tsx @@ -1,8 +1,11 @@ export const cacheImages = () => []; -let cachedFonts = {}; +interface CacheFontType { + [key: string]: any; +} +let cachedFonts: CacheFontType = {}; -const cacheFont = (name, link) => { +const cacheFont = (name: string, link: string) => { const styleBody = `@font-face { src: url(${link}); font-family: ${name}; }`; const style: HTMLStyleElement = document.createElement('style'); style.type = 'text/css'; diff --git a/src/navigation/DrawerNavigator.tsx b/src/navigation/DrawerNavigator.tsx index d3b84808..86ad67db 100644 --- a/src/navigation/DrawerNavigator.tsx +++ b/src/navigation/DrawerNavigator.tsx @@ -3,12 +3,16 @@ import { View, Image } from 'react-native'; import { DrawerContentScrollView, DrawerItemList, + DrawerContentComponentProps, + DrawerContentOptions, } from '@react-navigation/drawer'; import { ThemeContext, Text, Divider, Switch } from 'react-native-elements'; import { ThemeReducerContext } from '../helpers/ThemeReducer'; import { SafeAreaView } from 'react-native-safe-area-context'; -function CustomContentComponent(props) { +function CustomContentComponent( + props: DrawerContentComponentProps +) { const { ThemeState, dispatch } = useContext(ThemeReducerContext); const { theme } = useContext(ThemeContext); @@ -75,7 +79,9 @@ function CustomContentComponent(props) { ); } -function CustomDrawerContent(props) { +function CustomDrawerContent( + props: DrawerContentComponentProps +) { return ( diff --git a/src/views/avatars.tsx b/src/views/avatars.tsx index 82661b62..a7d240d2 100644 --- a/src/views/avatars.tsx +++ b/src/views/avatars.tsx @@ -29,7 +29,7 @@ const dataList: AvatarData[] = [ }, { image_url: - 'https://cdn.pixabay.com/photo/2016/11/22/21/42/adult-1850703__340.jpg', + 'https://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg', }, ]; diff --git a/src/views/lists/content.tsx b/src/views/lists/content.tsx index f8609c73..330b1f51 100644 --- a/src/views/lists/content.tsx +++ b/src/views/lists/content.tsx @@ -1,7 +1,14 @@ import _ from 'lodash'; import React from 'react'; import { Text, View, ScrollView } from 'react-native'; -import { Avatar, Button, Icon, withTheme } from 'react-native-elements'; +import { Avatar, Button, Icon, Theme, withTheme } from 'react-native-elements'; + +type UserData = { + name?: string; + avatar?: string; + value?: string; + positive?: boolean; +}; const USERS = [ { @@ -43,8 +50,12 @@ const USERS = [ }, ]; -const ListContent = (props) => { - const renderValue = (user) => { +type ListContentType = { + theme?: Theme; +}; + +const ListContent = (props: ListContentType) => { + const renderValue = (user: UserData) => { const { value, positive } = user; if (positive) { @@ -104,7 +115,7 @@ const ListContent = (props) => { } }; - const renderCard = (user, index) => { + const renderCard = (user: UserData, index: React.Key) => { const { name, avatar } = user; return ( { height: 60, marginHorizontal: 10, marginTop: 10, - backgroundColor: props.theme.colors.grey4, + backgroundColor: props?.theme?.colors?.grey4, borderRadius: 5, alignItems: 'center', flexDirection: 'row', @@ -134,7 +145,7 @@ const ListContent = (props) => { fontFamily: 'regular', fontSize: 15, marginLeft: 10, - color: props.theme.colors.grey0, + color: props?.theme?.colors?.grey0, }} > {name} @@ -222,7 +233,7 @@ const ListContent = (props) => { style={{ fontFamily: 'bold', fontSize: 25, - color: props.theme.colors.secondary, + color: props?.theme?.colors?.secondary, marginLeft: -15, }} > diff --git a/src/views/login/screen2.tsx b/src/views/login/screen2.tsx index 3c7f6aef..c1043947 100644 --- a/src/views/login/screen2.tsx +++ b/src/views/login/screen2.tsx @@ -10,6 +10,9 @@ import { ScrollView, Text, View, + ImageSourcePropType, + TextInput, + TextInputProps, } from 'react-native'; import { Input, Button, Icon, InputProps } from 'react-native-elements'; import { LinearGradient } from '../../components/LinearGradient'; @@ -28,7 +31,7 @@ type LoginScreen3Props = {}; const LoginScreen3: React.FunctionComponent = () => { const [isLoading, setLoading] = useState(false); - const [selectedType, setSelectedType] = useState(null); + const [selectedType, setSelectedType] = useState(); const [username, setUsername] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); @@ -36,9 +39,10 @@ const LoginScreen3: React.FunctionComponent = () => { const [validEmail, setEmailValid] = useState(true); const [validPassword, setPasswordValid] = useState(true); const [validUsername, setUsernameValid] = useState(true); - const [validConfirmationPassword, setConfirmationPasswordValid] = useState< - boolean - >(true); + const [ + validConfirmationPassword, + setConfirmationPasswordValid, + ] = useState(true); let emailInput = useRef(null); let passwordInput = useRef(null); let confirmationPasswordInput = useRef(null); @@ -98,7 +102,7 @@ const LoginScreen3: React.FunctionComponent = () => { return confirmationPasswordCheck; }; - const selectedTypeHandler = (value) => { + const selectedTypeHandler = (value: string) => { LayoutAnimation.easeInEaseOut(); setSelectedType(value); }; @@ -138,10 +142,10 @@ const LoginScreen3: React.FunctionComponent = () => { refInput={(input) => (usernameInput = input)} icon="user" value={username} - onChangeText={(text) => setUsername(text)} + onChangeText={(text: string) => setUsername(text)} placeholder="Username" returnKeyType="next" - errorMessage={validUsername ? null : "Your username can't be blank"} + errorMessage={validUsername ? '' : "Your username can't be blank"} onSubmitEditing={() => { validateUsername(); emailInput.focus(); @@ -151,13 +155,11 @@ const LoginScreen3: React.FunctionComponent = () => { refInput={(input) => (emailInput = input)} icon="envelope" value={email} - onChangeText={(text) => setEmail(text)} + onChangeText={(text: string) => setEmail(text)} placeholder="Email" keyboardType="email-address" returnKeyType="next" - errorMessage={ - validEmail ? null : 'Please enter a valid email address' - } + errorMessage={validEmail ? '' : 'Please enter a valid email address'} onSubmitEditing={() => { validateEmail(); passwordInput.focus(); @@ -167,12 +169,12 @@ const LoginScreen3: React.FunctionComponent = () => { refInput={(input) => (passwordInput = input)} icon="lock" value={password} - onChangeText={(text) => setPassword(text)} + onChangeText={(text: string) => setPassword(text)} placeholder="Password" secureTextEntry returnKeyType="next" errorMessage={ - validPassword ? null : 'Please enter at least 8 characters' + validPassword ? '' : 'Please enter at least 8 characters' } onSubmitEditing={() => { validatePassword(); @@ -183,12 +185,12 @@ const LoginScreen3: React.FunctionComponent = () => { refInput={(input) => (confirmationPasswordInput = input)} icon="lock" value={confirmationPassword} - onChangeText={(text) => setConfirmationPassword(text)} + onChangeText={(text: string) => setConfirmationPassword(text)} placeholder="Confirm Password" secureTextEntry errorMessage={ validConfirmationPassword - ? null + ? '' : 'The password fields are not identical' } returnKeyType="go" @@ -231,7 +233,15 @@ const LoginScreen3: React.FunctionComponent = () => { export default LoginScreen3; -export const UserTypeItem = (props) => { +type UserTypeItemType = { + image: ImageSourcePropType; + label?: string; + labelColor?: string; + selected?: boolean; + onPress?: () => void; +}; + +export const UserTypeItem = (props: UserTypeItemType) => { const { image, label, labelColor, selected, ...attributes } = props; return ( @@ -256,7 +266,13 @@ export const UserTypeItem = (props) => { ); }; -export const FormInput = (props) => { +type FormInputType = TextInputProps & { + icon: string; + refInput: React.Ref; + errorMessage: string; +}; + +export const FormInput = (props: FormInputType) => { const { icon, refInput, ...otherProps } = props; return ( @@ -285,7 +301,7 @@ const styles = StyleSheet.create({ paddingBottom: 20, paddingTop: 20, backgroundColor: '#293046', - width:"100%", + width: '100%', height: SCREEN_HEIGHT, alignItems: 'center', justifyContent: 'space-around', diff --git a/src/views/login/screen3.tsx b/src/views/login/screen3.tsx index 1188cd85..8f6c2376 100644 --- a/src/views/login/screen3.tsx +++ b/src/views/login/screen3.tsx @@ -44,11 +44,15 @@ type LoginScreen2State = { passwordConfirmation: string; }; -export default class LoginScreen2 extends Component<{}, LoginScreen2State> { +type LoginScreen2Props = {}; +export default class LoginScreen2 extends Component< + LoginScreen2Props, + LoginScreen2State +> { emailInput: any; passwordInput: any; confirmationInput: any; - constructor(props) { + constructor(props: LoginScreen2Props) { super(props); this.state = { email: '', @@ -65,7 +69,7 @@ export default class LoginScreen2 extends Component<{}, LoginScreen2State> { this.signUp = this.signUp.bind(this); } - selectCategory(selectedCategory) { + selectCategory(selectedCategory: number) { LayoutAnimation.easeInEaseOut(); this.setState({ selectedCategory, @@ -73,7 +77,7 @@ export default class LoginScreen2 extends Component<{}, LoginScreen2State> { }); } - validateEmail(email) { + validateEmail(email: string) { var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } @@ -89,8 +93,7 @@ export default class LoginScreen2 extends Component<{}, LoginScreen2State> { isEmailValid: this.validateEmail(email) || this.emailInput.shake(), isPasswordValid: password.length >= 8 || this.passwordInput.shake(), }); - if(this.state.isEmailValid && - this.state.isPasswordValid) + if (this.state.isEmailValid && this.state.isPasswordValid) Alert.alert('🔥', 'Successfully Logged In'); }, 1500); } @@ -108,9 +111,11 @@ export default class LoginScreen2 extends Component<{}, LoginScreen2State> { isConfirmationValid: password === passwordConfirmation || this.confirmationInput.shake(), }); - if(this.state.isEmailValid && - this.state.isPasswordValid && - this.state.isConfirmationValid) + if ( + this.state.isEmailValid && + this.state.isPasswordValid && + this.state.isConfirmationValid + ) Alert.alert('🙏', 'Welcome'); }, 1500); } @@ -189,7 +194,7 @@ export default class LoginScreen2 extends Component<{}, LoginScreen2State> { autoCorrect={false} keyboardType="email-address" returnKeyType="next" - inputStyle={{ marginLeft: 10, color: 'grey'}} + inputStyle={{ marginLeft: 10, color: 'grey' }} placeholder={'Email'} containerStyle={{ borderBottomColor: 'rgba(0, 0, 0, 0.38)', @@ -198,7 +203,7 @@ export default class LoginScreen2 extends Component<{}, LoginScreen2State> { onSubmitEditing={() => this.passwordInput.focus()} onChangeText={(text) => this.setState({ email: text })} errorMessage={ - isEmailValid ? null : 'Please enter a valid email address' + isEmailValid ? '' : 'Please enter a valid email address' } /> { } onChangeText={(text) => this.setState({ password: text })} errorMessage={ - isPasswordValid - ? null - : 'Please enter at least 8 characters' + isPasswordValid ? '' : 'Please enter at least 8 characters' } /> {isSignUpPage && ( @@ -266,9 +269,7 @@ export default class LoginScreen2 extends Component<{}, LoginScreen2State> { this.setState({ passwordConfirmation: text }) } errorMessage={ - isConfirmationValid - ? null - : 'Please enter the same password' + isConfirmationValid ? '' : 'Please enter the same password' } /> )} @@ -302,7 +303,7 @@ const styles = StyleSheet.create({ container: { flexGrow: 1, paddingBottom: 20, - width:"100%", + width: '100%', height: SCREEN_HEIGHT, alignItems: 'center', justifyContent: 'space-around', @@ -360,7 +361,7 @@ const styles = StyleSheet.create({ flex: 1, top: 0, left: 0, - width:"100%", + width: '100%', height: SCREEN_HEIGHT, justifyContent: 'center', alignItems: 'center', diff --git a/src/views/settings.tsx b/src/views/settings.tsx index 29afa5ba..c93ca3ff 100644 --- a/src/views/settings.tsx +++ b/src/views/settings.tsx @@ -21,7 +21,7 @@ const TEAL_BLUE = '#5AC8FA'; type SettingData = { title?: string; - icon?: string; + icon: string; backgroundColor?: string; hideChevron?: boolean; checkbox?: boolean; @@ -125,7 +125,7 @@ const sections: SettingsData[] = [ { title: 'Confidentiality', backgroundColor: GREY, - icon: 'ios-hand', + icon: 'ios-hand-left', }, ], }, From 2c9ff5b57c55d812ab7b11ab4c8bace98b74a712 Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Fri, 16 Apr 2021 13:23:51 +0530 Subject: [PATCH 3/4] fix themereducer tsc issue --- src/helpers/ThemeReducer.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/helpers/ThemeReducer.tsx b/src/helpers/ThemeReducer.tsx index 90e71e73..a5b12126 100644 --- a/src/helpers/ThemeReducer.tsx +++ b/src/helpers/ThemeReducer.tsx @@ -1,7 +1,10 @@ import React from 'react'; export const initialState = { themeMode: 'light' }; -export function ThemeReducer(state, action) { +export function ThemeReducer( + state: { themeMode: string }, + action: { type: string; payload: string } +) { const { payload } = action; switch (action.type) { case 'set-theme': @@ -12,4 +15,7 @@ export function ThemeReducer(state, action) { } // added null in the create context so that tsc issues are fixed. Refer https://stackoverflow.com/questions/54577865/react-createcontext-issue-in-typescript/54667477 -export const ThemeReducerContext = React.createContext(null); +export const ThemeReducerContext = React.createContext({ + ThemeState: { themeMode: 'light' }, + dispatch: ({ type, payload }) => {}, +}); From 9176b7b864a52492fe9f442b21ddab65284ab3ff Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Fri, 16 Apr 2021 17:34:48 +0530 Subject: [PATCH 4/4] fix khushal87 typescript usage pattern --- src/views/avatars.tsx | 2 +- src/views/lists/content.tsx | 14 +++++++------- src/views/lists2.tsx | 14 +++++++------- src/views/social_icons.tsx | 10 +++++----- tsconfig.json | 2 +- 5 files changed, 21 insertions(+), 21 deletions(-) diff --git a/src/views/avatars.tsx b/src/views/avatars.tsx index a7d240d2..69706b98 100644 --- a/src/views/avatars.tsx +++ b/src/views/avatars.tsx @@ -5,7 +5,7 @@ import { Avatar } from 'react-native-elements'; import { Header, SubHeader } from './header'; type AvatarData = { - image_url?: string; + image_url: string; }; const dataList: AvatarData[] = [ diff --git a/src/views/lists/content.tsx b/src/views/lists/content.tsx index 330b1f51..a4ade6a5 100644 --- a/src/views/lists/content.tsx +++ b/src/views/lists/content.tsx @@ -4,13 +4,13 @@ import { Text, View, ScrollView } from 'react-native'; import { Avatar, Button, Icon, Theme, withTheme } from 'react-native-elements'; type UserData = { - name?: string; - avatar?: string; - value?: string; - positive?: boolean; + name: string; + avatar: string; + value: string; + positive: boolean; }; -const USERS = [ +const USERS: Partial[] = [ { name: 'John Smith', avatar: 'https://uifaces.co/our-content/donated/1H_7AxP0.jpg', @@ -55,7 +55,7 @@ type ListContentType = { }; const ListContent = (props: ListContentType) => { - const renderValue = (user: UserData) => { + const renderValue = (user: Partial) => { const { value, positive } = user; if (positive) { @@ -115,7 +115,7 @@ const ListContent = (props: ListContentType) => { } }; - const renderCard = (user: UserData, index: React.Key) => { + const renderCard = (user: Partial, index: React.Key) => { const { name, avatar } = user; return ( console.log('this is an example method'); type List1Data = { - title?: string; + title: string; icon: string; }; const list1: List1Data[] = [ @@ -43,13 +43,13 @@ const list1: List1Data[] = [ ]; type List2Data = { - name?: string; - avatar_url?: string; - subtitle?: string; - linearGradientColors?: string[]; + name: string; + avatar_url: string; + subtitle: string; + linearGradientColors: string[]; }; -const list2: List2Data[] = [ +const list2: Partial[] = [ { name: 'Amy Farha', avatar_url: 'https://uifaces.co/our-content/donated/XdLjsJX_.jpg', @@ -159,7 +159,7 @@ const Lists2: React.FunctionComponent = () => { setExpanded(!expanded); }} > - {list2.map((l: List2Data, i: React.Key) => ( + {list2.map((l: Partial, i: React.Key) => ( diff --git a/src/views/social_icons.tsx b/src/views/social_icons.tsx index 77d03bae..cdeb1c38 100644 --- a/src/views/social_icons.tsx +++ b/src/views/social_icons.tsx @@ -6,11 +6,11 @@ import { SocialMediaType } from 'react-native-elements/dist/social/SocialIcon'; import _ from 'lodash'; type IconData = { - type?: SocialMediaType; - iconType?: string; + type: SocialMediaType; + iconType: string; }; -const dataList: IconData[] = [ +const dataList: Partial[] = [ { type: 'facebook', }, @@ -107,7 +107,7 @@ const SocialIcons: React.FunctionComponent = () => {
{_.chunk(dataList, 3).map( - (chunk: IconData[], chunkIndex: React.Key) => ( + (chunk: Partial[], chunkIndex: React.Key) => ( = () => { }} key={chunkIndex} > - {chunk.map((l: IconData, i: React.Key) => ( + {chunk.map((l: Partial, i: React.Key) => (