cleanup all 95 topics. phew (#8519)
Vedansh
2 days ago
committed by
GitHub
parent
514377da63
commit
0a2e098c44
95 changed files with 322 additions and 2717 deletions
@ -1,82 +1,9 @@ |
||||
# Listings |
||||
|
||||
When working with listings in React Native, the commonly used components include: |
||||
When working with listings in React Native, commonly used components include **FlatList**, **SectionList**, and **VirtualizedList**. **FlatList** is a high-performance, scrollable list component that efficiently renders a large number of items. It is ideal for displaying simple lists of data. **SectionList** is similar but is used for displaying data in separate sections with headers, making it suitable for grouped data presentations. |
||||
|
||||
- **FlatList** - It is a high-performance, scrollable list component that renders a large number of items efficiently. |
||||
|
||||
Example: |
||||
```jsx |
||||
import { FlatList, Text } from 'react-native'; |
||||
**VirtualizedList** is a lower-level component that provides more fine-grained control over list rendering performance, making it useful for complex lists or when custom behavior is needed. These components are essential for managing dynamic data and displaying large lists effectively in React Native applications. |
||||
|
||||
const data = [ |
||||
{ id: 1, text: 'Item 1' }, |
||||
{ id: 2, text: 'Item 2' }, |
||||
{ id: 3, text: 'Item 3' }, |
||||
]; |
||||
Visit the following resources to learn more: |
||||
|
||||
const renderItem = ({ item }) => <Text>{item.text}</Text>; |
||||
|
||||
const MyFlatList = () => ( |
||||
<FlatList |
||||
data={data} |
||||
renderItem={renderItem} |
||||
keyExtractor={item => item.id.toString()} |
||||
/> |
||||
); |
||||
``` |
||||
|
||||
- **SectionList** - Similar to FlatList, but it is used when you want to display data in separate sections with section headers. |
||||
|
||||
Example: |
||||
```jsx |
||||
import { SectionList, Text } from 'react-native'; |
||||
|
||||
const sections = [ |
||||
{ title: 'Section 1', data: ['Item 1', 'Item 2', 'Item 3'] }, |
||||
{ title: 'Section 2', data: ['Item 4', 'Item 5', 'Item 6'] }, |
||||
]; |
||||
|
||||
const Item = ({ text }) => <Text>{text}</Text>; |
||||
const SectionHeader = ({ title }) => <Text>{title}</Text>; |
||||
|
||||
const MySectionList = () => ( |
||||
<SectionList |
||||
sections={sections} |
||||
renderItem={({ item }) => <Item text={item} />} |
||||
renderSectionHeader={({ section: { title } }) => ( |
||||
<SectionHeader title={title} /> |
||||
)} |
||||
keyExtractor={(item, index) => item + index} |
||||
/> |
||||
); |
||||
``` |
||||
|
||||
- **VirtualizedList** - A lower-level component for rendering large lists and for more fine-grained control over list rendering performance. |
||||
|
||||
Example: |
||||
```jsx |
||||
import { VirtualizedList, Text } from 'react-native'; |
||||
|
||||
const data = [ |
||||
{ id: 1, text: 'Item 1' }, |
||||
{ id: 2, text: 'Item 2' }, |
||||
{ id: 3, text: 'Item 3' }, |
||||
]; |
||||
|
||||
const getItemCount = data => data.length; |
||||
const getItem = (data, index) => data[index]; |
||||
|
||||
const renderItem = ({ item }) => <Text>{item.text}</Text>; |
||||
|
||||
const MyVirtualizedList = () => ( |
||||
<VirtualizedList |
||||
data={data} |
||||
renderItem={renderItem} |
||||
keyExtractor={item => item.id.toString()} |
||||
getItemCount={getItemCount} |
||||
getItem={getItem} |
||||
/> |
||||
); |
||||
``` |
||||
|
||||
These components are essential when dealing with dynamic data and displaying large lists in React Native applications. |
||||
- [@official@Using List Views](https://reactnative.dev/docs/using-a-listview) |
||||
|
||||
@ -1,45 +1,9 @@ |
||||
# Refresh Control |
||||
|
||||
`RefreshControl` is a component in React Native that is used to provide pull-to-refresh functionality for scrollable components like `ScrollView`, `ListView`, and `FlatList`. |
||||
`RefreshControl` is a component in React Native that is used to provide pull-to-refresh functionality for scrollable components like `ScrollView`, `ListView`, and `FlatList`. |
||||
|
||||
## How to use RefreshControl: |
||||
Visit the following resources to learn more: |
||||
|
||||
- Import `RefreshControl` from 'react-native': |
||||
``` |
||||
import { RefreshControl } from 'react-native'; |
||||
``` |
||||
- Add `RefreshControl` to a scrollable component (`ScrollView`, `ListView`, or `FlatList`). Here is an example with `FlatList`: |
||||
|
||||
```javascript |
||||
import React, { useState } from 'react'; |
||||
import { FlatList, RefreshControl, Text } from 'react-native'; |
||||
|
||||
const App = () => { |
||||
const [refreshing, setRefreshing] = useState(false); |
||||
|
||||
const fetchData = () => { |
||||
// Fetch the data and update your state accordingly |
||||
}; |
||||
|
||||
const onRefresh = () => { |
||||
setRefreshing(true); |
||||
fetchData().then(() => { |
||||
setRefreshing(false); |
||||
}); |
||||
}; |
||||
|
||||
return ( |
||||
<FlatList |
||||
data={['Item 1', 'Item 2', 'Item 3']} |
||||
renderItem={({ item }) => <Text>{item}</Text>} |
||||
refreshControl={ |
||||
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} /> |
||||
} |
||||
/> |
||||
); |
||||
}; |
||||
|
||||
export default App; |
||||
``` |
||||
|
||||
In the example above, we have a `FlatList` that renders a list of items. When the user pulls down the list, the `onRefresh` function is triggered and fetches new data. The `refreshing` state is used to control the visibility of the refresh indicator. When `refreshing` is set to `true`, the refresh indicator is shown. It is hidden when `refreshing` is set to `false`. |
||||
- [@official@Refresh Control](https://reactnative.dev/docs/refreshcontrol) |
||||
- [@official@ScrollView](https://reactnative.dev/docs/ScrollView) |
||||
- [@official@FlatList](https://reactnative.dev/docs/FlatList) |
||||
|
||||
@ -1,5 +1,7 @@ |
||||
# React Native - DevTools |
||||
# DevTools |
||||
|
||||
React Native DevTools are essential tools that help developers debug and optimize their applications during the development process. |
||||
|
||||
You can use the [standalone version of React Developer Tools](https://github.com/facebook/react/tree/main/packages/react-devtools) to debug the React component hierarchy. Visit the [React Native Documentation](https://reactnative.dev/docs/react-devtools) for more information. |
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Devtools](https://reactnative.dev/docs/react-devtools) |
||||
|
||||
@ -1,3 +1,9 @@ |
||||
# Debugging |
||||
|
||||
Debugging is an essential aspect of the development workflow in React Native. Learn all about debugging in React Native in the [Debugging section of the React Native documentation](https://reactnative.dev/docs/debugging). |
||||
Debugging is an essential aspect of the development workflow in React Native. Debugging in React Native is a crucial part of the development process, allowing developers to identify and fix issues in their applications |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Debugging](https://reactnative.dev/docs/debugging) |
||||
- [@official@Fast Refresh](https://reactnative.dev/docs/fast-refresh) |
||||
- [@official@Devtools](https://reactnative.dev/docs/react-devtools) |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
# Development Workflow |
||||
|
||||
React native has a decent guide on how to get started with development workflow. Visit the [Workflow section](https://reactnative.dev/docs/running-on-device) of the official documentation to learn about different topics. |
||||
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) |
||||
@ -1,3 +1,7 @@ |
||||
# Running on Device |
||||
|
||||
It's always a good idea to test your app on an actual device before releasing it to your users. [This document](https://reactnative.dev/docs/running-on-device) will guide you through the necessary steps to run your React Native app on a device and to get it ready for production. |
||||
It's always a good idea to test your app on an actual device before releasing it to your users. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Running on Device](https://reactnative.dev/docs/running-on-device) |
||||
@ -1,29 +1,7 @@ |
||||
# Expo Tradeoffs |
||||
|
||||
Expo is a powerful tool that simplifies the React Native development process, but it has some limitations. Here's a summary of the tradeoffs you may face when using Expo. |
||||
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. |
||||
|
||||
## Limited native modules |
||||
Visit the following resources to learn more: |
||||
|
||||
Expo offers a set of pre-built native modules, which are really helpful but might not cover all the functionalities required for your specific app. If you need a custom native module or a third-party library that is not supported by Expo, you'll have to eject from the Expo managed workflow and switch to the bare-workflow or create a custom native module (native code) yourself. |
||||
|
||||
## Performance |
||||
|
||||
Expo adds an extra layer to your React Native app, which can cause performance issues, especially for large or complex apps. The bare-workflow may provide better performance as you have more control over the native libraries and app optimization. |
||||
|
||||
## App size |
||||
|
||||
Expo apps tend to have a larger app size because they include the entire Expo SDK, regardless of which modules you use in your app. In contrast, non-Expo apps can optimize their size by including only the required native modules. |
||||
|
||||
## Updates and upgrades |
||||
|
||||
When you rely on Expo, you depend on their release cycle for updates and upgrades. If React Native adds a new feature or fixes a bug, you have to wait for an updated Expo version to implement it. This may cause delays or limitations in your app development process. |
||||
|
||||
## Ejecting complications |
||||
|
||||
If you start a project with Expo and later decide to eject and use regular React Native, you might face challenges migrating your code and adjusting to the new configuration. You may need to rewrite some parts of your code or manually migrate dependencies. |
||||
|
||||
## Limited customizability |
||||
|
||||
Expo abstracts various aspects of customization and configuration, which can be a double-edged sword. If you need additional customizations that are not supported by Expo, you'll have to eject or switch to a bare-workflow project, which gives you more control over the native code. |
||||
|
||||
In summary, while Expo offers great tooling and simplifies the development process, it has certain limitations that you should consider before choosing it for your app development. |
||||
- [@article@Should you use Expo or Bare React Native?](https://medium.com/@andrew.chester/should-you-use-expo-or-bare-react-native-8dd400f4a468/) |
||||
@ -1,77 +1,8 @@ |
||||
# Touchables |
||||
|
||||
In React Native, `Touchable` components are used to handle user interactions like taps, long presses, and double-taps on the appropriate elements. The main Touchable components include: |
||||
In React Native, `Touchable` components are used to handle user interactions like taps, long presses, and double-taps on the appropriate elements. Each of these components is from the `react-native` package, except `TouchableScale` which is from `react-native-touchable-scale`. They can be used interchangeably depending on the type of interaction you want to provide. The main `props` used with these components are `onPress`, `onLongPress`, and some component-specific ones like `underlayColor` for `TouchableHighlight`. |
||||
|
||||
- `TouchableOpacity`: The opacity of the wrapped view is decreased when it's active. |
||||
|
||||
```jsx |
||||
import { TouchableOpacity } from 'react-native'; |
||||
Visit the following resources to learn more: |
||||
|
||||
<TouchableOpacity |
||||
onPress={() => { |
||||
alert('Tapped!'); |
||||
}} |
||||
> |
||||
<Text>Tap me</Text> |
||||
</TouchableOpacity> |
||||
``` |
||||
|
||||
- `TouchableHighlight`: The view is highlighted with a specified color when active. |
||||
|
||||
```jsx |
||||
import { TouchableHighlight } from 'react-native'; |
||||
|
||||
<TouchableHighlight |
||||
onPress={() => { |
||||
alert('Tapped!'); |
||||
}} |
||||
underlayColor="gray" |
||||
> |
||||
<Text>Tap me</Text> |
||||
</TouchableHighlight> |
||||
``` |
||||
|
||||
- `TouchableWithoutFeedback`: No visual feedback is provided when the view is tapped. |
||||
|
||||
```jsx |
||||
import { TouchableWithoutFeedback } from 'react-native'; |
||||
|
||||
<TouchableWithoutFeedback |
||||
onPress={() => { |
||||
alert('Tapped!'); |
||||
}} |
||||
> |
||||
<Text>Tap me</Text> |
||||
</TouchableWithoutFeedback> |
||||
``` |
||||
|
||||
- `TouchableNativeFeedback`: Provides additional Android-specific visual feedback. |
||||
|
||||
```jsx |
||||
import { TouchableNativeFeedback } from 'react-native'; |
||||
|
||||
<TouchableNativeFeedback |
||||
onPress={() => { |
||||
alert('Tapped!'); |
||||
}} |
||||
> |
||||
<Text>Tap me</Text> |
||||
</TouchableNativeFeedback> |
||||
``` |
||||
|
||||
- `TouchableScale`: The view will slightly change scale when pressed. |
||||
|
||||
```jsx |
||||
import { TouchableScale } from 'react-native-touchable-scale'; |
||||
|
||||
<TouchableScale |
||||
onPress={() => { |
||||
alert('Tapped!'); |
||||
}} |
||||
activeScale={0.9} |
||||
> |
||||
<Text>Tap me</Text> |
||||
</TouchableScale> |
||||
``` |
||||
|
||||
Each of these components is from the `react-native` package, except `TouchableScale` which is from `react-native-touchable-scale`. They can be used interchangeably depending on the type of interaction you want to provide. The main `props` used with these components are `onPress`, `onLongPress`, and some component-specific ones like `underlayColor` for `TouchableHighlight`. |
||||
- [@official@Handling Touches](https://reactnative.dev/docs/handling-touches) |
||||
- [@official@TouchableOpacity](https://reactnative.dev/docs/touchableopacity) |
||||
|
||||
@ -1,10 +1,8 @@ |
||||
# Why React Native? |
||||
|
||||
React Native is a widely popular framework for building native mobile applications using JavaScript (or TypeScript) and React. There are plenty of reasons why you would want to choose React Native for your next mobile app development project: |
||||
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. |
||||
|
||||
- **Code Reusability:** React Native allows you to share a significant amount of your codebase between iOS and Android platforms. This not only reduces the development time but also makes it easier to maintain the app. |
||||
- **Familiar React Concepts:** If you're already familiar with ReactJS, React Native will feel right at home for you. Since it's based on React, the same principles of components and state management apply in React Native too. |
||||
- **Native Performance:** React Native apps deliver near-native performance as the framework works directly with native components like Views and Text, thus eliminating the need for WebView or other similar intermediaries. |
||||
- **Vast Ecosystem:** React Native enjoys a huge community and vast ecosystem that includes a wide range of libraries and tools that simplify and accelerate the development process. Additionally, Facebook and other major companies actively contribute to the growth and improvement of React Native. |
||||
- **Hot Reloading:** React Native supports hot-reloading, which means you can see the changes you make in your code directly on the device/emulator without having to recompile or rebuild the app entirely. This makes for a faster and more efficient development process. |
||||
- **Integration with Existing Apps:** Can be incorporated into existing mobile applications, providing flexibility to extend only parts of an app. |
||||
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) |
||||
|
||||
@ -1,74 +1,7 @@ |
||||
# Common Problem Sources |
||||
|
||||
## 1. Console Logs |
||||
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. |
||||
|
||||
Excessive console logs can lead to decreased performance in React Native, especially in debug mode. In order to avoid this, keep the usage of console logging to a minimum, and clean up unnecessary logs before releasing the app. |
||||
Visit the following resources to learn more: |
||||
|
||||
## 2. Images |
||||
|
||||
Heavy and unoptimized images can lead to performance issues in React Native. To avoid this, use the following techniques: |
||||
|
||||
- Optimize image size and resolution before bundling them in the application. |
||||
- Use `resizeMode` prop on the `Image` component to cache images for better rendering. |
||||
|
||||
```jsx |
||||
<Image source={require('./my-image.png')} resizeMode="cover" /> |
||||
``` |
||||
|
||||
## 3. Inline Functions and Styles |
||||
|
||||
Using inline functions and styles within components can lead to unnecessary re-rendering and performance issues. Instead, define functions and styles outside of the component render method. |
||||
|
||||
```jsx |
||||
// Bad |
||||
render() { |
||||
return ( |
||||
<TouchableOpacity onPress={() => this.onPress()}> |
||||
<Text style={{fontSize: 16, color: 'blue'}}>Click me</Text> |
||||
</TouchableOpacity> |
||||
); |
||||
} |
||||
|
||||
// Good |
||||
const styles = StyleSheet.create({ |
||||
buttonText: { |
||||
fontSize: 16, |
||||
color: 'blue', |
||||
}, |
||||
}); |
||||
|
||||
onPressHandler = () => { |
||||
// Handle press |
||||
}; |
||||
|
||||
render() { |
||||
return ( |
||||
<TouchableOpacity onPress={this.onPressHandler}> |
||||
<Text style={styles.buttonText}>Click me</Text> |
||||
</TouchableOpacity> |
||||
); |
||||
} |
||||
``` |
||||
|
||||
## 4. PureComponent and React.memo |
||||
|
||||
Components that extend `React.PureComponent` or are wrapped in `React.memo()` can lead to performance issues in case they're updating frequently and causing unnecessary re-renders. Make sure to only use them when appropriate to avoid performance bottlenecks. |
||||
|
||||
## 5. ListView and FlatList |
||||
|
||||
When working with large lists in React Native, using `ListView` instead of `FlatList` can cause performance issues. Replace `ListView` with the more performant `FlatList` or `SectionList` components. |
||||
|
||||
```jsx |
||||
// Use FlatList instead of ListView |
||||
<FlatList |
||||
data={this.state.data} |
||||
renderItem={({item}) => <MyListItemComponent item={item} />} |
||||
keyExtractor={(item) => item.id} |
||||
/> |
||||
``` |
||||
|
||||
## 6. JavaScript Thread Blockage |
||||
|
||||
Blocking the JavaScript thread with expensive synchronous computations can lead to poor performance. Make sure to handle heavy computations asynchronously or offload them to native modules. |
||||
|
||||
Read more in the [Official React Native documentation](https://reactnative.dev/docs/performance#common-sources-of-performance-problems). |
||||
- [@official@Performance Problems](https://reactnative.dev/docs/performance#common-sources-of-performance-problems) |
||||
|
||||
@ -1,84 +1,17 @@ |
||||
# Optimizing FlatList Config |
||||
|
||||
In React Native, the FlatList component is used to efficiently display large lists of items. It's crucial to optimize the FlatList configuration for better performance. Here are some important tips to help you optimize FlatList configurations: |
||||
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` |
||||
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. |
||||
|
||||
`windowSize` is a prop that determines the number of pages rendered above and below the current window. By default, this value is 21. You can decrease it based on your needs to reduce the number of off-screen rendered components. |
||||
2. **Enable `removeClippedSubviews`**: This prop unmounts components that are off-screen, helping to free up resources. |
||||
|
||||
Example: |
||||
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. |
||||
|
||||
```javascript |
||||
<FlatList |
||||
data={data} |
||||
renderItem={renderItem} |
||||
keyExtractor={item => item.id} |
||||
windowSize={10} |
||||
/> |
||||
``` |
||||
4. **Set `initialNumToRender`**: This prop defines how many items to render initially, helping to prevent blank screens during loading. |
||||
|
||||
## 2. Set `removeClippedSubviews` |
||||
5. **Use `getItemLayout`**: By specifying the exact dimensions of each item with this prop, you can avoid dynamic measurements, leading to better performance. |
||||
|
||||
Enable the `removeClippedSubviews` prop to unmount components that are off the screen. |
||||
Visit the following resources to learn more: |
||||
|
||||
Example: |
||||
|
||||
```javascript |
||||
<FlatList |
||||
data={data} |
||||
renderItem={renderItem} |
||||
keyExtractor={item => item.id} |
||||
removeClippedSubviews={true} |
||||
/> |
||||
``` |
||||
|
||||
## 3. Set `maxToRenderPerBatch` |
||||
|
||||
`maxToRenderPerBatch` prop helps to control the number of items to be rendered per batch. By default, this is set to 10. Optimize this value according to your list's requirements. |
||||
|
||||
Example: |
||||
|
||||
```javascript |
||||
<FlatList |
||||
data={data} |
||||
renderItem={renderItem} |
||||
keyExtractor={item => item.id} |
||||
maxToRenderPerBatch={5} |
||||
/> |
||||
``` |
||||
|
||||
## 4. Set `initialNumToRender` |
||||
|
||||
`initialNumToRender` is used to set the number of items to be rendered initially. Setting this value to a reasonable number can help in avoiding blank screens on load. |
||||
|
||||
Example: |
||||
|
||||
```javascript |
||||
<FlatList |
||||
data={data} |
||||
renderItem={renderItem} |
||||
keyExtractor={item => item.id} |
||||
initialNumToRender={10} |
||||
/> |
||||
``` |
||||
|
||||
## 5. Set `getItemLayout` |
||||
|
||||
Using the `getItemLayout` prop allows you to specify the exact dimensions of each item. This prevents the need for measuring them dynamically, resulting in improved performance. |
||||
|
||||
Example: |
||||
|
||||
```javascript |
||||
<FlatList |
||||
data={data} |
||||
renderItem={renderItem} |
||||
keyExtractor={item => item.id} |
||||
getItemLayout={(data, index) => ( |
||||
{length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index} |
||||
)} |
||||
/> |
||||
``` |
||||
|
||||
Implementing these optimizations in your FlatList config will help improve the performance of large lists in your React Native application. |
||||
|
||||
- [@article@Optimizing Flatlist Configuration](https://reactnative.dev/docs/optimizing-flatlist-configuration) |
||||
- [@official@Optimizing Flatlist Configuration](https://reactnative.dev/docs/optimizing-flatlist-configuration) |
||||
@ -1,68 +1,8 @@ |
||||
# File Extensions |
||||
|
||||
In React Native, you can write platform-specific code by using specific file extensions. By appending `.android.` or `.ios.` to your file's name, React Native will load the file corresponding to the platform you are running your app on. |
||||
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. |
||||
|
||||
There are two main scenarios where you can use this approach: |
||||
Visit the following resources to learn more: |
||||
|
||||
## Platform-Specific Component Files |
||||
|
||||
You can create separate files for each platform's specific components, keeping the implementation and styling different for Android and iOS. |
||||
|
||||
For example, if you have a `Header` component, you can create two separate files `Header.ios.js` and `Header.android.js`. React Native will automatically pick the right file depending on the platform it's running on. |
||||
|
||||
```javascript |
||||
// Header.ios.js |
||||
import React from 'react'; |
||||
import { View, Text } from 'react-native'; |
||||
|
||||
const Header = () => { |
||||
return ( |
||||
<View style={{ backgroundColor: 'blue' }}> |
||||
<Text>iOS Header</Text> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default Header; |
||||
``` |
||||
|
||||
```javascript |
||||
// Header.android.js |
||||
import React from 'react'; |
||||
import { View, Text } from 'react-native'; |
||||
|
||||
const Header = () => { |
||||
return ( |
||||
<View style={{ backgroundColor: 'green' }}> |
||||
<Text>Android Header</Text> |
||||
</View> |
||||
); |
||||
}; |
||||
|
||||
export default Header; |
||||
``` |
||||
|
||||
## Platform-Specific Code within a File |
||||
|
||||
You can also use the `Platform` module from React Native to determine which platform-specific code to run within a single file. |
||||
|
||||
```javascript |
||||
import { Platform, StyleSheet, Text } from 'react-native'; |
||||
|
||||
const ComponentWithPlatformSpecificCode = () => { |
||||
return <Text style={styles.content}>Hello World!</Text>; |
||||
}; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
content: { |
||||
color: Platform.select({ |
||||
ios: 'blue', |
||||
android: 'green', |
||||
}), |
||||
}, |
||||
}); |
||||
|
||||
export default ComponentWithPlatformSpecificCode; |
||||
``` |
||||
|
||||
Using file extensions and the `Platform` module, you can create tailor-made components and features for different platforms while maintaining a clean and organized codebase. |
||||
- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code) |
||||
- [@official@App Extensions](https://reactnative.dev/docs/app-extensions) |
||||
|
||||
@ -1,39 +1,8 @@ |
||||
# Platform Specific Code |
||||
|
||||
In React Native, you might need to maintain certain parts of your application differently for iOS and Android. This is where "Platform Specific Code" comes into play. There are two ways you can achieve this: |
||||
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. |
||||
|
||||
## Platform module |
||||
Visit the following resources to learn more: |
||||
|
||||
React Native provides a `Platform` module that can be used to detect which platform your code is running on (iOS or Android). This can be helpful when you have minor platform differences in your code execution, component styles, or API calls. |
||||
|
||||
**Example:** |
||||
|
||||
```javascript |
||||
import { Platform, StyleSheet } from 'react-native'; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
...Platform.select({ |
||||
ios: { |
||||
backgroundColor: 'red', |
||||
}, |
||||
android: { |
||||
backgroundColor: 'blue', |
||||
}, |
||||
}), |
||||
}, |
||||
}); |
||||
``` |
||||
|
||||
## File extensions |
||||
|
||||
Another way to handle platform-specific logic is by using file extensions like `.ios.js` and `.android.js`. By naming your files with these extensions, React Native will automatically pick up the appropriate file based on the platform the app is running on. |
||||
|
||||
**Example:** |
||||
|
||||
Let's say you have two files in your project, `Header.ios.js` and `Header.android.js`. When you import the `Header` component in your code, React Native will automatically import the correct file for the platform. |
||||
|
||||
```javascript |
||||
// App.js |
||||
import Header from './Header'; |
||||
``` |
||||
- [@official@Platform-Specific Code](https://reactnative.dev/docs/platform-specific-code) |
||||
- [@official@App Extensions](https://reactnative.dev/docs/app-extensions) |
||||
|
||||
@ -1,6 +1,9 @@ |
||||
# Learn the Pre-requisites |
||||
|
||||
Before you start learning React Native, you should have a basic knowledge of [JavaScript](/javascript) and [React](/react). You don't need to fully master these topics, but you should be familiar with them. Learn the basics of JavaScript (e.g. topics marked for beginners in [JavaScript Roadmap](/javascript) and continue with React Native. I have heard good things about official React Native documentation, so you can start there and pick up the relevant topics wherever needed. |
||||
Before you start learning React Native, you should have a basic knowledge of JavaScript and React. You don't need to fully master these topics, but you should be familiar with them. Learn the basics of JavaScript (e.g. topics marked for beginners in JavaScript Roadmap and continue with React Native. |
||||
|
||||
- [@roadmap.sh@Learn Beginner Topics in JavaScript](/javascript) |
||||
- [@article@React Native Basics](https://reactnative.dev/docs/getting-started) |
||||
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) |
||||
|
||||
@ -1,6 +1,10 @@ |
||||
# 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. |
||||
|
||||
- [@roadmap.sh@Learn Beginner Topics in JavaScript Roadmap](/javascript) |
||||
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) |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
# Publishing Apps |
||||
|
||||
Publishing React Native apps is the process of deploying your application on various app stores so that users can download and use your app. The two most popular app stores for publishing are the Apple App Store (iOS) and the Google Play Store (Android). |
||||
Publishing React Native apps is the process of deploying your application on various app stores so that users can download and use your app. The two most popular app stores for publishing are the Apple App Store (iOS) and the Google Play Store (Android). |
||||
|
||||
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) |
||||
|
||||
@ -1,84 +1,10 @@ |
||||
# Security |
||||
|
||||
# React Native Security |
||||
Security is a vital consideration in React Native application development, as it helps protect user data and sensitive information. Key best practices include using secure storage solutions for sensitive data, such as authentication tokens and user credentials, with libraries like `react-native-keychain` and `react-native-encrypted-storage`. For secure communication, always use HTTPS for API interactions to ensure that data exchanged between the client and server is encrypted. Additionally, minimize permissions by requesting only those necessary for the app's functionality, ideally at runtime, using libraries like `react-native-permissions`. |
||||
|
||||
React Native is a framework for building cross-platform mobile applications using JavaScript and ReactJS. As with any application development, security is a crucial aspect to protect your application data and user information. Here is a brief overview of some React Native security best practices. |
||||
Validating and sanitizing user input is crucial to prevent threats like SQL injection and cross-site scripting (XSS), which can be achieved with validation libraries such as `Yup`. Lastly, keeping dependencies up to date is essential to avoid known security vulnerabilities; tools like `npm audit` and Dependabot can assist in this process. By adhering to these best practices, developers can enhance the security of their React Native applications, safeguarding both application data and user information. |
||||
|
||||
## 1. Secure Storage |
||||
Store sensitive data, such as authentication tokens, encryption keys, or user credentials, securely using a storage solution that comes with built-in encryption mechanisms. |
||||
Visit the following resources to learn more: |
||||
|
||||
### Example: |
||||
For React Native, [react-native-keychain](https://github.com/oblador/react-native-keychain) and [react-native-encrypted-storage](https://github.com/emeraldsanto/react-native-encrypted-storage) are popular libraries handling secure storage. |
||||
|
||||
```javascript |
||||
import * as Keychain from 'react-native-keychain'; |
||||
|
||||
// Save data to the keychain |
||||
await Keychain.setGenericPassword(username, password); |
||||
|
||||
// Retrieve data from the keychain |
||||
const credentials = await Keychain.getGenericPassword(); |
||||
``` |
||||
|
||||
## 2. Secure Communication |
||||
Use HTTPS for network communication with APIs and remote services. This ensures that the data exchanged between server and client is encrypted and secure. |
||||
|
||||
### Example: |
||||
Use the [fetch](https://reactnative.dev/docs/network) method with URLs starting with 'https://'. |
||||
|
||||
```javascript |
||||
const response = await fetch('https://example.com/api/data'); |
||||
const data = await response.json(); |
||||
``` |
||||
|
||||
## 3. Minimize Permissions |
||||
Request only the necessary permissions from the user that your application needs to function, and do this at runtime when the feature actually needs the permission. |
||||
|
||||
### Example: |
||||
Using [react-native-permissions](https://github.com/zoontek/react-native-permissions), you can request permissions when they are needed: |
||||
|
||||
```javascript |
||||
import {check, PERMISSIONS, request, RESULTS} from 'react-native-permissions'; |
||||
|
||||
async function requestLocationPermission() { |
||||
const result = await check(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE); |
||||
|
||||
if (result === RESULTS.DENIED) { |
||||
return await request(PERMISSIONS.IOS.LOCATION_WHEN_IN_USE); |
||||
} |
||||
|
||||
return result; |
||||
} |
||||
``` |
||||
|
||||
## 4. Validate User Input |
||||
Ensure you validate and sanitize all user input before processing it. This helps to prevent potential threats like SQL injection or cross-site scripting (XSS). |
||||
|
||||
### Example: |
||||
Use a validation library like [Yup](https://github.com/jquense/yup) to validate user input. |
||||
|
||||
```javascript |
||||
import * as Yup from 'yup'; |
||||
|
||||
const loginSchema = Yup.object({ |
||||
email: Yup.string().email('Invalid email address').required('Required'), |
||||
password: Yup.string() |
||||
.min(8, 'Password must be at least 8 characters') |
||||
.required('Required'), |
||||
}); |
||||
|
||||
loginSchema.validate({email: 'user@example.com', password: 'password'}); |
||||
``` |
||||
|
||||
## 5. Keep Dependencies Up to Date |
||||
Regularly update your dependencies to ensure they don't contain known security vulnerabilities. Use tools like [npm audit](https://docs.npmjs.com/cli/commands/npm-audit) and [dependabot](https://github.com/dependabot/dependabot-core) to automatically audit and update your dependencies. |
||||
|
||||
### Example: |
||||
Using npm, you can update your dependencies and check for potential vulnerabilities: |
||||
|
||||
```bash |
||||
npm update |
||||
npm audit |
||||
``` |
||||
|
||||
Following these best practices will help you create more secure React Native applications, protecting your application's data and your users' information. |
||||
- [@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) |
||||
|
||||
@ -1,9 +1,14 @@ |
||||
# Networking |
||||
|
||||
React Native offers various ways to handle networking tasks like making API calls, sending/receiving data from remote servers, and handling different network protocols. |
||||
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. |
||||
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) |
||||
|
||||
@ -1,6 +1,8 @@ |
||||
# react-native-async-storage |
||||
# React Native Async Storage |
||||
|
||||
An asynchronous, unencrypted, persistent, key-value storage system for React Native. |
||||
React Native AsyncStorage is an unencrypted, asynchronous, persistent key-value storage system that allows developers to store data globally within their applications. It is primarily used for persisting data offline, making it suitable for scenarios like saving user preferences or session data. |
||||
|
||||
- [@opensource@Visit the Documentation](https://github.com/react-native-async-storage/async-storage) |
||||
- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh) |
||||
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) |
||||
|
||||
@ -1,5 +1,9 @@ |
||||
# 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](https://docs.expo.dev/versions/latest/sdk/sqlite/) package, which provides an easy-to-use interface for SQLite functionalities. |
||||
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. |
||||
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. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@expo-sqlite](https://docs.expo.dev/versions/latest/sdk/sqlite/) |
||||
|
||||
@ -1,10 +1,7 @@ |
||||
# Storage |
||||
|
||||
React Native provides a few ways to persist data locally in the app. Here's a brief summary of the storage options available: |
||||
React Native offers several methods for persisting data locally within applications, each catering to different storage needs and use cases. The primary options include Async Storage, which provides a simple key-value storage system suitable for small-scale data; Expo Secure Store, designed for securely storing sensitive information; Expo File System, which allows for file management and storage; and Expo SQLite, which supports more complex data storage and querying capabilities. When selecting a storage option, it's essential to consider the specific requirements of your app. |
||||
|
||||
- Async Storage |
||||
- Expo Secure Store |
||||
- Expo File System |
||||
- Expo SQLite |
||||
Visit the following resources to learn more: |
||||
|
||||
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. |
||||
- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k) |
||||
|
||||
@ -1,89 +1,7 @@ |
||||
# Accessibility |
||||
|
||||
Accessibility (a11y) in React Native allows you to create applications that are usable to everyone, including people with disabilities. It provides a set of attributes and APIs to customize UI components by considering diverse user needs. |
||||
Accessibility (often abbreviated as a11y) in React Native is a crucial aspect of application development that ensures your applications are usable by everyone, including individuals with disabilities. This commitment to inclusivity is not just a legal requirement in many jurisdictions but also a moral imperative that enhances the user experience for all. React Native provides a comprehensive set of accessibility features, attributes, and APIs that allow developers to create applications that cater to diverse user needs. By implementing these features, developers can ensure that their applications are navigable and usable by individuals with visual, auditory, motor, or cognitive impairments. |
||||
|
||||
## Accessibility Props |
||||
Visit the following resources to learn more: |
||||
|
||||
React Native provides several accessibility properties that can be applied to components for enhancing their a11y features: |
||||
|
||||
`accessible` : (Boolean) - Indicates if the element can be focused by screen readers. |
||||
```jsx |
||||
<TouchableOpacity accessible={true} /> |
||||
``` |
||||
|
||||
`accessibilityLabel` : (String) - Used by the screen reader to describe the element to the user. |
||||
```jsx |
||||
<TouchableOpacity accessibilityLabel="Tap me!"> |
||||
``` |
||||
|
||||
`accessibilityHint` : (String) - Gives a hint to the user of the components behavior. |
||||
```jsx |
||||
<TouchableOpacity accessibilityHint="Tapping this button will show a welcome text"> |
||||
``` |
||||
|
||||
`accessibilityRole` : (String) - Describes the role of the element for the screen reader. |
||||
```jsx |
||||
<TextInput accessibilityRole="search" /> |
||||
``` |
||||
|
||||
`accessibilityValue` : (Object with properties: min, max, now) - Defines the accessibility values for elements such as progress bars or sliders, among others. |
||||
|
||||
```jsx |
||||
<Slider |
||||
accessibilityValue={{ |
||||
min: 0, |
||||
max: 100, |
||||
now: 50, |
||||
}} |
||||
/> |
||||
``` |
||||
|
||||
`accessibilityState` : (Object) - Represents the current state of the component. |
||||
```jsx |
||||
<TouchableOpacity |
||||
accessibilityState={{ |
||||
disabled: false, |
||||
selected: true, |
||||
}} |
||||
/> |
||||
``` |
||||
|
||||
`accessibilityActions` and `onAccessibilityAction` are used to create custom actions. |
||||
```jsx |
||||
import { AccessibilityInfo, Text, View } from 'react-native'; |
||||
|
||||
function CustomButton() { |
||||
const [count, setCount] = React.useState(0); |
||||
|
||||
const onIncrement = () => { |
||||
setCount(count + 1); |
||||
}; |
||||
|
||||
React.useEffect(() => { |
||||
const announce = () => { |
||||
AccessibilityInfo.announceForAccessibility(`Count raised to ${count}`); |
||||
}; |
||||
announce(); |
||||
}, [count]); |
||||
|
||||
return ( |
||||
<View |
||||
accessible={true} |
||||
accessibilityActions={[ |
||||
{ name: "increment", label: "increase count" }, |
||||
]} |
||||
onAccessibilityAction={(event) => { |
||||
switch (event.nativeEvent.actionName) { |
||||
case "increment": |
||||
onIncrement(); |
||||
break; |
||||
} |
||||
}} |
||||
> |
||||
<Text>Increment Counter: {count}</Text> |
||||
</View> |
||||
); |
||||
} |
||||
``` |
||||
|
||||
Of course, different platforms may have some exclusive accessibility properties, which can be found in the [official React Native documentation](https://reactnative.dev/docs/accessibility). |
||||
- [@official@Accessibility](https://reactnative.dev/docs/accessibility) |
||||
@ -1,87 +1,9 @@ |
||||
# Styling |
||||
|
||||
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 |
||||
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. |
||||
|
||||
```jsx |
||||
import { StyleSheet, View, Text } from 'react-native'; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
backgroundColor: '#fff', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}, |
||||
text: { |
||||
fontSize: 20, |
||||
fontWeight: 'bold', |
||||
}, |
||||
}); |
||||
``` |
||||
|
||||
## View and Text components |
||||
|
||||
`View` and `Text` components are the basic building blocks for creating a user interface in React Native. They are used to add structure and style to the layout. |
||||
|
||||
```jsx |
||||
import React from 'react'; |
||||
import { StyleSheet, View, Text } from 'react-native'; |
||||
|
||||
export default function App() { |
||||
return ( |
||||
<View style={styles.container}> |
||||
<Text style={styles.text}>Hello, React Native!</Text> |
||||
</View> |
||||
); |
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
container: { |
||||
flex: 1, |
||||
backgroundColor: '#fff', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}, |
||||
text: { |
||||
fontSize: 20, |
||||
fontWeight: 'bold', |
||||
}, |
||||
}); |
||||
``` |
||||
|
||||
## Inline styles |
||||
|
||||
In some cases, you might prefer to apply styles directly to a component using inline styling. However, it is not recommended for larger applications due to performance issues. |
||||
|
||||
```jsx |
||||
import React from 'react'; |
||||
import { View, Text } from 'react-native'; |
||||
|
||||
export default function App() { |
||||
return ( |
||||
<View |
||||
style={{ |
||||
flex: 1, |
||||
backgroundColor: '#fff', |
||||
alignItems: 'center', |
||||
justifyContent: 'center', |
||||
}} |
||||
> |
||||
<Text |
||||
style={{ |
||||
fontSize: 20, |
||||
fontWeight: 'bold', |
||||
}} |
||||
> |
||||
Hello, React Native! |
||||
</Text> |
||||
</View> |
||||
); |
||||
} |
||||
``` |
||||
Visit the following resources to learn more: |
||||
|
||||
In summary, styling in React Native is done through JavaScript using a subset of CSS properties. The main components used for styling are `StyleSheet`, `View`, and `Text`. You can also use inline styles when necessary, although it's not recommended for performance reasons. |
||||
- [@official@Styling](https://reactnative.dev/docs/style) |
||||
@ -1,9 +1,7 @@ |
||||
# Appium |
||||
|
||||
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 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. |
||||
|
||||
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: |
||||
|
||||
Learn more about Appium from the following resources: |
||||
|
||||
- [@official@Appium Documentation](http://appium.io/) |
||||
- [@official@Appium Documentation](https://appium.io/docs/en/latest/) |
||||
@ -1,11 +1,10 @@ |
||||
# Jest |
||||
|
||||
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. |
||||
It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! |
||||
Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Official Website](https://jestjs.io/) |
||||
- [@article@Official Documentation](https://jestjs.io/docs/getting-started) |
||||
- [@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) |
||||
|
||||
@ -1,6 +1,8 @@ |
||||
# For Android |
||||
|
||||
Visit the Native Modules documentation in react native documentation to learn more about this topic. |
||||
Native modules in React Native provide a powerful way to access device-specific features and capabilities that are not available through the standard React Native APIs. For example, a Bluetooth module can be created using the Android Bluetooth API, allowing applications to scan for nearby Bluetooth devices, connect to them, and transfer data. |
||||
|
||||
- [@article@Android Native Modules](https://reactnative.dev/docs/turbo-native-modules-introduction?platforms=android) |
||||
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) |
||||
|
||||
@ -1,6 +1,8 @@ |
||||
# For iOS |
||||
|
||||
Visit the Native Modules documentation in react native documentation to learn more about this topic. |
||||
iOS native modules in React Native allow developers to tap into the rich ecosystem of iOS features and functionalities that are not directly accessible through the standard React Native APIs. For instance, a Camera module can be implemented using the AVFoundation framework, enabling developers to capture photos and videos directly from their applications. |
||||
|
||||
- [@article@iOS Native Modules](https://reactnative.dev/docs/turbo-native-modules-introduction?platforms=android) |
||||
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) |
||||
|
||||
Loading…
Reference in new issue