React Mid Game

Transcript

1. React Native Midgame
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
21. source: https://refactoring.fm/p/how-to-choose-technology
25. Expo in 2020 was ... 8 Expo in 2020 was ... 9 Expo in 2022 was ... 7 Expo in 2023 is ...:
27. # Tech Stack
29. Architecture
33. 0 Make common operations easy 4 Static type-safety 1 Isolate dependencies + Extensibility and reusability
34. 0 Make common operations easy 4 Static type-safety 1 Isolate dependencies + Extensibility and reusability
35. 2 1 3 Support Components Screens
36. Support Components Screens
37. 1) Support 2) Components 3) Screens
38. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
39. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx 1 Support Components Pages 2 3
41. 3 Screens
43. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
44. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
45. { "expo": { "name": "Angry Building", "version": "1.48.0", "orientation": "portrait", "icon": "./assets/icon.png", "splash": { "image": "./assets/splash.png", "resizeMode": "contain", "backgroundColor": "#252629" } }, // ... }
47. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
49. @react-navigation/native
52. ... I still don't use it, because it was released fairly recently ; ... however the way the app is setup, transition should be easy <
53. Overlay
54. Overlay Tab Navigation
55. Overlay Tab Navigation Stack Navigation Title
56. Overlay Tab Navigation Stack Navigation Title Screen
57. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
58. 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>
59. 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> ); }
60. 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 }}
61. /> <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> ); }
62. 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> ); }
63. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
64. import apartment from './apartment'; import home from './home'; // ... export default { apartment, home, // ... };
65. Screen States Layout
66. Loading State Screen States Layout
67. Loading State Error State Screen States Layout
68. Loading State Not Found Error Server Error Authorization Error Authentication Error Error State Screen States Layout
69. Loading State Not Found Error Server Error Authorization Error Authentication Error Error State Loaded State Screen States Layout
70. Loading State Not Found Error Server Error Authorization Error Authentication Error Error State Loaded State render Screen States Layout
71. 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 // ... }
72. screens/[name]/index.ts (createScreen) -> screens/index.ts -> app.ts
73. 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> ); }, });
74. ▾ src/ ▾ screens/ ▾ home/ ▸ Status/ background.png BuildingApartmentsList.tsx Header.tsx index.tsx Query.ts SelectEntrancePicker.tsx
75. http://graphql.org/
77. graphql-codegen --config codegen.yml
78. components/ApartmentStatus/Fragment.tsx import { gql } from '@apollo/client'; export default gql` fragment IApartmentStatusFragment on Apartment { id number name overdueAmount } `;
79. types/grahpql.ts export type IApartmentStatusFragment = { __typename: 'Apartment'; id: string; number?: string | null; name?: string | null; overdueAmount: number; };
80. import { IApartmentStatusFragment } from '~/types/graphql';
81. 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
82. Screen Component Component Component Component Component Component
83. Query Fragment Fragment Fragment Fragment Fragment Fragment
85. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
86. import routes from '~/routes'; 
 routes.back; routes.home; routes.bulletinBoardPostUpdate(post);
87. <Button to={routes.home} />
88. 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; }, };
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. 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; }, };
91. 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; }, };
92. | { 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; }
93. | { 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; }
94. 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; }, };
95. 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; }
96. 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> ); }
97. 2 Components
98. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
100. If component is used in more than 1 screens then goes to src/components
101. = generic components > domain components
102. [Domain][Name][Type]
103. ? Component as directory components/ PublicComponent/ PrivateSubComponent/ Fragment.ts Mutation.ts index.ts styles.ts utils.ts
104. ? Component as directory components/ PublicComponent/ PrivateSubComponent/ Fragment.ts Mutation.ts index.ts styles.ts utils.ts
105. <Text bold={true} size="l" color="black">Text</Text>
106. <Button to={routes.profile(profile)} />
107. <Button to={routes.profile(profile)} /> <Button onPress={onClickReturnsPromise} />
108. <Button to={routes.profile(profile)} /> <Button onPress={onClickReturnsPromise} /> <Button onPress={onClickReturnsPromise} confirm="Are you sure?" requireLogin={true} />
109. <Button to={routes.profile(profile)} /> <Button onPress={onClickReturnsPromise} /> <Button onPress={onClickReturnsPromise} confirm="Are you sure?" requireLogin={true} /> <Button mutation={MUTATION} input={input} onMutate={onMutate} />
110. <Button.Text {...props} /> <Button.Icon {...props} /> <Button.Solid {...props} /> <Button.Outline {...props} />
112. <Flex.Row>{...}</Flex.Row> <Flex.Column>{...}</Flex.Column>
113. <Flex.Row gap="m">{...}</Flex.Row> <Flex.Column gap="m">{...}</Flex.Column>
114. 1 Support
116. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
117. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
118. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
119. import { format } from 'date-fns'; export function formatDateTime(date: string) { return format(date, 'H:mm A · MMM D, YYYY'); } utils/date.ts
120. moment date.ts Component Page
121. date.ts Component Page date-fns
122. utils/ external/ Intercom/ OneSignal/ Segment/ Sentry/
123. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
124. useGraphQLFragment() useViewier() useIsLoggedIn()
125. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
126. @ A B
127. i18next
128. ▾ src/ ▾ translations/ bg.json en.json es.json index.ts
129. 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}')`);
130. 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}')`);
131. 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}')`);
132. // 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', });
133. // 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', });
134. // 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', });
135. 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); }
136. 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); }
137. ▾ src/ ▸ components/ ▸ hooks/ ▸ screens/ ▸ styles/ ▸ translations/ ▸ types/ ▸ utils/ config.ts routes.ts app.json App.tsx
138. 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%',
139. 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%',
140. 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%',
141. }); 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, }, });
142. 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, }, });
143. <Flex marginLeft="m" /> <Button marginLeft="m" /> <Text marginLeft="m" />
144. <Flex paddingLeft="l" /> <Button paddingLeft="l" /> <Text paddingLeft="l" />
145. 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; }
146. import { spacingStyle, ISpacing } from '~/styles/spacing'; interface IProps extends ISpacingProps { someProps: any, // ... } function MyComponent(props) { // ... return ( <View style={spacingStyle(props)}> {/* ... */} </View> ); }