mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2026-09-19 09:32:03 +08:00
chore: sync content to repo (#10315)
Co-authored-by: nilbuild <4921183+nilbuild@users.noreply.github.com>
This commit is contained in:
github-actions[bot]
co-authored by
nilbuild
nilbuild
parent
54e1e8de88
commit
89fdaad9c1
@@ -1,10 +1,6 @@
|
||||
# Animations
|
||||
|
||||
React Native supports two types of animations: `Animated` and `LayoutAnimation`. The `Animated` API provides a basic set of methods for creating and managing animations, while the `LayoutAnimation` API provides a way to animate changes from one layout to another.
|
||||
|
||||
`Animated` is a declarative API that focuses on handling animation-related calculations. It allows you to create and combine animations with fine-grained control over the specific properties that are being animated. You can use this API to create a variety of effects, such as fading, scaling, and translating components on the screen.
|
||||
|
||||
`LayoutAnimation` is a higher-level abstraction for animating changes to the layout. Instead of animating individual properties, you define how the changes should occur and React Native takes care of updating the layout accordingly. This is particularly useful for animating multiple components or modifying the layout in response to user interaction, such as adding/removing/reordering items in a list.
|
||||
Animations in React Native allow developers to create smooth, fluid, and dynamic user interfaces by changing the properties of components over time. The framework provides the Animated API to handle simple, high-performance transitions, as well as the LayoutAnimation API for animating global layout changes. These tools enable the transformation of elements through movements, scaling, opacity changes, and rotations to provide visual feedback and enhance the overall user experience within a mobile application.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
# Authentication
|
||||
|
||||
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
|
||||
Authentication is the process of verifying the identity of a user before granting them access to specific features or data within a mobile application. In React Native, this typically involves managing secure user sessions through methods like OAuth, JWT (JSON Web Tokens), or biometric authentication. Developers integrate these systems to ensure that sensitive user information remains protected and that only authorized individuals can interact with private parts of the application.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Common Problem Sources
|
||||
# Common Problem Sources in React Native Performance
|
||||
|
||||
In React Native, several common issues can impact application performance. Excessive console logs can slow down the app, particularly in debug mode, so it's advisable to minimize their use and remove unnecessary logs before release. Heavy and unoptimized images can also cause performance problems; therefore, it's important to optimize image size and resolution and use the `resizeMode` prop on the `Image` component for better rendering. Additionally, inline functions and styles can lead to unnecessary re-renders, so defining them outside the component's render method is recommended. While using `React.PureComponent` or `React.memo()` can enhance performance, they should be applied judiciously to avoid unnecessary re-renders. For handling large lists, replacing `ListView` with `FlatList` or `SectionList` is crucial for better performance. Lastly, blocking the JavaScript thread with heavy synchronous computations can degrade performance, so it's essential to handle such tasks asynchronously or offload them to native modules. Following these guidelines can help maintain optimal performance in React Native applications.
|
||||
Performance issues in React Native often stem from an overloaded JavaScript thread, which handles business logic, API calls, and state management. When this thread becomes blocked by heavy computations or excessive re-renders, the user interface feels unresponsive or choppy. Other frequent causes include inefficient list rendering, large image assets that consume excessive memory, and unnecessary communication overhead between the JavaScript bridge and the native modules. Identifying these bottlenecks involves analyzing how components update their state and ensuring that resource-intensive tasks are offloaded to native code or handled asynchronously.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -5,4 +5,4 @@ Connectivity refers to the mechanisms that allow data transfer between your Reac
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@React Native NetInfo](https://github.com/react-native-netinfo/react-native-netinfo)
|
||||
- [@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/)
|
||||
@@ -1,13 +1,6 @@
|
||||
# Core Components
|
||||
|
||||
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.
|
||||
Core Components are the fundamental building blocks provided by React Native that map directly to native platform UI elements. Instead of using standard web elements like `<div>` or `<span>`, React Native uses components such as `<View>` for layout, `<Text>` for displaying strings, and `<Image>` for rendering pictures. These components translate to their respective native counterparts on iOS and Android, allowing developers to create authentic mobile experiences using JavaScript and React.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -4,6 +4,6 @@ CSS is a stylesheet language used for describing the look and formatting of a do
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@roadmap@Visit the Dedicated CSS Roadmap](https://roadmap.sh/css)
|
||||
- [@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)
|
||||
- [@official@CSS - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS)
|
||||
@@ -1,6 +1,6 @@
|
||||
# Development Workflow
|
||||
|
||||
React native has a decent guide on how to get started with development workflow.
|
||||
The development workflow in React Native involves a continuous cycle of writing code, testing components, and refining the user interface across both iOS and Android platforms. Developers typically utilize tools like Metro Bundler to compile JavaScript code in real-time, allowing for immediate feedback through features like Fast Refresh. This process integrates version control systems, debugging
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -5,4 +5,4 @@ React Native DevTools is the modern, built-in debugging experience for React Nat
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Native DevTools](https://reactnative.dev/docs/react-native-devtools)
|
||||
- [@official@React DevTools](https://reactnative.dev/docs/react-devtools)
|
||||
- [@official@React DevTools](https://reactnative.dev/docs/react-devtools)
|
||||
@@ -1,19 +1,9 @@
|
||||
# Environment Setup
|
||||
|
||||
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 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
|
||||
----------------
|
||||
|
||||
The React Native Community CLI (`@react-native-community/cli`) lets you start a project without a framework. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
|
||||
Environment setup involves configuring your local machine with the necessary tools, software, and dependencies required to build, run, and test mobile applications. This process typically includes installing Node.js, the React Native CLI or Expo CLI, and the specific software development kits for platforms like Android and iOS, such as Android Studio or Xcode. Properly configuring these tools ensures that your development environment can communicate effectively with emulators, simulators, or physical devices during the coding process.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment)
|
||||
- [@official@Get Started Without a Framework](https://reactnative.dev/docs/getting-started-without-a-framework)
|
||||
- [@official@Create a project with Expo](https://docs.expo.dev/get-started/create-a-project/)
|
||||
- [@official@Create a project with Expo](https://docs.expo.dev/get-started/create-a-project/)
|
||||
@@ -1,8 +1,6 @@
|
||||
# expo-sqlite
|
||||
|
||||
Expo SQLite is a powerful tool for handling local SQLite databases in your React Native application. By using this API, you can create, read, update, and delete data as needed, without writing native code. Expo SQLite is available as part of the expo-sqlite package, which provides an easy-to-use interface for SQLite functionalities.
|
||||
|
||||
With Expo SQLite, you can efficiently manage SQLite databases within your React Native applications. It enables you to perform various database operations without the need for writing native code.
|
||||
expo-sqlite is a module that provides an interface for a local SQLite database in React Native applications. It allows developers to store, query, and manage structured data directly on a device using standard SQL commands. This library is designed to work seamlessly within the Expo ecosystem, providing a reliable way to persist data offline without needing to configure complex native database drivers.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Expo Tradeoffs
|
||||
|
||||
Expo is a powerful tool that simplifies the React Native development process, but it has some tradeoffs to consider. One limitation is the availability of native modules; while Expo provides a set of pre-built modules, it may not cover all functionalities needed for specific apps, requiring developers to eject from the managed workflow for custom solutions. Performance can also be an issue, as the additional layer Expo adds may lead to slower apps, especially for larger projects, whereas the bare workflow offers more control and potentially better performance. Additionally, Expo apps tend to have a larger size due to the inclusion of the entire Expo SDK, which can be inefficient compared to non-Expo apps that only include necessary modules. Developers relying on Expo must also wait for their release cycle for updates, which can delay access to new React Native features or bug fixes. Ejecting from Expo can present challenges, as it may require significant code adjustments and dependency migrations. Lastly, Expo's abstraction limits customizability, meaning that for advanced customizations, developers may need to switch to a bare workflow. Overall, while Expo provides great tooling and simplifies development, its limitations should be carefully weighed before choosing it for app development.
|
||||
Expo is a managed framework that simplifies React Native development by providing a set of pre-built tools, libraries, and services. While it offers a faster development cycle and easier configuration, it comes with specific limitations regarding native code control. Developers using Expo cannot easily add custom native modules that require direct modification of the Android or iOS project files without using the "eject" process or development builds. Furthermore, the reliance on the Expo SDK means that project updates must align with their release schedule, which can occasionally lead to dependency conflicts when using highly specific third-party native libraries.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
# Expo
|
||||
|
||||
Expo is an open-source framework and platform built around React Native, designed to streamline the development process for cross-platform mobile applications. It provides a managed workflow that includes a comprehensive set of tools, APIs, and services for building, testing, and deploying apps for iOS, Android, and web—all using JavaScript or TypeScript.
|
||||
|
||||
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.
|
||||
Expo is a framework and platform for React Native that simplifies the development process by providing a set of tools and services that abstract away complex native code configurations. It allows developers to build, test, and deploy applications across iOS, Android, and the web using a unified codebase. By managing the underlying build environment, Expo enables users to focus on writing JavaScript or TypeScript code without needing to constantly interact with Xcode or Android Studio.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -5,4 +5,4 @@ _Fetch_ is a JavaScript function available in React Native that is used to make
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Networking](https://reactnative.dev/docs/network)
|
||||
- [@official@Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||||
- [@official@Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||||
@@ -1,6 +1,6 @@
|
||||
# File Extensions
|
||||
|
||||
In React Native, you can write platform-specific code by using specific file extensions, such as appending `.android.` or `.ios.` to your file names, allowing React Native to automatically load the appropriate file based on the platform. This approach is useful in two main scenarios: creating separate files for platform-specific components, like `Header.ios.js` and `Header.android.js`, which can have different implementations and styles for iOS and Android, and using the `Platform` module within a single file to conditionally render platform-specific code. By leveraging these techniques, developers can create tailored components and features for each platform while keeping their codebase organized and maintainable.
|
||||
File extensions like `.ios.js` and `.android.js` allow React Native to automatically select the correct implementation based on the platform where the application is running. When you import a module with these specific extensions, the packager detects the operating system and loads the file that matches the target platform. This mechanism enables developers to maintain separate logic or UI components for iOS and Android within the same codebase while keeping imports clean and simple.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Publishing React Native Apps on Google Store
|
||||
# Google Play Store
|
||||
|
||||
Publishing your React Native app on Google Store consists of several steps.
|
||||
Google Play Store is a digital distribution platform that allows developers to publish and release their React Native applications to Android users worldwide. To distribute an app, developers must create a Google Play Console account, sign their application with a secure keystore file, and generate an Android App Bundle (AAB). Once the bundle is uploaded, the app undergoes a review process by Google to ensure it meets safety and quality standards before it becomes available for download on the store.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
# In-App Developer Menu
|
||||
|
||||
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`
|
||||
The In-App Developer Menu is a built-in interface in React Native that provides essential tools for debugging and development. By triggering this menu through a specific gesture or keyboard shortcut, you can access features such as refreshing the application, enabling fast refresh, inspecting elements, and toggling performance monitors. It serves as a central control panel that allows you to manage your app's state and development settings directly on the device or simulator while you write your code.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
# JavaScript Basics
|
||||
|
||||
JavaScript is a very flexible and versatile programming language, considered as a core technology for web development. This is because it is the only language natively supported by all browsers, allowing developers to add dynamic behavior and create complex user experiences with this language.
|
||||
|
||||
There's a lot more to learn in JavaScript but my recommendation is to learn the basics and then learn as you go. You'll learn a lot more by building things than by reading about them.
|
||||
JavaScript is a versatile programming language that serves as the foundation for building interactive and dynamic applications. It enables developers to manipulate content, control multimedia, animate elements, and handle complex logic within a codebase. In the React Native environment, a solid understanding of JavaScript syntax, functions, objects, and asynchronous operations is essential for creating mobile components and managing application data flow.
|
||||
|
||||
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)
|
||||
- [@roadmap@Visit Dedicated JavaScript Roadmap](https://roadmap.sh/javascript)
|
||||
@@ -1,8 +1,6 @@
|
||||
# Layouts in React Native
|
||||
# Layouts & Flexbox
|
||||
|
||||
In React Native, layouts are primarily managed using the Flexbox styling system. Flexbox is a powerful and flexible layout system that allows you to create responsive and complex UIs using a set of simple rules.
|
||||
|
||||
You can use these styles in various combinations to create flexible layouts in React Native. Flexbox makes it easy to create responsive UIs that adapt to changes in screen size or orientation. Note that some of these styles might not work as expected in React Native compared to in CSS for the web, but the overall concepts remain the same.
|
||||
Layouts and Flexbox in React Native provide a system for arranging elements on the screen. It is based on the CSS Flexbox algorithm, which allows you to define how components are positioned, spaced, and sized within a container. By using properties like `flexDirection`, `justifyContent`, and `alignItems`, you can create responsive designs that adapt to different screen sizes and orientations.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Using List Views](https://reactnative.dev/docs/using-a-listview)
|
||||
- [@official@FlatList](https://reactnative.dev/docs/flatlist)
|
||||
- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
|
||||
- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Using List Views](https://reactnative.dev/docs/using-a-listview)
|
||||
- [@official@FlatList](https://reactnative.dev/docs/flatlist)
|
||||
- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
|
||||
- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
|
||||
@@ -4,4 +4,4 @@ LogBox is React Native's in-app display for logs, warnings, and errors during de
|
||||
|
||||
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)
|
||||
@@ -5,4 +5,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://metrobundler.dev/)
|
||||
- [@official@Metro in React Native](https://reactnative.dev/docs/metro)
|
||||
- [@official@Metro in React Native](https://reactnative.dev/docs/metro)
|
||||
@@ -1,14 +1,6 @@
|
||||
# Networking
|
||||
# Networking in React Native
|
||||
|
||||
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:
|
||||
|
||||
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.
|
||||
Networking in React Native allows applications to communicate with remote servers to fetch or send data using standard web protocols. Developers typically utilize the built-in Fetch API to perform HTTP requests, which handles asynchronous data retrieval in a way that is consistent with modern web standards. For more complex requirements, such as managing cookies, handling authentication headers, or tracking upload progress, libraries like Axios are commonly integrated into projects to simplify request configuration and response handling.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
# Networking
|
||||
# Networking Security in React Native
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
Networking security in React Native involves protecting the data transmitted between your application and a backend server to prevent unauthorized access or interception. This is primarily achieved through the use of HTTPS (SSL/TLS) to encrypt communication, alongside best practices like implementing certificate pinning to verify the server's identity and validating all incoming data from API responses. Developers also use techniques such as secure token management and request authentication to ensure that only authorized users can exchange sensitive information with the application.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
# Optimizing FlatList Config
|
||||
# Optimizing Flatlist Config
|
||||
|
||||
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.
|
||||
Optimizing Flatlist configuration involves fine-tuning the properties of the Flatlist component to improve scrolling performance and memory usage in large data lists. By leveraging props such as `initialNumToRender`, `maxToRenderPerBatch`, `windowSize`, and `removeClippedSubviews`, developers can control how many items are rendered at once and how off-screen elements are handled. Adjusting these settings reduces the workload on the JavaScript bridge and helps maintain a smooth frame rate during complex list interactions.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
# Other Storage Options
|
||||
|
||||
Besides AsyncStorage, there are other options available for handling data storage in React Native applications. This guide will briefly cover some popular options: Realm, Firebase Realtime Database, and SQLite.
|
||||
|
||||
These are just a few examples of additional storage options for React Native. Depending on your requirements, you may choose the one that best fits your project.
|
||||
Beyond basic local storage solutions, React Native applications often require more specialized ways to manage data. These options include libraries like SQLite for relational database management, Realm for high-performance object-oriented storage, or WatermelonDB for reactive data synchronization. These tools are typically used when an application needs to handle complex data structures, perform advanced queries, or maintain large datasets locally on the device.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@Async Storage](https://github.com/react-native-async-storage/async-storage)
|
||||
- [@opensource@Realm - GitHub](https://github.com/realm/realm-js)
|
||||
- [@article@Firebase Realtime Database](https://firebase.google.com/docs/database)
|
||||
- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
|
||||
@@ -0,0 +1,12 @@
|
||||
# Permissions
|
||||
|
||||
Permissions in React Native are how your app requests access to sensitive user data or device features, like the camera, microphone, or location. When your app needs to use one of these features, it must first ask the user for permission. This is done through native modules that interact with the underlying operating system (iOS or Android) to display a permission request dialog. The user can then grant or deny the request, and your app needs to handle both scenarios gracefully.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@PermissionsAndroid](https://reactnative.dev/docs/permissionsandroid)
|
||||
- [@opensource@react-native-permissions](https://github.com/zoontek/react-native-permissions)
|
||||
- [@article@Managing app permissions in React Native](https://blog.logrocket.com/react-native-permissions/)
|
||||
- [@article@Mastering Permission handling in React Native](https://medium.com/@uddishverma22/mastering-permission-handling-in-react-native-2076862c7e7b)
|
||||
- [@video@React Native Permissions Tutorial (react-native-permissions)](https://www.youtube.com/watch?v=ZQzcVY3CoFQ)
|
||||
- [@video@React Native Permissions: A Guide to Implementation](https://www.youtube.com/watch?v=cUWGLik3nYQ)
|
||||
@@ -1,10 +1,6 @@
|
||||
# Platform Module
|
||||
|
||||
The Platform module, as the name suggests, is a part of React Native that detects the platform on which the app is running. This enables you to have specific code for either Android or iOS, allowing you to account for platform-specific differences in design or behavior.
|
||||
|
||||
To utilize the Platform module, you need to import it and then access the `OS` property. This property returns a string, which denotes the platform — either `'ios'` or `'android'`.
|
||||
|
||||
With the Platform module, you can easily create platform-specific code, enabling you to have the best user experience for each platform. Just remember to import the module and use the provided properties and methods.
|
||||
The Platform module in React Native provides a simple way to detect the operating system on which your application is currently running. It exposes a constant that allows you to branch your code logic based on whether the app is executing on iOS, Android, or other supported platforms. Developers use this module to apply platform-specific styles, components, or behaviors to ensure the user interface behaves appropriately for each environment.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
# Profiling
|
||||
|
||||
Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side. Access it by selecting Perf Monitor from the Debug menu.
|
||||
|
||||
For iOS, Instruments is an invaluable tool, and on Android you should learn to use `systrace`.
|
||||
Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side. Access it by selecting Perf Monitor from the Debug menu. For iOS, Instruments is an invaluable tool, and on Android you should learn to use `systrace`.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -4,4 +4,4 @@ Inline requires defer loading a module until it is first used instead of at star
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Optimizing JavaScript loading](https://reactnative.dev/docs/optimizing-javascript-loading)
|
||||
- [@official@Optimizing JavaScript loading](https://reactnative.dev/docs/optimizing-javascript-loading)
|
||||
@@ -4,4 +4,4 @@ Async Storage is an unencrypted, asynchronous, persistent key-value storage syst
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@Async Storage](https://github.com/react-native-async-storage/async-storage)
|
||||
- [@opensource@Async Storage](https://github.com/react-native-async-storage/async-storage)
|
||||
@@ -5,4 +5,4 @@ The React Native Community CLI (`@react-native-community/cli`) is the command-li
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Get Started Without a Framework](https://reactnative.dev/docs/getting-started-without-a-framework)
|
||||
- [@opensource@React Native Community CLI](https://github.com/react-native-community/cli)
|
||||
- [@opensource@React Native Community CLI](https://github.com/react-native-community/cli)
|
||||
@@ -1,8 +1,6 @@
|
||||
# React Native Web
|
||||
# React Native for Web
|
||||
|
||||
React Native Web is an extension of React Native which allows you to run your React Native apps not only on iOS and Android devices, but also on the web. It uses the same components and APIs you're familiar with in React Native, but renders them into the DOM of a webpage instead of native UI elements.
|
||||
|
||||
The main goal of React Native Web is to provide a consistent developer experience across platforms, reducing the effort needed to build and maintain multi-platform apps.
|
||||
React Native for Web is a library that allows developers to run React Native components and APIs on the web using React DOM. It maps React Native components, such as Views and Text, to their equivalent HTML elements, enabling the reuse of a single codebase across mobile and browser platforms. This integration ensures that styles and interactions defined in React Native are translated effectively into standard web technologies.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@react-test-renderer Deprecation Warnings](https://react.dev/warnings/react-test-renderer)
|
||||
- [@official@Testing React Native Apps with Jest](https://jestjs.io/docs/tutorial-react-native)
|
||||
- [@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)
|
||||
@@ -1,6 +1,6 @@
|
||||
# Running on Device
|
||||
|
||||
It's always a good idea to test your app on an actual device before releasing it to your users.
|
||||
Running your React Native application on a physical device allows you to test your code in a real-world environment, providing a more accurate representation of performance, touch interactions, and hardware integration compared to an emulator or simulator. To achieve this, you connect your mobile device to your development machine via USB or a local Wi-Fi network and use tools like Metro Bundler to transmit the application bundle directly to the device. This process enables developers to utilize features like Fast Refresh to see code changes instantly on their phone screen, ensuring that the user experience remains consistent across different hardware configurations.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
# SafeAreaView
|
||||
|
||||
`SafeAreaView` is a React Native core component that helps to adjust your app's UI elements and layout to accommodate the notches, curved edges, or home indicator on iOS devices. It is particularly useful for the iPhone X and newer iPhone models, as it ensures that content is rendered within the visible portion of the screen.
|
||||
|
||||
Keep in mind that `SafeAreaView` only works on iOS devices, and has no effect on Android devices. To handle such cases, you can use platform-specific styles or libraries like `react-native-safe-area-context` which provide more control and customization options for additional platforms.
|
||||
SafeAreaView is a component designed to render content within the safe area boundaries of a device screen. It automatically applies padding to ensure that your UI elements, such as text or buttons, are not obscured by system notches, home indicators, or rounded corners found on modern smartphones. By wrapping your content in this component, you maintain a clean layout that remains visible and accessible across different device models.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,15 +1,6 @@
|
||||
# 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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
Sourcemaps are files that act as a bridge between your bundled, minified JavaScript code and the original source code you actually wrote. When an error occurs in a production environment, the stack trace typically points to the transformed bundle, which is difficult to read. By using sourcemaps, developer tools can map these obfuscated locations back to the exact files and line numbers in your original project, making it much easier to identify and fix bugs.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,15 +1,8 @@
|
||||
# Storage
|
||||
# Storage in React Native
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
Storage in React Native refers to the various methods used to save data persistently on a mobile device so that information remains available even after the application is closed. Developers typically choose between options like AsyncStorage for simple key-value pairs, SQLite for structured relational data, or Encrypted Storage for sensitive information. Because mobile devices are susceptible to physical access and local file system vulnerabilities, choosing the correct storage mechanism is essential for protecting user privacy and preventing unauthorized data extraction.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@opensource@Async Storage](https://github.com/react-native-async-storage/async-storage)
|
||||
- [@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)
|
||||
@@ -1,8 +1,6 @@
|
||||
# Styling
|
||||
# Styling in React Native
|
||||
|
||||
Styling in React Native is accomplished through JavaScript and uses a subset of CSS properties. Unlike CSS in web development, React Native has its own set of components and styling rules. The main components used for styling are `StyleSheet`, `View`, and `Text`.
|
||||
|
||||
`StyleSheet` is a module provided by React Native to manage and optimize styles. It is similar to a CSS stylesheet and helps in creating and working with multiple styles efficiently.
|
||||
Styling in React Native is handled using a system that closely resembles CSS but is implemented through JavaScript objects. Developers define styles using the `StyleSheet.create` method, which organizes layout properties such as flexbox, colors, and spacing to determine how components appear on the screen. Because React Native uses a subset of standard CSS properties, it relies heavily on the Flexbox layout engine to manage the positioning and alignment of elements within a mobile interface.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
# Switch
|
||||
|
||||
A `Switch` is a core component in React Native used to implement a "toggle" or "on-off" input. It provides a UI for the user to switch between two different states, typically true or false. The primary use case is to enable or disable a feature or setting within an application.
|
||||
|
||||
`Switch` component has a boolean `value` prop (true for on, false for off) and an `onValueChange` event handler, which is triggered whenever the user toggles the switch.
|
||||
A Switch is a visual component in React Native that provides a toggle interface for users to switch between two states, typically on and off. It functions as a controlled component, meaning it relies on a boolean value passed through properties to determine its current state and a callback function to handle changes when the user interacts with it. This component is commonly used in settings menus or forms where a binary selection is required.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -6,4 +6,4 @@ Visit the following resources to learn more:
|
||||
|
||||
- [@official@Testing Overview](https://reactnative.dev/docs/testing-overview)
|
||||
- [@official@Detox](https://wix.github.io/Detox/)
|
||||
- [@opensource@React Native Testing Library](https://github.com/callstack/react-native-testing-library)
|
||||
- [@opensource@React Native Testing Library](https://github.com/callstack/react-native-testing-library)
|
||||
@@ -1,9 +1,7 @@
|
||||
# Understand Frame Rates
|
||||
|
||||
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.
|
||||
Frame rate measures the frequency at which individual images, known as frames, are displayed on a screen to create the illusion of motion. In React Native applications, maintaining a consistent frame rate—typically 60 frames per second—is essential for ensuring that animations and transitions feel smooth and responsive to the user. When the frame rate drops, the interface experiences stuttering or lag, which occurs if the JavaScript thread or the UI thread becomes overwhelmed by heavy computations or inefficient rendering cycles.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Performance Overview](https://reactnative.dev/docs/performance)
|
||||
- [@official@Performance Overview](https://reactnative.dev/docs/performance)
|
||||
@@ -1,8 +1,6 @@
|
||||
# Using Native Modules
|
||||
|
||||
Sometimes a React Native app needs to access a native platform API that is not available by default in JavaScript, for example the native APIs to access Apple or Google Pay. Maybe you want to reuse some existing Objective-C, Swift, Java or C++ libraries without having to reimplement it in JavaScript, or write some high performance, multi-threaded code for things like image processing.
|
||||
|
||||
The NativeModule system exposes instances of Java/Objective-C/C++ (native) classes to JavaScript (JS) as JS objects, thereby allowing you to execute arbitrary native code from within JS. While we don't expect this feature to be part of the usual development process, it is essential that it exists. If React Native doesn't export a native API that your JS app needs you should be able to export it yourself!
|
||||
Native Modules allow React Native applications to access platform-specific features and native APIs that are not available through the default JavaScript bridge. By writing custom code in languages like Swift or Objective-C for iOS, and Java or Kotlin for Android, developers can integrate high-performance native libraries or device-specific hardware functionality directly into their applications. This mechanism enables the execution of complex tasks that require direct interaction with the underlying operating system.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -4,4 +4,4 @@
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@View](https://reactnative.dev/docs/view)
|
||||
- [@official@View](https://reactnative.dev/docs/view)
|
||||
@@ -5,4 +5,4 @@ WebSockets are a protocol that allows full-duplex communication between a client
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Networking: WebSocket Support](https://reactnative.dev/docs/network)
|
||||
- [@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)
|
||||
@@ -1,8 +1,6 @@
|
||||
# React Native
|
||||
|
||||
React Native is a popular open-source framework developed by Facebook for building mobile applications using JavaScript (or TypeScript) and React. It enables developers to build native mobile apps for iOS and Android platforms using a single codebase, which significantly speeds up development without compromising on the performance and usability of the apps.
|
||||
|
||||
With React Native, you write components with JSX, a syntax that combines JavaScript and XML. These components can map to native UI elements like views, text, images, and more.
|
||||
React Native is an open-source framework created by Meta that allows developers to build mobile applications for iOS and Android using JavaScript and React. It enables the creation of apps that provide a native look and feel by leveraging native platform components rather than using web views. Because it shares a single codebase, developers can efficiently maintain and deploy applications across multiple mobile platforms simultaneously.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Why React Native?
|
||||
# Why use React Native?
|
||||
|
||||
React Native is a popular framework for developing native mobile applications using JavaScript (or TypeScript) and React, offering several compelling advantages for mobile app development. Key benefits include **code reusability**, allowing developers to share a significant portion of the codebase between iOS and Android, which reduces development time and simplifies maintenance. It leverages **familiar React concepts**, making it accessible for those already experienced with ReactJS, as it applies similar principles of components and state management. React Native provides **near-native performance** by directly interacting with native components, avoiding intermediaries like WebView. The framework benefits from a **vast ecosystem** and community support, with numerous libraries and tools that enhance the development process, bolstered by contributions from major companies like Facebook. Additionally, **hot reloading** enables developers to see code changes in real-time on devices or emulators, streamlining the development workflow. Finally, React Native can be **integrated into existing applications**, allowing for flexible enhancements to specific parts of an app.
|
||||
React Native allows developers to build mobile applications for both iOS and Android using a single codebase written in JavaScript and React. It achieves this by bridging your code to native platform components, which provides a smooth user experience and performance similar to apps built with platform-specific languages. This approach reduces development time and maintenance costs because most of the logic is shared across different mobile platforms.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@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)
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
# Platform Specific Code
|
||||
# Writing Platform Specific Code
|
||||
|
||||
In React Native, managing platform-specific code for iOS and Android is essential for addressing differences in application behavior and appearance. This can be achieved in two primary ways: using the `Platform` module, which allows developers to detect the current platform and apply conditional styles or logic accordingly, as demonstrated by using `Platform.select` to set different background colors for iOS and Android; and utilizing file extensions like `.ios.js` and `.android.js`, which enables React Native to automatically load the appropriate file based on the platform. For instance, if you have `Header.ios.js` and `Header.android.js`, importing the `Header` component will automatically reference the correct file for the running platform, streamlining the development process.
|
||||
Writing platform-specific code involves using specialized techniques to implement features or UI components that behave differently on iOS and Android. React Native provides tools like the `Platform` module to detect the operating system at runtime and file extensions such as `.ios.js` or `.android.js` to separate implementation files. This approach allows developers to access native APIs unique to a single platform while maintaining a shared codebase for the rest of the application.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
|
||||
Reference in New Issue
Block a user