React Native for Better or Worst

Transcript

1. React Native for better or worst !
2. "
3. Radoslav Stankov @rstankov rstankov.com
7. # Side project
9. - implement a mobile app $ - one developer (me) ! - support iOS % / Android & - ship it as fast as possible '
10. Going native (swift/kotlin) wasn't an option
15. ( backed by Google ) uses Dart * cross platform + compiles to native machine code , custom components - battery included
17. . backed by Facebook / uses Javascript (or TypeScript) 0 uses React 1 cross platform 2 minimal 3 native and JS bridge 4 native components
18. React Native in 2019 was 5 React Native in 2021 was 6 React Native in 2022 was 7 React Native in 2023 still is 7
20. React Native is fast enough has a rich ecosystem Flutter is faster has more batteries included I have done 3 React Native apps previously I know React/TypeScript/GraphQL extremely well I don't know Dart I don't know Flutter
24. Expo in 2020 was ... 8 Expo in 2020 was ... 9 Expo in 2022 was ... 7 Expo in 2023 is ...:
26. $ Tech Stack
28. Architecture
32. 0 Make common operations easy 4 Have good code organization 1 Isolate dependencies + Extensibility and reusability
33. 0 Make common operations easy 4 Have good code organization 1 Isolate dependencies + Extensibility and reusability
34. 2 1 3 Support Components Screens
35. Support Components Screens
36. 1) Support 2) Components 3) Screens
37. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
38. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx 1 Support Components Pages 2 3
40. 3 Screens
42. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
43. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
44. { "expo": { "name": "Angry Building", "version": "1.48.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#252629" } }, // ... }
46. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
48. @react-navigation/native
51. ... I still don't use it, because it was released fairly recently ; ... however the way the app is setup, transition should be easy <
52. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
53. import screens from 'src/screens'; import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { createStackNavigator } from '@react-navigation/stack'; Sentry.init(); const RootStack = createStackNavigator(); export default function App() { return ( <ActionSheetProvider> <ApolloProvider client={apolloClient}> <NavigationContainer> <WithViewer> <RootStack.Navigator> <RootStack.Screen name="Main" component={TabsScreen} options={{ header <RootStack.Screen {...screens.apartmentNotOwning} /> <RootStack.Screen {...screens.apartmentOwning} /> <RootStack.Screen {...screens.apartmentUserCreate} /> <RootStack.Screen {...screens.issueCreate} /> <RootStack.Screen {...screens.serviceRequestCreate} /> <RootStack.Screen {...screens.services} /> </RootStack.Navigator> </WithViewer> </NavigationContainer> </ApolloProvider>
54. export default function App() { return ( <ActionSheetProvider> <ApolloProvider client={apolloClient}> <NavigationContainer> <WithViewer> <RootStack.Navigator> <RootStack.Screen name="Main" component={TabsScreen} options={{ header <RootStack.Screen {...screens.apartmentNotOwning} /> <RootStack.Screen {...screens.apartmentOwning} /> <RootStack.Screen {...screens.apartmentUserCreate} /> <RootStack.Screen {...screens.issueCreate} /> <RootStack.Screen {...screens.serviceRequestCreate} /> <RootStack.Screen {...screens.services} /> </RootStack.Navigator> </WithViewer> </NavigationContainer> </ApolloProvider> </ActionSheetProvider> ); } 14 pt
55. const Tab = createBottomTabNavigator(); function TabsScreen() { return ( <Tab.Navigator screenOptions={tabNavigatorOptions}> <Tab.Screen name="buildingTab" component={Screen} initialParams={{ initialRoute: screens.home.name }} options={/* ... */} /> <Tab.Screen name="apartmentTab" component={Screen} initialParams={{ initialRoute: screens.apartment.name }} options={/* ... */} /> <Tab.Screen name="bulletinBoardTab" component={Screen} initialParams={{ initialRoute: screens.bulletinBoard.name }} options={/* ... */} /> <Tab.Screen name="cashReserveTab" component={Screen} initialParams={{ initialRoute: screens.cashReserve.name }}
56. /> <Tab.Screen name="apartmentTab" component={Screen} initialParams={{ initialRoute: screens.apartment.name }} options={/* ... */} /> <Tab.Screen name="bulletinBoardTab" component={Screen} initialParams={{ initialRoute: screens.bulletinBoard.name }} options={/* ... */} /> <Tab.Screen name="cashReserveTab" component={Screen} initialParams={{ initialRoute: screens.cashReserve.name }} options={/* ... */} /> <Tab.Screen name="issuesTab" component={Screen} initialParams={{ initialRoute: screens.issues.name }} options={/* ... */} /> </Tab.Navigator> ); }
57. const ScreenStack = createStackNavigator(); function Screen(props) { const initialRoute = props.route.params.initialRoute; return ( <ScreenStack.Navigator initialRouteName={initialRoute}> <ScreenStack.Screen {...screens.apartmentHeatingMeasurements} /> <ScreenStack.Screen {...screens.apartmentNotes} /> <ScreenStack.Screen {...screens.apartmentPayments} /> <ScreenStack.Screen {...screens.apartmentTaxes} /> <ScreenStack.Screen {...screens.apartmentUnpaidTaxes} /> <ScreenStack.Screen {...screens.apartmentUsers} /> <ScreenStack.Screen {...screens.apartment} /> <ScreenStack.Screen {...screens.buildingNotes} /> <ScreenStack.Screen {...screens.bulletinBoardPostCreate} /> <ScreenStack.Screen {...screens.bulletinBoardPostUpdate} /> <ScreenStack.Screen {...screens.bulletinBoard} /> <ScreenStack.Screen {...screens.cashReserve} /> <ScreenStack.Screen {...screens.contacts} /> <ScreenStack.Screen {...screens.home} /> <ScreenStack.Screen {...screens.issues} /> <ScreenStack.Screen {...screens.messages} /> <ScreenStack.Screen {...screens.settings} /> <ScreenStack.Screen {...screens.votingPoll} /> </ScreenStack.Navigator> ); }
58. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
59. import apartment from './apartment'; import home from './home'; // ... export default { apartment, home, // ... };
60. Screen States Layout
61. Loading State Screen States Layout
62. Loading State Error State Screen States Layout
63. Loading State Not Found Error Server Error Authorization Error Authentication Error Error State Screen States Layout
64. Loading State Not Found Error Server Error Authorization Error Authentication Error Error State Loaded State Screen States Layout
65. Loading State Not Found Error Server Error Authorization Error Authentication Error Error State Loaded State render Screen States Layout
66. interface IOptions<D, P> { name: string; query?: DocumentNode; queryVariables?: object | ((params: P) => object); queryRefreshOnShow?: boolean; component: IComponent<D, P>; type?: keyof typeof layouts; headerTitle?: ITranslation; background: IBackground; } interface IScreen { name: string; options: StackNavigationOptions; component: any; } export default function createScreen<D = any, P = any>(options: IOptions<D, P>): IScreen // ... }
67. screens/[name]/index.ts (createScreen) -> screens/index.ts -> app.ts
68. export default createScreen<IHomeScreen>({ name: 'home', type: 'plain', query: QUERY, background: 'black', component({ data, fetchMore, refetch }) { usePushNotificationsRegister(); usePushNotificationHandle(data.viewer); return ( <View style={styles.container}> <ImageBackground resizeMode="cover" source={image} style={styles.topBackgroun <View style={styles.bottomBackground} /> <BuildingApartmentsList refetch={refetch} fetchMore={fetchMore} building={data.building} /> <ReportIssueButton /> </View> ); }, });
69. ▾ src/ ▾ screens/ ▾ home/ ▸ Status/ background.png BuildingApartmentsList.tsx Header.tsx index.tsx Query.ts SelectEntrancePicker.tsx
70. http://graphql.org/
72. graphql-codegen --config codegen.yml
73. components/ApartmentStatus/Fragment.tsx import { gql } from '@apollo/client'; export default gql` fragment IApartmentStatusFragment on Apartment { id number name overdueAmount } `;
74. types/grahpql.ts export type IApartmentStatusFragment = { __typename: 'Apartment'; id: string; number?: string | null; name?: string | null; overdueAmount: number; };
75. import { IApartmentStatusFragment } from '~/types/graphql';
76. import { gql } from '@apollo/client'; import IHomeScreenStatusFragment from './Status/Fragment'; import IApartmentStatusFragment from 'src/components/ApartmentStatus/Fragment'; export default gql` query IHomeScreen($cursor: String) { building { id name apartments(first: 100, after: $cursor) { nodes { id name floor isViewerSelected ...IApartmentStatusFragment } pageInfo { hasNextPage endCursor } } ...IHomeScreenStatusFragment } } ${IHomeScreenStatusFragment} ${IApartmentStatusFragment} `; screens/home/Query.ts
77. Query Fragment Fragment Fragment Fragment Fragment Fragment
78. Screen Component Component Component Component Component Component
80. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
81. import routes from '~/routes'; 
 routes.back; routes.home; routes.bulletinBoardPostUpdate(post);
82. <Button to={routes.home} />
83. import { useNavigation } from '@react-navigation/native'; import screens from 'src/screens'; type IScreenName = keyof typeof screens; export type IRoute = | { transition: 'goBack' } | { screen: IScreenName; params?: IParams; root?: boolean } | { screen: 'buildingTab' | 'apartmentTab' | 'cashReserveTab' | 'issuesTab'; params?: IParams; root: true; }; const routes = { back: { transition: 'goBack' } as IRoute, home: { root: true, screen: 'buildingTab' } as IRoute, // ... bulletinBoardPostUpdate(post: { id: string }) { return { screen: 'bulletinBoardPostUpdate', params: { post }, } as IRoute; }, };
84. import { useNavigation } from '@react-navigation/native'; import screens from 'src/screens'; type IScreenName = keyof typeof screens; export type IRoute = | { transition: 'goBack' } | { screen: IScreenName; params?: IParams; root?: boolean } | { screen: 'buildingTab' | 'apartmentTab' | 'cashReserveTab' | 'issuesTab'; params?: IParams; root: true; }; const routes = { back: { transition: 'goBack' } as IRoute, home: { root: true, screen: 'buildingTab' } as IRoute, // ... bulletinBoardPostUpdate(post: { id: string }) { return { screen: 'bulletinBoardPostUpdate', params: { post }, } as IRoute; }, };
85. import { useNavigation } from '@react-navigation/native'; import screens from 'src/screens'; type IScreenName = keyof typeof screens; export type IRoute = | { transition: 'goBack' } | { screen: IScreenName; params?: IParams; root?: boolean } | { screen: 'buildingTab' | 'apartmentTab' | 'cashReserveTab' | 'issuesTab'; params?: IParams; root: true; }; const routes = { back: { transition: 'goBack' } as IRoute, home: { root: true, screen: 'buildingTab' } as IRoute, // ... bulletinBoardPostUpdate(post: { id: string }) { return { screen: 'bulletinBoardPostUpdate', params: { post }, } as IRoute; }, };
86. import { useNavigation } from '@react-navigation/native'; import screens from 'src/screens'; type IScreenName = keyof typeof screens; export type IRoute = | { transition: 'goBack' } | { screen: IScreenName; params?: IParams; root?: boolean } | { screen: 'buildingTab' | 'apartmentTab' | 'cashReserveTab' | 'issuesTab'; params?: IParams; root: true; }; const routes = { back: { transition: 'goBack' } as IRoute, home: { root: true, screen: 'buildingTab' } as IRoute, // ... bulletinBoardPostUpdate(post: { id: string }) { return { screen: 'bulletinBoardPostUpdate', params: { post }, } as IRoute; }, };
87. | { screen: IScreenName; params?: IParams; root?: boolean } | { screen: 'buildingTab' | 'apartmentTab' | 'cashReserveTab' | 'issuesTab'; params?: IParams; root: true; }; const routes = { back: { transition: 'goBack' } as IRoute, home: { root: true, screen: 'buildingTab' } as IRoute, // ... bulletinBoardPostUpdate(post: { id: string }) { return { screen: 'bulletinBoardPostUpdate', params: { post }, } as IRoute; }, }; export default routes; export interface INavigation { navigate: (screen: string, params?: IParams) => void; goBack: VoidFunction; }
88. | { screen: IScreenName; params?: IParams; root?: boolean } | { screen: 'buildingTab' | 'apartmentTab' | 'cashReserveTab' | 'issuesTab'; params?: IParams; root: true; }; const routes = { back: { transition: 'goBack' } as IRoute, home: { root: true, screen: 'buildingTab' } as IRoute, // ... bulletinBoardPostUpdate(post: { id: string }) { return { screen: 'bulletinBoardPostUpdate', params: { post }, } as IRoute; }, }; export default routes; export interface INavigation { navigate: (screen: string, params?: IParams) => void; goBack: VoidFunction; }
89. import { useNavigation } from '@react-navigation/native'; import screens from 'src/screens'; type IScreenName = keyof typeof screens; export type IRoute = | { transition: 'goBack' } | { screen: IScreenName; params?: IParams; root?: boolean } | { screen: 'buildingTab' | 'apartmentTab' | 'cashReserveTab' | 'issuesTab'; params?: IParams; root: true; }; const routes = { back: { transition: 'goBack' } as IRoute, home: { root: true, screen: 'buildingTab' } as IRoute, // ... bulletinBoardPostUpdate(post: { id: string }) { return { screen: 'bulletinBoardPostUpdate', params: { post }, } as IRoute; }, };
90. export interface INavigation { navigate: (screen: string, params?: IParams) => void; goBack: VoidFunction; } export function navigate(navigation: INavigation, to: IRoute) { if ('transition' in to) { navigation.goBack(); } else if (to.root) { navigation.navigate('Main', to); } else { navigation.navigate(to.screen, to.params); } } export function useNavigate() { const navigation: any = useNavigation(); const fn = React.useCallback( (to: IRoute) => { navigate(navigation, to); }, [navigation], ); return fn; }
91. import routes, { useNavigate } from '~/routes'; export function MyComponent() { const navigate = useNavigate(); const onPress = () => { navigate(routes.home); } return ( <TouchableOpacity onPress={onPress}> <Text>Visit product</Text> </TouchableOpacity> ); }
92. 2 Components
93. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
95. = Component as directory components/ PublicComponent/ PrivateSubComponent/ Fragment.graphql Mutation.graphql index.ts styles.ts utils.ts
96. <Text bold={true} size="l" color="black">Only use this component</Text>
97. <Button to={routes.profile(profile)} />
98. <Button to={routes.profile(profile)} /> <Button onPress={onClickReturnsPromise} />
99. <Button to={routes.profile(profile)} /> <Button onPress={onClickReturnsPromise} /> <Button onPress={onClickReturnsPromise} confirm="Are you sure?" requireLogin={true} />
100. <Button to={routes.profile(profile)} /> <Button onPress={onClickReturnsPromise} /> <Button onPress={onClickReturnsPromise} confirm="Are you sure?" requireLogin={true} /> <Button mutation={MUTATION} input={input} onMutate={onMutate} />
101. <Button.Text {...props} /> <Button.Icon {...props} /> <Button.Solid {...props} /> <Button.Outline {...props} />
103. <Flex.Row>{...}</Flex.Row> <Flex.Column>{...}</Flex.Column>
104. 1 Support
106. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
107. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
108. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
109. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
110. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
111. > ? @
112. i18next
113. ▾ src/ ▾ translations/ bg.json en.json es.json index.ts
114. import i18n from 'i18next'; import captureError from 'src/utils/captureError'; import { isProduction } from 'src/config'; import bg from './bg.json'; import en from './en.json'; import es from './es.json'; // NOTE(rstankov): Documentation https://www.i18next.com/overview/configuration-optio i18n.init({ resources: { bg: { translation: bg, }, en: { translation: en, }, es: { translation: es, }, }, lng: 'bg', saveMissing: true, missingKeyHandler: (_lngs: any, _ns: string, key: string, _fallbackValue: any) => { if (isProduction) { captureError(`Key not found t('${key}')`);
115. import i18n from 'i18next'; import captureError from 'src/utils/captureError'; import { isProduction } from 'src/config'; import bg from './bg.json'; import en from './en.json'; import es from './es.json'; // NOTE(rstankov): Documentation https://www.i18next.com/overview/configuration-optio i18n.init({ resources: { bg: { translation: bg, }, en: { translation: en, }, es: { translation: es, }, }, lng: 'bg', saveMissing: true, missingKeyHandler: (_lngs: any, _ns: string, key: string, _fallbackValue: any) => { if (isProduction) { captureError(`Key not found t('${key}')`);
116. import i18n from 'i18next'; import captureError from 'src/utils/captureError'; import { isProduction } from 'src/config'; import bg from './bg.json'; import en from './en.json'; import es from './es.json'; // NOTE(rstankov): Documentation https://www.i18next.com/overview/configuration-optio i18n.init({ resources: { bg: { translation: bg, }, en: { translation: en, }, es: { translation: es, }, }, lng: 'bg', saveMissing: true, missingKeyHandler: (_lngs: any, _ns: string, key: string, _fallbackValue: any) => { if (isProduction) { captureError(`Key not found t('${key}')`);
117. // NOTE(rstankov): Documentation https://www.i18next.com/overview/configuration-optio i18n.init({ resources: { bg: { translation: bg, }, en: { translation: en, }, es: { translation: es, }, }, lng: 'bg', saveMissing: true, missingKeyHandler: (_lngs: any, _ns: string, key: string, _fallbackValue: any) => { if (isProduction) { captureError(`Key not found t('${key}')`); return key; } throw new Error(`Key not found t('${key}')`); }, compatibilityJSON: 'v3', });
118. // NOTE(rstankov): Documentation https://www.i18next.com/overview/configuration-optio i18n.init({ resources: { bg: { translation: bg, }, en: { translation: en, }, es: { translation: es, }, }, lng: 'bg', saveMissing: true, missingKeyHandler: (_lngs: any, _ns: string, key: string, _fallbackValue: any) => { if (isProduction) { captureError(`Key not found t('${key}')`); return key; } throw new Error(`Key not found t('${key}')`); }, compatibilityJSON: 'v3', });
119. // NOTE(rstankov): Documentation https://www.i18next.com/overview/configuration-optio i18n.init({ resources: { bg: { translation: bg, }, en: { translation: en, }, es: { translation: es, }, }, lng: 'bg', saveMissing: true, missingKeyHandler: (_lngs: any, _ns: string, key: string, _fallbackValue: any) => { if (isProduction) { captureError(`Key not found t('${key}')`); return key; } throw new Error(`Key not found t('${key}')`); }, compatibilityJSON: 'v3', });
120. captureError(`Key not found t('${key}')`); return key; } throw new Error(`Key not found t('${key}')`); }, compatibilityJSON: 'v3', }); export type ITranslation = keyof typeof bg; export type ILanguage = 'bg' | 'en' | 'es'; export default i18n.t as (key: keyof typeof bg, interpolations?: any) => string; export function changeLanguage(newLanguage: ILanguage) { if (i18n.language === newLanguage) { return; } return i18n.changeLanguage(newLanguage); }
121. export type ITranslation = keyof typeof bg; export type ILanguage = 'bg' | 'en' | 'es'; export default i18n.t as (key: keyof typeof bg, interpolations?: any) => string; export function changeLanguage(newLanguage: ILanguage) { if (i18n.language === newLanguage) { return; } return i18n.changeLanguage(newLanguage); }
122. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
123. import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import s from 'src/styles'; import Logo from 'src/components/Logo'; export default React.memo(function Ribbon() { return ( <> <View style={styles.topBackground}> <Logo height={127} /> </View> <View style={styles.container}> <View style={styles.view} /> </View> </> ); }); const styles = StyleSheet.create({ container: { backgroundColor: s.colors.black, }, view: { marginTop: 10, borderTopLeftRadius: s.radius, borderTopRightRadius: s.radius, width: '100%',
124. import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import s from 'src/styles'; import Logo from 'src/components/Logo'; export default React.memo(function Ribbon() { return ( <> <View style={styles.topBackground}> <Logo height={127} /> </View> <View style={styles.container}> <View style={styles.view} /> </View> </> ); }); const styles = StyleSheet.create({ container: { backgroundColor: s.colors.black, }, view: { marginTop: 10, borderTopLeftRadius: s.radius, borderTopRightRadius: s.radius, width: '100%',
125. import * as React from 'react'; import { View, StyleSheet } from 'react-native'; import s from 'src/styles'; import Logo from 'src/components/Logo'; export default React.memo(function Ribbon() { return ( <> <View style={styles.topBackground}> <Logo height={127} /> </View> <View style={styles.container}> <View style={styles.view} /> </View> </> ); }); const styles = StyleSheet.create({ container: { backgroundColor: s.colors.black, }, view: { marginTop: 10, borderTopLeftRadius: s.radius, borderTopRightRadius: s.radius, width: '100%',
126. }); const styles = StyleSheet.create({ container: { backgroundColor: s.colors.black, }, view: { marginTop: 10, borderTopLeftRadius: s.radius, borderTopRightRadius: s.radius, width: '100%', height: s.radius * 2, marginBottom: -s.radius, backgroundColor: s.colors.white, }, topBackground: { position: 'absolute', top: -500, height: 500, right: 0, left: 0, backgroundColor: s.colors.black, alignItems: 'center', justifyContent: 'flex-end', paddingBottom: s.spacing.l, }, });
127. const styles = StyleSheet.create({ container: { backgroundColor: s.colors.black, }, view: { marginTop: 10, borderTopLeftRadius: s.radius, borderTopRightRadius: s.radius, width: '100%', height: s.radius * 2, marginBottom: -s.radius, backgroundColor: s.colors.white, }, topBackground: { position: 'absolute', top: -500, height: 500, right: 0, left: 0, backgroundColor: s.colors.black, alignItems: 'center', justifyContent: 'flex-end', paddingBottom: s.spacing.l, }, });
128. <Flex marginLeft="m" /> <Button marginLeft="m" /> <Text marginLeft="m" />
129. <Flex paddingLeft="l" /> <Button paddingLeft="l" /> <Text paddingLeft="l" />
130. import variables from 'src/styles'; export type ISpacing = keyof typeof spacing; export interface ISpacingProps { marginBottom?: ISpacing | null; marginHorizontal?: ISpacing | null; marginLeft?: ISpacing | null; marginRight?: ISpacing | null; marginTop?: ISpacing | null; marginVertical?: ISpacing | null; margin?: ISpacing | null; padding?: ISpacing | null; paddingBottom?: ISpacing | null; paddingHorizontal?: ISpacing | null; paddingLeft?: ISpacing | null; paddingRight?: ISpacing | null; paddingTop?: ISpacing | null; paddingVertical?: ISpacing | null; } export function spacingStyle(props: ISpacingProps, style: any = {}) { if (props.marginTop) { style.marginTop = variables.spacing[props.marginTop]; } // ... return style; }
131. import { spacingStyle, ISpacing } from '~/styles/spacing'; interface IProps extends ISpacingProps { someProps: any, // ... } function MyComponent(props) { // ... return ( <View style={spacingStyle(props)}> {/* ... */} </View> ); }
135. Thanks A