mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-03-12 17:51:53 +08:00
chore: sync content to repo (#9422)
Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
ec19f63eec
commit
50b5fcdbfb
@@ -4,4 +4,4 @@ The `ActivityIndicator` is a core component in React Native that provides a simp
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Activity Indicator](https://reactnative.dev/docs/activityindicator)
|
||||
- [@official@Activity Indicator](https://reactnative.dev/docs/activityindicator)
|
||||
@@ -10,4 +10,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Animations](https://reactnative.dev/docs/animations)
|
||||
- [@official@LayoutAnimations](https://reactnative.dev/docs/layoutanimation)
|
||||
- [@official@Animated](https://reactnative.dev/docs/animated)
|
||||
- [@official@Animated](https://reactnative.dev/docs/animated)
|
||||
@@ -2,6 +2,6 @@
|
||||
|
||||
Appium is an open-source test automation framework for mobile devices, targeting native, hybrid, or mobile-web apps for iOS, Android, and Windows platforms. Appium works with multiple programming languages, including JavaScript, Ruby, Python, Java, and C#. Appium uses the WebDriver protocol, which allows you to write tests that can interact with your app through a series of commands. The WebDriver protocol interprets these commands into actions that are then performed on the app.
|
||||
|
||||
Learn more from the following resources:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Appium Documentation](https://appium.io/docs/en/latest/)
|
||||
@@ -5,4 +5,4 @@ The App Store is Apple's official platform for distributing iOS apps to users wi
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Publishing to Apple App Store](https://reactnative.dev/docs/publishing-to-app-store)
|
||||
- [@feed@Explore top posts about App Store](https://app.daily.dev/tags/app-store?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about App Store](https://app.daily.dev/tags/app-store?ref=roadmapsh)
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
Authentication is a crucial aspect of securing your React Native application. It enables you to verify the identity of users and give access to protected resources and features. Here are the common methods used for authentication in React Native:
|
||||
|
||||
- JWT Authentication
|
||||
- OAuth
|
||||
- Simple Token Authentication
|
||||
* JWT Authentication
|
||||
* OAuth
|
||||
* Simple Token Authentication
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Authentication and Deep Linking](https://reactnative.dev/docs/security#authentication-and-deep-linking)
|
||||
- [@feed@Explore top posts about Authentication](https://app.daily.dev/tags/authentication?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about Authentication](https://app.daily.dev/tags/authentication?ref=roadmapsh)
|
||||
@@ -4,4 +4,4 @@ A `Button` is a built-in React Native component used to create clickable buttons
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Button](https://reactnative.dev/docs/button)
|
||||
- [@official@Button](https://reactnative.dev/docs/button)
|
||||
@@ -4,4 +4,4 @@ In React Native, several common issues can impact application performance. Exces
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Performance Problems](https://reactnative.dev/docs/performance#common-sources-of-performance-problems)
|
||||
- [@official@Performance Problems](https://reactnative.dev/docs/performance#common-sources-of-performance-problems)
|
||||
@@ -5,4 +5,4 @@ React components are the building blocks of the user interface (UI) in a React a
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Components](https://react.dev/learn/your-first-component)
|
||||
- [@official@Props](https://react.dev/learn/passing-props-to-a-component)
|
||||
- [@official@Props](https://react.dev/learn/passing-props-to-a-component)
|
||||
@@ -4,4 +4,4 @@ Connectivity refers to the mechanisms that allow data transfer between your Reac
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
|
||||
- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
|
||||
@@ -2,14 +2,14 @@
|
||||
|
||||
Core components are the essential building blocks provided by React Native to create a user interface for mobile applications. They are platform-agnostic, meaning they work across both iOS and Android devices. Some of the common core components include:
|
||||
|
||||
- `View` is a fundamental component for constructing the user interface. It is equivalent to a `div` in HTML and can be used as a container for other components.
|
||||
- `Text` is used to display text content in your app. It is similar to the `p` or `span` elements in HTML.
|
||||
- `TextInput` is a basic input field that allows users to type text into your app. It is similar to the `input` element in HTML.
|
||||
- `TouchableOpacity` is a wrapper for making elements like `View` and `Text` respond properly to touch events. It provides feedback by reducing the opacity of the wrapped component when pressed.
|
||||
- `ScrollView` is a scrollable container that allows users to scroll through its content. It is useful when you have content that exceeds the available screen size.
|
||||
- `FlatList` is used to render a list of items using a performant approach. It only renders items that are currently visible on the screen and removes others to save memory.
|
||||
* `View` is a fundamental component for constructing the user interface. It is equivalent to a `div` in HTML and can be used as a container for other components.
|
||||
* `Text` is used to display text content in your app. It is similar to the `p` or `span` elements in HTML.
|
||||
* `TextInput` is a basic input field that allows users to type text into your app. It is similar to the `input` element in HTML.
|
||||
* `TouchableOpacity` is a wrapper for making elements like `View` and `Text` respond properly to touch events. It provides feedback by reducing the opacity of the wrapped component when pressed.
|
||||
* `ScrollView` is a scrollable container that allows users to scroll through its content. It is useful when you have content that exceeds the available screen size.
|
||||
* `FlatList` is used to render a list of items using a performant approach. It only renders items that are currently visible on the screen and removes others to save memory.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Core Components and APIs](https://reactnative.dev/docs/components-and-apis)
|
||||
- [@official@Core Components and Native Components](https://reactnative.dev/docs/intro-react-native-components)
|
||||
- [@official@Core Components and Native Components](https://reactnative.dev/docs/intro-react-native-components)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@CSS - W3.org](https://www.w3.org/Style/CSS/Overview.en.html)
|
||||
- [@official@CSS - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
||||
- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about CSS](https://app.daily.dev/tags/css?ref=roadmapsh)
|
||||
@@ -1 +1,9 @@
|
||||
# DeepLinking
|
||||
# Deep Linking
|
||||
|
||||
Deep linking in React Native allows your app to open and navigate to a specific screen or content when a user clicks on a URL or a custom URI scheme. It essentially creates a direct pathway into a particular section of your application, bypassing the typical app launch sequence and providing a more seamless user experience. This is useful for scenarios like opening a product page from a marketing email or directing users to a specific profile from a shared link.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Understanding deep linking in React Native](https://blog.logrocket.com/understanding-deep-linking-in-react-native/)
|
||||
- [@article@Deep Linking in React Native: Navigating to Specific App Screens](https://clouddevs.com/react-native/deep-linking/)
|
||||
- [@article@A Complete Guide to Deep Linking with Custom domain in React Native](https://dev.to/amitkumar13/a-complete-guide-to-deep-linking-with-custom-domain-in-react-native-bj3)
|
||||
@@ -2,6 +2,6 @@
|
||||
|
||||
Detox is an end-to-end testing framework for React Native applications. It enables you to run tests on an actual device or in a simulator/emulator environment. The goal of Detox is to maintain a high level of confidence in your application's behavior while allowing for quick test runs and easy debugging.
|
||||
|
||||
Learn more from the following links:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Detox Documentation](https://wix.github.io/Detox/)
|
||||
@@ -4,5 +4,5 @@ React native has a decent guide on how to get started with development workflow.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Continuous Integration and Deployment for React Native Apps](https://dev.to/medaimane/continuous-integration-and-deployment-for-react-native-apps-streamlining-development-workflow-4i04)
|
||||
- [@official@Running on Device](https://reactnative.dev/docs/running-on-device)
|
||||
- [@official@Running on Device](https://reactnative.dev/docs/running-on-device)
|
||||
- [@article@Continuous Integration and Deployment for React Native Apps](https://dev.to/medaimane/continuous-integration-and-deployment-for-react-native-apps-streamlining-development-workflow-4i04)
|
||||
@@ -4,4 +4,4 @@ React Native DevTools are essential tools that help developers debug and optimiz
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Devtools](https://reactnative.dev/docs/react-devtools)
|
||||
- [@official@Devtools](https://reactnative.dev/docs/react-devtools)
|
||||
@@ -4,4 +4,4 @@ Fast Refresh is a React Native feature that allows you to get near-instant feedb
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Fast Refresh](https://reactnative.dev/docs/fast-refresh)
|
||||
- [@official@Fast Refresh](https://reactnative.dev/docs/fast-refresh)
|
||||
@@ -2,15 +2,17 @@
|
||||
|
||||
In React Native, setting up the development environment is a crucial step. The environment setup process includes installing and configuring various tools and packages required for developing, building, and launching a React Native application. There are two main approaches when setting up your React Native development environment:
|
||||
|
||||
## Expo CLI
|
||||
Expo CLI
|
||||
--------
|
||||
|
||||
Expo CLI is a command-line tool built for creating and managing React Native projects easily. It streamlines your development process by providing an entire development environment, including building and deploying your app to both iOS and Android platforms.
|
||||
|
||||
## React Native CLI
|
||||
React Native CLI
|
||||
----------------
|
||||
|
||||
React Native CLI is the official command-line interface for building native mobile apps using React Native. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Native CLI](https://reactnative.dev/docs/environment-setup?guide=native)
|
||||
- [@official@Expo CLI Quickstart](https://docs.expo.dev/get-started/create-a-project)
|
||||
- [@official@Expo CLI Quickstart](https://docs.expo.dev/get-started/create-a-project)
|
||||
@@ -4,4 +4,4 @@ Expo File System is a universal module that provides access to the file system o
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Expo File System](https://docs.expo.dev/versions/latest/sdk/filesystem/)
|
||||
- [@official@Expo File System](https://docs.expo.dev/versions/latest/sdk/filesystem/)
|
||||
@@ -5,4 +5,4 @@ Expo Secure Store is a built-in package provided by the Expo SDK to store encryp
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@secure-store](https://docs.expo.dev/versions/latest/sdk/securestore/)
|
||||
- [@opensource@expo-secure-store package](https://www.npmjs.com/package/expo-secure-store?activeTab=readme)
|
||||
- [@opensource@expo-secure-store package](https://www.npmjs.com/package/expo-secure-store?activeTab=readme)
|
||||
@@ -6,4 +6,4 @@ With Expo SQLite, you can efficiently manage SQLite databases within your React
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/)
|
||||
- [@official@expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/)
|
||||
@@ -4,6 +4,6 @@ Expo is an open-source framework and platform built around React Native, designe
|
||||
|
||||
Expo simplifies mobile development by handling much of the native configuration behind the scenes. Developers can use the **Expo Go** app to preview and test their projects instantly on real devices, while the **Expo CLI** offers powerful commands for creating, running, and managing apps. The **Expo SDK** provides prebuilt modules for features like camera access, push notifications, geolocation, and more, allowing you to focus on app logic rather than native integrations. For production workflows, **EAS (Expo Application Services)** supports custom builds, over-the-air updates, and app store submissions.
|
||||
|
||||
Learn more from the following resources:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Expo Documentation](https://docs.expo.dev/)
|
||||
- [@official@Expo Documentation](https://docs.expo.dev/)
|
||||
@@ -1,7 +1,7 @@
|
||||
# Fetch
|
||||
|
||||
*Fetch* is a JavaScript function available in React Native that is used to make network requests, similar to XMLHttpRequest in web applications. It allows you to handle requests and retrieve data from APIs or other sources. The Fetch API is built on Promises, making it simple to handle success and error cases.
|
||||
_Fetch_ is a JavaScript function available in React Native that is used to make network requests, similar to XMLHttpRequest in web applications. It allows you to handle requests and retrieve data from APIs or other sources. The Fetch API is built on Promises, making it simple to handle success and error cases.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
|
||||
- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
|
||||
@@ -5,4 +5,4 @@ In React Native, you can write platform-specific code by using specific file ext
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code)
|
||||
- [@official@App Extensions](https://reactnative.dev/docs/app-extensions)
|
||||
- [@official@App Extensions](https://reactnative.dev/docs/app-extensions)
|
||||
@@ -4,4 +4,4 @@
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@FlatList](https://reactnative.dev/docs/flatlist)
|
||||
- [@official@FlatList](https://reactnative.dev/docs/flatlist)
|
||||
@@ -5,4 +5,4 @@ Native modules in React Native provide a powerful way to access device-specific
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Android Native Modules](https://reactnative.dev/docs/legacy/native-modules-android)
|
||||
- [@feed@Explore top posts about Android](https://app.daily.dev/tags/android?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about Android](https://app.daily.dev/tags/android?ref=roadmapsh)
|
||||
@@ -5,4 +5,4 @@ iOS native modules in React Native allow developers to tap into the rich ecosyst
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@iOS Native Modules](https://reactnative.dev/docs/legacy/native-modules-ios)
|
||||
- [@feed@Explore top posts about iOS](https://app.daily.dev/tags/ios?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about iOS](https://app.daily.dev/tags/ios?ref=roadmapsh)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Animations](https://reactnative.dev/docs/animations)
|
||||
- [@official@LayoutAnimations](https://reactnative.dev/docs/layoutanimation)
|
||||
- [@official@Animated](https://reactnative.dev/docs/animated)
|
||||
- [@official@Animated](https://reactnative.dev/docs/animated)
|
||||
@@ -5,4 +5,4 @@ Publishing your React Native app on Google Store consists of several steps.
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Publishing to Google Play Store](https://reactnative.dev/docs/signed-apk-android)
|
||||
- [@feed@Explore top posts about Google](https://app.daily.dev/tags/google?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about Google](https://app.daily.dev/tags/google?ref=roadmapsh)
|
||||
@@ -4,4 +4,4 @@ The `Image` component is used to display images in a React Native application. I
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Image](https://reactnative.dev/docs/image)
|
||||
- [@official@Image](https://reactnative.dev/docs/image)
|
||||
@@ -4,4 +4,4 @@
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Image Background](https://reactnative.dev/docs/imagebackground)
|
||||
- [@official@Image Background](https://reactnative.dev/docs/imagebackground)
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
React Native provides an in-app developer menu which offers several debugging options. You can access the Dev Menu by shaking your device or via keyboard shortcuts:
|
||||
|
||||
- Android: `Cmd + M` or `Ctrl + M`
|
||||
- iOS: `Cmd + D` or `Ctrl + D`
|
||||
* Android: `Cmd + M` or `Ctrl + M`
|
||||
* iOS: `Cmd + D` or `Ctrl + D`
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Debugging](https://reactnative.dev/docs/debugging)
|
||||
- [@official@Debugging](https://reactnative.dev/docs/debugging)
|
||||
@@ -5,4 +5,4 @@ Interaction in React Native means dealing with how the user can interact with yo
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Animations](https://reactnative.dev/docs/animations)
|
||||
- [@official@LayoutAnimations](https://reactnative.dev/docs/layoutanimation)
|
||||
- [@official@LayoutAnimations](https://reactnative.dev/docs/layoutanimation)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Native](https://reactnative.dev/)
|
||||
- [@official@Getting Started with React Native](https://reactnative.dev/docs/getting-started)
|
||||
- [@video@React Native Course for Beginners in 2025 | Build a Full Stack React Native App](https://www.youtube.com/watch?v=f8Z9JyB2EIE)
|
||||
- [@video@React Native Course for Beginners in 2025 | Build a Full Stack React Native App](https://www.youtube.com/watch?v=f8Z9JyB2EIE)
|
||||
@@ -7,4 +7,4 @@ There's a lot more to learn in JavaScript but my recommendation is to learn the
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
|
||||
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about JavaScript](https://app.daily.dev/tags/javascript?ref=roadmapsh)
|
||||
@@ -7,4 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@official@Jest](https://jestjs.io/)
|
||||
- [@official@Jest Documentation](https://jestjs.io/docs/getting-started)
|
||||
- [@video@Jest Crash Course - Unit Testing in JavaScript](https://www.youtube.com/watch?v=7r4xVDI2vho)
|
||||
- [@feed@Explore top posts about Jest](https://app.daily.dev/tags/jest?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about Jest](https://app.daily.dev/tags/jest?ref=roadmapsh)
|
||||
@@ -7,4 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@official@Components](https://react.dev/learn/your-first-component)
|
||||
- [@official@Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)
|
||||
- [@official@JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces)
|
||||
- [@feed@Explore top posts about JSX](https://app.daily.dev/tags/jsx?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about JSX](https://app.daily.dev/tags/jsx?ref=roadmapsh)
|
||||
@@ -4,4 +4,4 @@
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview)
|
||||
- [@official@KeyboardAvoidingView](https://reactnative.dev/docs/keyboardavoidingview)
|
||||
@@ -4,6 +4,6 @@ Before you start learning React Native, you should have a basic knowledge of Jav
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Native Basics](https://reactnative.dev/docs/getting-started)
|
||||
- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
|
||||
- [@roadmap@Visit Dedicated React Roadmap](https://roadmap.sh/react)
|
||||
- [@official@React Native Basics](https://reactnative.dev/docs/getting-started)
|
||||
@@ -4,4 +4,4 @@ LogBox is a new feature added to React Native to improve how logs are displayed
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Debugging LogBox](https://reactnative.dev/docs/debugging#logbox)
|
||||
- [@official@Debugging LogBox](https://reactnative.dev/docs/debugging#logbox)
|
||||
@@ -4,4 +4,4 @@ Metro Bundler is the default bundler for React Native applications. It's a JavaS
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Metro Bundler](https://facebook.github.io/metro/)
|
||||
- [@official@Metro Bundler](https://facebook.github.io/metro/)
|
||||
@@ -4,4 +4,4 @@ A `Modal` is a component that displays content on top of the current view, creat
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Modal](https://reactnative.dev/docs/modal)
|
||||
- [@official@Modal](https://reactnative.dev/docs/modal)
|
||||
@@ -2,12 +2,11 @@
|
||||
|
||||
React Native facilitates network requests and data management from remote sources through various techniques. The primary method is the `fetch` function, a promise-based API that allows developers to make HTTP requests and retrieve resources, typically in JSON format, from a specified URL. For example, a simple fetch request can be made as follows:
|
||||
|
||||
```jsx
|
||||
fetch('https://jsonplaceholder.typicode.com/todos/1')
|
||||
.then((response) => response.json())
|
||||
.then((json) => console.log(json))
|
||||
.catch((error) => console.error(error));
|
||||
```
|
||||
fetch('https://jsonplaceholder.typicode.com/todos/1')
|
||||
.then((response) => response.json())
|
||||
.then((json) => console.log(json))
|
||||
.catch((error) => console.error(error));
|
||||
|
||||
|
||||
Another popular option is Axios, a widely-used library that simplifies HTTP requests in JavaScript applications. Like fetch, Axios is promise-based and offers a user-friendly API, making it a preferred choice for many developers when handling network requests in React Native.
|
||||
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
|
||||
Networking in React Native primarily uses the Fetch API and XMLHttpRequest for making network requests. These APIs allow you to retrieve data from remote servers and handle asynchronous operations easily. React Native offers various ways to handle networking tasks like making API calls, sending/receiving data from remote servers, and handling different network protocols.
|
||||
|
||||
- Fetch
|
||||
- HTTP Call Libraries
|
||||
- Web Sockets
|
||||
* Fetch
|
||||
* HTTP Call Libraries
|
||||
* Web Sockets
|
||||
|
||||
These are the major ways to handle networking tasks in React Native. Choose the method that best suits your specific use case and allows you to take full advantage of the features offered.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Networking](https://reactnative.dev/docs/network)
|
||||
- [@article@Efficient Network Communication](https://medium.com/@Blochware/efficient-network-communication-best-practices-for-handling-api-calls-in-react-native-b5bebbc8ba71)
|
||||
- [@article@Efficient Network Communication](https://medium.com/@Blochware/efficient-network-communication-best-practices-for-handling-api-calls-in-react-native-b5bebbc8ba71)
|
||||
@@ -2,15 +2,15 @@
|
||||
|
||||
In React Native, the FlatList component is essential for efficiently displaying large lists of items, and optimizing its configuration is crucial for enhancing performance. Here are key tips for optimizing FlatList:
|
||||
|
||||
1. **Set `windowSize`**: Adjust the `windowSize` prop, which determines the number of pages rendered above and below the current view. Reducing this value from the default of 21 can decrease off-screen component rendering.
|
||||
|
||||
2. **Enable `removeClippedSubviews`**: This prop unmounts components that are off-screen, helping to free up resources.
|
||||
|
||||
3. **Adjust `maxToRenderPerBatch`**: Control the number of items rendered per batch with this prop, which defaults to 10. Tailor this value to fit your list's needs.
|
||||
|
||||
4. **Set `initialNumToRender`**: This prop defines how many items to render initially, helping to prevent blank screens during loading.
|
||||
|
||||
5. **Use `getItemLayout`**: By specifying the exact dimensions of each item with this prop, you can avoid dynamic measurements, leading to better performance.
|
||||
1. **Set `windowSize`**: Adjust the `windowSize` prop, which determines the number of pages rendered above and below the current view. Reducing this value from the default of 21 can decrease off-screen component rendering.
|
||||
|
||||
2. **Enable `removeClippedSubviews`**: This prop unmounts components that are off-screen, helping to free up resources.
|
||||
|
||||
3. **Adjust `maxToRenderPerBatch`**: Control the number of items rendered per batch with this prop, which defaults to 10. Tailor this value to fit your list's needs.
|
||||
|
||||
4. **Set `initialNumToRender`**: This prop defines how many items to render initially, helping to prevent blank screens during loading.
|
||||
|
||||
5. **Use `getItemLayout`**: By specifying the exact dimensions of each item with this prop, you can avoid dynamic measurements, leading to better performance.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -4,4 +4,4 @@ Performance is a crucial aspect of any application, and React Native is no excep
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Performance](https://reactnative.dev/docs/performance)
|
||||
- [@official@Performance](https://reactnative.dev/docs/performance)
|
||||
@@ -9,4 +9,4 @@ With the Platform module, you can easily create platform-specific code, enabling
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Platform](https://reactnative.dev/docs/platform)
|
||||
- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code)
|
||||
- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code)
|
||||
@@ -5,4 +5,4 @@ In React, **props** are short for _properties_ and are used to pass data from a
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Components](https://react.dev/learn/your-first-component)
|
||||
- [@official@Props](https://react.dev/learn/passing-props-to-a-component)
|
||||
- [@official@Props](https://react.dev/learn/passing-props-to-a-component)
|
||||
@@ -5,4 +5,4 @@ Publishing React Native apps is the process of deploying your application on var
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Publishing to Apple App Store](https://reactnative.dev/docs/publishing-to-app-store)
|
||||
- [@official@Publishing to Google Play Store](https://reactnative.dev/docs/signed-apk-android)
|
||||
- [@official@Publishing to Google Play Store](https://reactnative.dev/docs/signed-apk-android)
|
||||
@@ -1 +1,10 @@
|
||||
# Push Notifications
|
||||
# Push Notifications
|
||||
|
||||
Push notifications in React Native allow you to send timely and relevant information to users even when they aren't actively using your app. The original native push notification functionality in React Native has been deprecated. Now, you'll typically rely on third-party services like Firebase Cloud Messaging (FCM), Expo Notifications, or OneSignal to handle the complexities of delivering notifications across different platforms (iOS and Android). These services provide robust APIs and infrastructure for managing device tokens, sending notifications, and tracking delivery success.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@PushNotificationIOS](https://reactnative.dev/docs/pushnotificationios)
|
||||
- [@official@Expo Notifications](https://docs.expo.dev/versions/latest/sdk/notifications/)
|
||||
- [@article@Expo push notifications setup](https://docs.expo.dev/push-notifications/push-notifications-setup/)
|
||||
- [@video@Expo Notifications with EAS | Complete Guide](https://www.youtube.com/watch?v=BCCjGtKtBjE)
|
||||
@@ -7,4 +7,4 @@ Visit the following resources to learn more:
|
||||
- [@official@Flutter](https://flutter.dev/)
|
||||
- [@official@Ionic](https://ionicframework.com/)
|
||||
- [@official@Xamarin](https://dotnet.microsoft.com/apps/xamarin)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
@@ -5,4 +5,4 @@ React Native AsyncStorage is an unencrypted, asynchronous, persistent key-value
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Async Storage](https://reactnative.dev/docs/asyncstorage)
|
||||
- [@opensource@Async Storage - GitHub](https://github.com/react-native-async-storage/async-storage)
|
||||
- [@opensource@Async Storage - GitHub](https://github.com/react-native-async-storage/async-storage)
|
||||
@@ -4,4 +4,4 @@ React Native CLI is the official command-line interface for building native mobi
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Native CLI](https://reactnative.dev/docs/environment-setup?guide=native)
|
||||
- [@official@React Native CLI](https://reactnative.dev/docs/environment-setup?guide=native)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@article@React Native Testing Library](https://callstack.github.io/react-native-testing-library/)
|
||||
- [@article@React Native Testing Library (Docs)](https://testing-library.com/docs/react-native-testing-library/intro/)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
@@ -7,4 +7,4 @@ The main goal of React Native Web is to provide a consistent developer experienc
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@react-native-web - npm](https://www.npmjs.com/package/react-native-web)
|
||||
- [@article@Complete Guide to React Native for Web](https://blog.logrocket.com/complete-guide-react-native-web/)
|
||||
- [@article@Complete Guide to React Native for Web](https://blog.logrocket.com/complete-guide-react-native-web/)
|
||||
@@ -5,4 +5,4 @@ React Test Renderer is a library provided by the React team that allows you to r
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Test Renderer](https://jestjs.io/docs/tutorial-react)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Refresh Control](https://reactnative.dev/docs/refreshcontrol)
|
||||
- [@official@ScrollView](https://reactnative.dev/docs/ScrollView)
|
||||
- [@official@FlatList](https://reactnative.dev/docs/FlatList)
|
||||
- [@official@FlatList](https://reactnative.dev/docs/FlatList)
|
||||
@@ -6,4 +6,4 @@ Keep in mind that `SafeAreaView` only works on iOS devices, and has no effect on
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@SafeAreaView](https://reactnative.dev/docs/safeareaview)
|
||||
- [@official@SafeAreaView](https://reactnative.dev/docs/safeareaview)
|
||||
@@ -2,6 +2,6 @@
|
||||
|
||||
In React Native, navigating from one screen to another is a crucial aspect of app development. The most commonly used navigation libraries are React Navigation and React Native Navigation.
|
||||
|
||||
Learn more from the following resources:
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Navigation](https://reactnavigation.org/)
|
||||
@@ -4,4 +4,4 @@ In React Native, the `ScrollView` is a generic scrolling container used to provi
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@ScrollView](https://reactnative.dev/docs/ScrollView)
|
||||
- [@official@ScrollView](https://reactnative.dev/docs/ScrollView)
|
||||
@@ -4,4 +4,4 @@
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
|
||||
- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
|
||||
@@ -7,4 +7,4 @@ Validating and sanitizing user input is crucial to prevent threats like SQL inje
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Security](https://reactnative.dev/docs/security)
|
||||
- [@article@Secure Authentication and Authorization in React Native](https://medium.com/@christopherobocha/secure-authentication-and-authorisation-in-react-native-a260f1787a89)
|
||||
- [@article@Secure Authentication and Authorization in React Native](https://medium.com/@christopherobocha/secure-authentication-and-authorisation-in-react-native-a260f1787a89)
|
||||
@@ -1,17 +1,17 @@
|
||||
# Sourcemaps
|
||||
|
||||
Sourcemaps are files that map the original source code of a project to its minified or transpiled version. This is especially useful in environments, like React Native, where the code may be transformed before being executed in the device/emulator. Sourcemaps help developers to debug their code more easily by mapping errors in the transformed code back to their original location in the source code.
|
||||
Sourcemaps are files that map the original source code of a project to its minified or transpiled version. This is especially useful in environments, like React Native, where the code may be transformed before being executed in the device/emulator. Sourcemaps help developers to debug their code more easily by mapping errors in the transformed code back to their original location in the source code.
|
||||
|
||||
There are various types of sourcemaps which give different levels of detail to the debugging process:
|
||||
|
||||
- `eval`: Uses `eval` function to generate the sourcemaps. This is faster but provides less detailed information than other options.
|
||||
- `cheap-source-map`: Simple line-to-line mapping without column information. Faster than `source-map` but less accurate.
|
||||
- `cheap-module-source-map`: Similar to `cheap-source-map` but with support for modules.
|
||||
- `source-map`: Full source mapping with both line and column information. It is accurate, though slower compared to other options.
|
||||
* `eval`: Uses `eval` function to generate the sourcemaps. This is faster but provides less detailed information than other options.
|
||||
* `cheap-source-map`: Simple line-to-line mapping without column information. Faster than `source-map` but less accurate.
|
||||
* `cheap-module-source-map`: Similar to `cheap-source-map` but with support for modules.
|
||||
* `source-map`: Full source mapping with both line and column information. It is accurate, though slower compared to other options.
|
||||
|
||||
After generating sourcemaps, you can use them to debug errors more efficiently, as they will reference the original locations in the source code. The browser's developer tools, like Google Chrome, have built-in support for sourcemaps, providing the ability to navigate and debug errors with ease.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [Source Maps (MDN)](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map)
|
||||
- [@official@SourceMaps](https://reactnative.dev/docs/debugging-release-builds#enabling-source-maps)
|
||||
- [@article@Source Maps (MDN)](https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map)
|
||||
@@ -2,14 +2,14 @@
|
||||
|
||||
React Native provides a few ways to persist data locally in the app. Here's a brief summary of the storage options available:
|
||||
|
||||
- Async Storage
|
||||
- Expo Secure Store
|
||||
- Expo File System
|
||||
- Expo SQLite
|
||||
* Async Storage
|
||||
* Expo Secure Store
|
||||
* Expo File System
|
||||
* Expo SQLite
|
||||
|
||||
Choose the storage option that best fits your app's requirements and use cases. Keep in mind that AsyncStorage and SecureStorage are more suited for small-scale data storage, while Realm and SQLite support more complex storage and querying needs.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@AsyncStorage](https://reactnative.dev/docs/asyncstorage)
|
||||
- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k)
|
||||
- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k)
|
||||
@@ -4,4 +4,4 @@ React Native offers several methods for persisting data locally within applicati
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k)
|
||||
- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k)
|
||||
@@ -4,4 +4,4 @@ The `Text` component is a basic element in React Native used to display text con
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Text](https://reactnative.dev/docs/text)
|
||||
- [@official@Text](https://reactnative.dev/docs/text)
|
||||
@@ -5,4 +5,4 @@ In React Native, `Touchable` components are used to handle user interactions lik
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Handling Touches](https://reactnative.dev/docs/handling-touches)
|
||||
- [@official@TouchableOpacity](https://reactnative.dev/docs/touchableopacity)
|
||||
- [@official@TouchableOpacity](https://reactnative.dev/docs/touchableopacity)
|
||||
@@ -2,4 +2,4 @@
|
||||
|
||||
Frame rates represent the number of frames (or images) displayed per second in an animation or video. The performance of a React Native application can be highly impacted by the frame rate, so it is important to optimize your application for the best possible user experience. Higher frame rates provide smoother animations, but may require more system resources. To achieve the desired frame rate, the application should ensure that each frame is computed and rendered within the time budget.
|
||||
|
||||
To achieve high frame rates and smooth animations, developers can utilize the `Animated` library, which offers methods and components for efficient animation management. For instance, the library allows for declarative animation definitions, minimizes unnecessary render cycles, and enables the use of the native driver to offload animations from the JavaScript thread. By adhering to best practices and leveraging the `Animated` library, developers can enhance their React Native applications' performance and deliver high-quality animations.
|
||||
To achieve high frame rates and smooth animations, developers can utilize the `Animated` library, which offers methods and components for efficient animation management. For instance, the library allows for declarative animation definitions, minimizes unnecessary render cycles, and enables the use of the native driver to offload animations from the JavaScript thread. By adhering to best practices and leveraging the `Animated` library, developers can enhance their React Native applications' performance and deliver high-quality animations.
|
||||
@@ -6,4 +6,4 @@ The NativeModule system exposes instances of Java/Objective-C/C++ (native) class
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Native Modules Introduction](https://reactnative.dev/docs/native-platform)
|
||||
- [@official@Native Modules Introduction](https://reactnative.dev/docs/native-platform)
|
||||
@@ -4,4 +4,4 @@ WebSockets are a protocol that allows full-duplex communication between a client
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@The WebSocket API (WebSockets) - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
|
||||
- [@article@The WebSocket API (WebSockets) - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
|
||||
@@ -6,4 +6,4 @@ With React Native, you write components with JSX, a syntax that combines JavaScr
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Getting Started with React Native](https://reactnative.dev/docs/getting-started)
|
||||
- [@official@Getting Started with React Native](https://reactnative.dev/docs/getting-started)
|
||||
@@ -5,4 +5,4 @@ React Native is a popular framework for developing native mobile applications us
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Why You Should Choose React Native?](https://www.geeksforgeeks.org/why-you-should-choose-react-native/)
|
||||
- [@article@React Native: What is it? and, Why is it used?](https://medium.com/@thinkwik/react-native-what-is-it-and-why-is-it-used-b132c3581df)
|
||||
- [@article@React Native: What is it? and, Why is it used?](https://medium.com/@thinkwik/react-native-what-is-it-and-why-is-it-used-b132c3581df)
|
||||
@@ -5,4 +5,4 @@ In React Native, managing platform-specific code for iOS and Android is essentia
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code)
|
||||
- [@official@App Extensions](https://reactnative.dev/docs/app-extensions)
|
||||
- [@official@App Extensions](https://reactnative.dev/docs/app-extensions)
|
||||
Reference in New Issue
Block a user