- Initial Setup
- Core Components
- View
- Text
- Image
- Scroll View
- Button
- Pressable
- Modal
- Status Bar
- Activity Indicator
- Alert
- Custom Components
- Project Structure
- StyleSheet API
- Multiple Styles
- Shadow and Elevation
- Style Inheritance
- Relative and Absolute Layout
- Dimensions API
- useWindowDimensions
- SafeAreaView
- Platform Specific Code
- FlatList
- Item Separator
- List Empty
- List Header and Footer
- SectionList
npm i -g expo-cliexpo init <project-name>cd <project-name>
npm startNote: Older version of Async Storage has been deprecated. Use the community package instead
npm install --save-dev react-native-svg-transformerFor Expo SDK v41.0.0 or newer Merge the contents from your project's metro.config.js file with this config (create the file if it does not exist already).
metro.config.js:
const { getDefaultConfig } = require("expo/metro-config");
module.exports = (() => {
const config = getDefaultConfig(__dirname);
const { transformer, resolver } = config;
config.transformer = {
...transformer,
babelTransformerPath: require.resolve("react-native-svg-transformer/expo"),
};
config.resolver = {
...resolver,
assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
sourceExts: [...resolver.sourceExts, "svg"],
};
return config;
})();Reference: React Native folder structure
AwesomeProject
-src
|--- assets
| |--- fonts
| |--- <<Your Fonts>>
| |--- images
| |--- << Your Images>>
|
|
|--- route
| |--- screenName
| | |--- index.js
| | |--- styles.ts
| | |--- helper.ts
| | |--- screenName.tsx
| | |--- screenName.test.tsx
| | |--- useAnimated.ts (Optional)
| | |--- components (Optional)
| |
| |--- screenName2
| |--- index.js
| |--- styles.ts
| |--- helper.ts
| |--- screenName.tsx
| |--- screenName.test.tsx
| |--- useAnimated.ts (Optional)
| |--- components (Optional)
|
|--- navigation
| |--- NavigationContainer
| |--- Route
| |--- NavigationService
| |--- linking
|
|--- networking
| |--- apiclient
| |--- requestInterceptor (Assuming axios)
| |--- responseInterceptor (Assuming axios)
| |--- urls
| |--- UserApi (You can create a file for a group of related api calls)
|
|--- components
| |---Button (This is will have same structure as the screen)
| | |--- index.ts
| | |--- Button.tsx
| | |--- styles.ts
| | |--- helper.ts
| | |--- useAnimated.ts (Optional)
| |
| |--- <<Any other component>>
|
|--- hooks
| |--- useBackHandler.ts
| |--- useKeyboard.ts
| |--- useUploadImage.ts
| |--- useCamera.ts
| |--- <<Any other hook>>
|
|--- types
| |--- UserInterface
| |--- MediaInterface
| |--- AppConfigInterface
|
|--- redux
| |--- store.ts
| |--- slices
| |--- UserSlice
| |--- IntermittentSlice
| |--- ToastSlice
|
|--- utils
| |--- Analytics.ts
| |--- CommonUtils.ts
| |--- Logger.ts
| |--- ErrorManager.ts
| |--- DateTimeUtils.ts
| |--- EncryptedStore.ts
| |--- string.ts
| |--- constants.ts
| |--- enums.ts
|
---------------------------- << MULTIPLE MODULE APP >> ----------------
|--- Module_Name
|--- routes
|--- components
|--- hooks