### Installing ESLint Plugin React via npm

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This command installs `eslint-plugin-react` as a development dependency. It's recommended for comprehensive React linting when using `eslint-plugin-react-native`.

```Shell
npm install --save-dev eslint-plugin-react
```

--------------------------------

### Installing ESLint Plugin React Native via npm

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This command installs `eslint-plugin-react-native` as a development dependency, providing React Native specific linting rules for your project.

```Shell
npm install --save-dev eslint-plugin-react-native
```

--------------------------------

### Installing ESLint via npm

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This command installs ESLint as a development dependency in your project. ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.

```Shell
npm install --save-dev eslint
```

--------------------------------

### Custom `iosPathRegex` Configuration Example

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet provides an example of configuring the `iosPathRegex` option for the `react-native/split-platform-components` ESLint rule. It sets a regular expression to match iOS-specific files ending with `.ios.js`, `.ios.jsx`, `.ios.ts`, or `.ios.tsx`.

```JavaScript
'react-native/split-platform-components': [2, {iosPathRegex: '\\.ios.(js|jsx|ts|tsx)$'}]
```

--------------------------------

### Custom `androidPathRegex` Configuration Example

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet provides an example of configuring the `androidPathRegex` option for the `react-native/split-platform-components` ESLint rule. It sets a regular expression to match Android-specific files ending with `.android.js`, `.android.jsx`, `.android.ts`, or `.android.tsx`.

```JavaScript
'react-native/split-platform-components': [2, {androidPathRegex: '\\.android.(js|jsx|ts|tsx)$'}]
```

--------------------------------

### Warning: Mixed Platform Components in Generic JS File

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This example shows a generic file containing both Android (`ProgressBarAndroid`) and iOS (`ActivityIndicatiorIOS`) specific components. This is a warning pattern, as such components should be split into their respective platform-specific files to ensure correct bundling.

```JavaScript
const React = require('react-native');
const {
  ProgressBarAndroid,
  ActivityIndicatiorIOS,
  View
} = React;

const Hello = React.createClass({
  render: function() {
    return <View>
      <ProgressBarAndroid />
      <ActivityIndicatiorIOS />
    </View>;
  }
});
```

--------------------------------

### ESLint Warning: Unsorted React Native Styles (Ascending Default)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/sort-styles.md

These JavaScript code snippets demonstrate `StyleSheet.create` definitions that trigger ESLint warnings under the default `react-native/sort-styles` rule (ascending order). The first example shows unsorted style properties, while the second shows unsorted class names.

```JavaScript
const styles = StyleSheet.create({
  button: {
    width: 100,
    color: 'green',
  },
});
```

```JavaScript
const styles = StyleSheet.create({
  button: {},
  anchor: {},
});
```

--------------------------------

### Applying StyleSheet Rule Directly in React Native (No Warning)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-unused-styles.md

This example shows a `StyleSheet` rule (`name`) that is correctly applied to a `Text` component via the `style` prop, indicating proper usage. The ESLint rule recognizes this direct application, thus generating no warning.

```JavaScript
const styles = StyleSheet.create({
  name: {}
});

const Hello = React.createClass({
  render: function() {
    return <Text style={styles.name}>Hello {this.props.name}</Text>;
  }
});
```

--------------------------------

### ESLint Valid: Sorted React Native Styles (Ascending Default)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/sort-styles.md

These JavaScript code snippets illustrate `StyleSheet.create` definitions that are considered valid by the default `react-native/sort-styles` ESLint rule (ascending order). The first example has correctly sorted style properties, and the second has correctly sorted class names.

```JavaScript
const styles = StyleSheet.create({
  button: {
    color: 'green',
    width: 100,
  },
});
```

```JavaScript
const styles = StyleSheet.create({
  anchor: {},
  button: {},
});
```

--------------------------------

### Correctly Wrapping Text in React Native JSX

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-raw-text.md

These examples demonstrate the recommended approach for displaying text in React Native by consistently wrapping all string content within a `<Text>` component. Following these patterns ensures compliance with the ESLint rule and proper text rendering.

```JavaScript
<View><Text>some text</Text></View>
```

```JavaScript
const text = 'some text';
<View><Text>{`${text}`}</Text></View>
```

--------------------------------

### Inline Style Warning Example - Mixed Literal and Variable Styles (JavaScript)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-inline-styles.md

This example shows a React Native component with an inline style object that mixes a literal `backgroundColor` value with a variable `fontSize` value. The ESLint rule will only flag the `backgroundColor` property as a warning, as variable-based styles are often necessary and acceptable.

```JavaScript
const Hello = React.createClass({
  render: function() {
    return <Text style={{backgroundColor: '#FFF', fontSize: this.state.fontSize}}>Hello {this.props.name}</Text>;
  }
});
```

--------------------------------

### Inline Style Warning Example - Various Style Attributes (JavaScript)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-inline-styles.md

This snippet demonstrates two React Native components, `Hello` and `Welcome`, both using inline style objects with literal `fontSize` values. The rule checks any attribute containing the word 'style' (e.g., `style`, `textStyle`), making both instances warnings.

```JavaScript
const Hello = React.createClass({
  render: function() {
    return <Text style={{fontSize: 12}}>Hello {this.props.name}</Text>;
  }
});
const Welcome = React.createClass({
  render: function() {
    return <Text textStyle={{fontSize: 12}}>Welcome</Text>;
  }
});
```

--------------------------------

### Ignoring Centralized StyleSheet Without Components in React Native (No Warning)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-unused-styles.md

This example shows that a `StyleSheet` definition without any associated React components in the same file will not be checked for unused rules. This behavior prevents warnings for centralized style sheets or utility files that define styles but are consumed elsewhere.

```JavaScript
const styles = StyleSheet.create({
  text: {}
});
```

--------------------------------

### Using StyleSheet Rule in Ternary Expression in React Native (No Warning)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-unused-styles.md

This example demonstrates the use of `StyleSheet` rules (`name`, `alternate`) within a ternary conditional expression. The ESLint rule correctly recognizes both rules as used based on the condition, avoiding false positives for dynamically chosen styles.

```JavaScript
const styles = StyleSheet.create({
  name: {},
  alternate: {},
});

const Hello = React.createClass({
  getInitialState: function() {
    return {condition: true};
  },

  render: function() {
    return <Text textStyle={[this.state.condition ? styles.name : styles.alternate]}>
      Hello {this.props.name}
    </Text>;
  }
});
```

--------------------------------

### Referencing StyleSheet Rule with Custom Prop in React Native (No Warning)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-unused-styles.md

This example demonstrates that `StyleSheet` rules are marked as used even when applied to custom props (e.g., `textStyle`) on components, provided the prop name contains the word 'style'. This ensures flexibility in prop naming while still tracking usage.

```JavaScript
const styles = StyleSheet.create({
  name: {}
});

const Hello = React.createClass({
  render: function() {
    return <Text textStyle={styles.name}>Hello {this.props.name}</Text>;
  }
});
```

--------------------------------

### Inline Style Warning Example - Literal Background Color (JavaScript)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-inline-styles.md

This snippet demonstrates a React Native component with an inline style object containing a literal `backgroundColor` value. This pattern is considered a warning by the ESLint rule because it violates the separation of styles from view layout.

```JavaScript
const Hello = React.createClass({
  render: function() {
    return <Text style={{backgroundColor: '#FFF'}}>Hello {this.props.name}</Text>;
  }
});
```

--------------------------------

### Extending ESLint with All React Native Rules

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This JSON snippet demonstrates how to extend your ESLint configuration to include all available rules from `eslint-plugin-react-native` using the `plugin:react-native/all` shareable configuration.

```JSON
{
  "plugins": [
    "react-native"
  ],
  "extends": ["plugin:react-native/all"]
}
```

--------------------------------

### Configuring ESLint Plugins for React and React Native

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This JSON snippet adds `react` (optional) and `react-native` to the `plugins` section of your ESLint configuration, enabling their respective linting rules.

```JSON
{
  "plugins": ["react", "react-native"]
}
```

--------------------------------

### Configuring ESLint Parser Options for JSX

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This JSON snippet configures ESLint's `parserOptions` to enable JSX support, which is essential for linting React and React Native components.

```JSON
{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}
```

--------------------------------

### Whitelisting React Native Browser-like Globals in ESLint

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This JSON snippet adds `react-native/react-native` to the `env` section of your ESLint configuration, whitelisting browser-like global variables commonly used in React Native environments.

```JSON
{
  "env": {
    "react-native/react-native": true
  }
}
```

--------------------------------

### Warning: iOS Component with Import in Generic JS File

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet demonstrates the use of an iOS-specific component (`ActivityIndicatiorIOS`) with an `import` declaration in a generic `Hello.js` file. This pattern is considered a warning by the ESLint rule, requiring the file to be named `Hello.ios.js`.

```JavaScript
import React from 'react'
import { ActivityIndicatiorIOS } from 'react-native'

export default function Hello() {
  return <ActivityIndicatiorIOS/>
}
```

--------------------------------

### Enabling Specific React Native ESLint Rules

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This JSON snippet enables a selection of specific `eslint-plugin-react-native` rules, such as `no-unused-styles`, `split-platform-components`, and `no-inline-styles`, with an error level of 2.

```JSON
{
  "rules": {
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 2,
    "react-native/no-color-literals": 2,
    "react-native/no-raw-text": 2,
    "react-native/no-single-element-style-arrays": 2
  }
}
```

--------------------------------

### Configuring Custom Stylesheet Object Names in ESLint

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/README.md

This JSON snippet configures ESLint settings to recognize additional stylesheet object names, allowing the plugin to correctly analyze styles defined with custom providers like `EStyleSheet`.

```JSON
{
  "settings": {
    "react-native/style-sheet-object-names": ["EStyleSheet", "OtherStyleSheet", "PStyleSheet"]
  }
}
```

--------------------------------

### ESLint Rule Options for `split-platform-components`

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet illustrates the basic structure for configuring the `react-native/split-platform-components` ESLint rule. It shows how to enable the rule and define optional `androidPathRegex` and `iosPathRegex` properties to customize platform filename patterns.

```JavaScript
...
"react-native/split-platform-components": [ <enabled>, {
  androidPathRegex: <string>,
  iosPathRegex: <string>
}]
...
```

--------------------------------

### Warning: iOS Component in Generic JS File

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet demonstrates an anti-pattern where an iOS-specific component (`ActivityIndicatiorIOS`) is used within a generic `Hello.js` file. This will trigger a warning from the ESLint rule, as it should be in a platform-specific file (e.g., `Hello.ios.js`).

```JavaScript
const React = require('react-native');
const {
  ActivityIndicatiorIOS,
} = React;

const Hello = React.createClass({
  render: function() {
    return <ActivityIndicatiorIOS />;
  }
});
```

--------------------------------

### Warning: Android Component in Generic JS File

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet illustrates another anti-pattern: using an Android-specific component (`ProgressBarAndroid`) in a generic `Hello.js` file. The ESLint rule will flag this as a warning, recommending the component be moved to a platform-specific file (e.g., `Hello.android.js`).

```JavaScript
const React = require('react-native');
const {
  ProgressBarAndroid,
} = React;

const Hello = React.createClass({
  render: function() {
    return <ProgressBarAndroid />;
  }
});
```

--------------------------------

### Tracking StyleSheet Usage Across Multiple Components in React Native (No Warning)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-unused-styles.md

This snippet illustrates that the ESLint rule tracks `StyleSheet` rule usage across multiple components defined within the same file. Both `styles.name` and `styles.welcome` are correctly identified as used by their respective components, ensuring accurate detection of dead styles.

```JavaScript
const styles = StyleSheet.create({
  name: {},
  welcome: {}
});
const Hello = React.createClass({
  render: function() {
    return <Text style={styles.name}>Hello {this.props.name}</Text>;
  }
});
const Welcome = React.createClass({
  render: function() {
    return <Text style={styles.welcome}>Welcome</Text>;
  }
});
```

--------------------------------

### ESLint Configuration: `react-native/sort-styles` Rule

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/sort-styles.md

This JSON snippet provides the full configuration for the `react-native/sort-styles` ESLint rule. It sets the rule severity to 'error', specifies ascending order ('asc'), and explicitly disables ignoring class names or style properties.

```JSON
{
    "react-native/sort-styles": ["error", "asc", { "ignoreClassNames": false, "ignoreStyleProperties": false }]
}
```

--------------------------------

### ESLint Warning: Unsorted React Native Styles (Descending Order)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/sort-styles.md

These JavaScript code snippets demonstrate `StyleSheet.create` definitions that are considered warnings when the `react-native/sort-styles` rule is configured for descending order. The style properties or class names are not sorted alphabetically from Z to A.

```JavaScript
const styles = StyleSheet.create({
  button: {
    color: 'green',
    width: 100,
  },
});
```

```JavaScript
const styles = StyleSheet.create({
  anchor: {},
  button: {},
});
```

--------------------------------

### ESLint Valid: Sorted React Native Styles (Descending Order)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/sort-styles.md

These JavaScript code snippets show `StyleSheet.create` definitions that are considered valid when the `react-native/sort-styles` rule is configured for descending order. Style properties and class names are sorted alphabetically from Z to A.

```JavaScript
const styles = StyleSheet.create({
  button: {
    width: 100,
    color: 'green',
  },
});
```

```JavaScript
const styles = StyleSheet.create({
  button: {},
  anchor: {},
});
```

--------------------------------

### Correct: iOS Component in iOS-Specific File

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet shows the correct usage of an iOS-specific component (`ActivityIndicatiorIOS`) within a `Hello.ios.js` file. This pattern is not considered a warning, as the filename correctly indicates its platform specificity.

```JavaScript
const React = require('react-native');
const {
  ActivityIndicatiorIOS,
} = React;

const Hello = React.createClass({
  render: function() {
    return <ActivityIndicatiorIOS />;
  }
});
```

--------------------------------

### Correct: iOS Component with Import in iOS-Specific File

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet shows the correct usage of an iOS-specific component (`ActivityIndicatiorIOS`) with an `import` declaration in a `Hello.ios.js` file. This pattern is not considered a warning, as the filename correctly indicates its platform specificity.

```JavaScript
import React from 'react'
import { ActivityIndicatiorIOS } from 'react-native'

export default function Hello() {
  return <ActivityIndicatiorIOS/>
}
```

--------------------------------

### Correct: Android Component in Android-Specific File

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/split-platform-components.md

This snippet demonstrates the correct usage of an Android-specific component (`ProgressBarAndroid`) within a `Hello.android.js` file. This pattern is not considered a warning, aligning with the rule's enforcement of platform-specific filenames.

```JavaScript
const React = require('react-native');
const {
  ProgressBarAndroid,
} = React;

const Hello = React.createClass({
  render: function() {
    return <ProgressBarAndroid />;
  }
});
```

--------------------------------

### Identifying Unused StyleSheet Rule in React Native (Warning)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-unused-styles.md

This snippet demonstrates a `StyleSheet` rule (`text`) that is defined but not referenced by any component's `style` prop, leading to a warning from the ESLint rule. The `Text` component renders without applying `styles.text`, indicating an unused style.

```JavaScript
const styles = StyleSheet.create({
  text: {}
});

const Hello = React.createClass({
  render: function() {
    return <Text>Hello {this.props.name}</Text>;
  }
});
```

--------------------------------

### ESLint Valid: React Native Styles with `ignoreStyleProperties` Option

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/sort-styles.md

This JavaScript code snippet is considered valid when the `react-native/sort-styles` rule has `ignoreStyleProperties` set to `true`. The order of style properties (`width`, `color`) within a class is not enforced, allowing them to be unsorted, while class names are still expected to be sorted (if `ignoreClassNames` is `false`).

```JavaScript
const styles = StyleSheet.create({
  anchor: {},
  button: {
    width: 100,
    color: 'green',
  },
});
```

--------------------------------

### ESLint Valid: React Native Styles with `ignoreClassNames` Option

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/sort-styles.md

This JavaScript code snippet is considered valid when the `react-native/sort-styles` rule has `ignoreClassNames` set to `true`. The order of class names (`button`, `anchor`) is not enforced, allowing them to be unsorted, while style properties within each class are still expected to be sorted (if `ignoreStyleProperties` is `false`).

```JavaScript
const styles = StyleSheet.create({
  button: {
    color: 'green',
    width: 100,
  },
  anchor: {},
});
```

--------------------------------

### Using StyleSheet Rule in Style Array in React Native (No Warning)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-unused-styles.md

This snippet illustrates how `StyleSheet` rules referenced within a style array (e.g., `[styles.text, textStyle]`) are correctly identified as used, preventing false warnings. It also demonstrates how `propTypes` can be used to define the expected style type.

```JavaScript
const styles = StyleSheet.create({
  text: {}
});
const Hello = React.createClass({
  propTypes: {
    textStyle: Text.propTypes.style
  },
  render: function() {
    return <Text style={[styles.text, textStyle]}>Hello {this.props.name}</Text>;
  }
});
```

--------------------------------

### Using Color Variable in StyleSheet.create - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet shows an acceptable pattern where a color is defined in a variable (`$coolBlue`) and then used for the `color` property within a `StyleSheet.create` definition. This adheres to the rule's recommendation.

```JavaScript
const $coolBlue = '#00F';
  const styles = StyleSheet.create({
    text: {
      color: $coolBlue
    }
  });
```

--------------------------------

### Using StyleSheet Rule in Logical AND Expression in React Native (No Warning)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-unused-styles.md

This snippet shows a `StyleSheet` rule (`name`) being used within a logical AND conditional expression (`this.state.condition && styles.name`). The ESLint rule correctly identifies this dynamic usage, preventing a warning for a conditionally applied style.

```JavaScript
const styles = StyleSheet.create({
  name: {}
});

const Hello = React.createClass({
  getInitialState: function() {
    return {condition: true};
  },

  render: function() {
    return <Text textStyle={[this.state.condition && styles.name]}>
      Hello {this.props.name}
    </Text>;
  }
});
```

--------------------------------

### Detecting Conditional Hardcoded Color in StyleSheet.create - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet demonstrates a warning where a hardcoded string color literal (`'blue'`) is used conditionally within a `StyleSheet.create` definition. Although one part of the ternary uses a variable, the literal is still detected.

```JavaScript
const someVariable = false;
  const someColorVariable = 'green';
  const styles = StyleSheet.create({
    text: {
      color: someVariable ? 'blue' : someColorVariable
    }
  });
```

--------------------------------

### Using Color Variable for Background in JSX Style - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet shows an acceptable pattern where a color is defined in a variable (`white`) and then used for the `backgroundColor` property in a JSX `style` object. This avoids the warning as it promotes reusability.

```JavaScript
const white = '#fff';
    ...
  <Text style={{backgroundColor: white}}>Hello</Text>;
```

--------------------------------

### Acceptable Style Pattern - External Stylesheet (JavaScript)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-inline-styles.md

This snippet illustrates an acceptable pattern where styles are referenced from an external stylesheet object (`styles.name`). This approach promotes separation of concerns and is not flagged by the ESLint rule, as it avoids inline literal style values.

```JavaScript
const Hello = React.createClass({
  render: function() {
    return <Text style={styles.name}>Hello {this.props.name}</Text>;
  }
});
```

--------------------------------

### Detecting Hardcoded Background Color in JSX Style - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet demonstrates a warning where a hardcoded hexadecimal color literal (`#FFF`) is directly assigned to the `backgroundColor` property within an inline JSX `style` object. This violates the rule's recommendation to use variables for color definitions.

```JavaScript
<Text style={{backgroundColor: '#FFF'}}>Hello</Text>;
```

--------------------------------

### Detecting Hardcoded Color in StyleSheet.create - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet shows a warning for a hardcoded string color literal (`'blue'`) directly assigned to the `color` property within a `StyleSheet.create` definition. This is flagged as it's a direct literal, not a variable.

```JavaScript
const styles = StyleSheet.create({
    text: {
      color: 'blue'
    }
  });
```

--------------------------------

### Disallowing Single-Element Style Arrays in React Native (JavaScript)

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-single-element-style-arrays.md

This snippet illustrates an anti-pattern where a React Native component's `style` prop is assigned a single-element array. This practice is disallowed by the ESLint rule because it causes the array's identity to change on every render, leading to unnecessary re-renders and performance degradation.

```JavaScript
<View style={[{height: 10}]} />
```

--------------------------------

### Identifying Raw Text Warnings in React Native JSX

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-raw-text.md

These code snippets illustrate common patterns where raw text is directly embedded within React Native components like `<View>` without being enclosed in a `<Text>` component. Such practices trigger warnings from the ESLint rule, indicating non-compliant text handling.

```JavaScript
<View>some text</View>
```

```JavaScript
const text = 'some text';
<View>{`${text}`}</View>
```

--------------------------------

### Using State Variable for Border Color in JSX Style - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet demonstrates an acceptable pattern where the `borderBottomColor` property is assigned a value from `this.state.borderBottomColor`. Using state variables for colors is not flagged by the rule.

```JavaScript
<View style={{borderBottomColor: this.state.borderBottomColor}}>
    ...
  </View>;
```

--------------------------------

### Detecting Ternary Hardcoded Background Color - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet demonstrates a warning where hardcoded hexadecimal color literals (`#FFF`, `#000`) are used within a ternary operator for the `backgroundColor` property. The rule identifies these literals even within conditional expressions.

```JavaScript
<Text style={[styles.text, {backgroundColor: this.props.something ? '#FFF' : '#000'}]}>Hello</Text>;
```

--------------------------------

### Detecting Hardcoded RGBA Border Color in JSX Style - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet shows a warning for a hardcoded RGBA color literal directly assigned to the `borderBottomColor` property within an inline JSX `style` object. The rule flags this as a direct color literal, encouraging variable usage.

```JavaScript
<View style={{borderBottomColor: 'rgba(255, 125, 125, 0.5)'}}>
    ...
  </View>;
```

--------------------------------

### Detecting Hardcoded Background Color in Array Style - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet illustrates a warning where a hardcoded hexadecimal color literal (`#FFF`) is used within an object inside a style array. Even when combined with other styles, direct color literals are flagged.

```JavaScript
<Text textStyle={[styles.text, {backgroundColor: '#FFF'}]}>Hello</Text>;
```

--------------------------------

### Detecting Conditional Hardcoded Background Color - JavaScript

Source: https://github.com/intellicode/eslint-plugin-react-native/blob/master/docs/rules/no-color-literals.md

This snippet shows a warning for a hardcoded hexadecimal color literal (`#000`) used conditionally within a style array. The rule still detects the literal even when it's part of a conditional style application.

```JavaScript
<Text style={[styles.text, this.props.something && {backgroundColor: '#000'}]}>Hello</Text>;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.