### Install Example Dependencies

Source: https://github.com/swc-project/swc/blob/main/bindings/binding_core_wasm/example/readme.txt

Navigate to the example directory and install npm dependencies.

```bash
cd swc/wasm/example
npm install
```

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

### Start Webpack Dev Server

Source: https://github.com/swc-project/swc/blob/main/bindings/binding_core_wasm/example/readme.txt

Run the npm script to start the webpack development server for the example.

```bash
cd swc/wasm/example
npm run serve
```

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

### View Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Basic example of the View component.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const ViewExample = () => (
  <View style={styles.container}>
    <Text>View Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ViewExample;

```

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

### Url Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating URL handling.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const UrlExample = () => (
  <View style={styles.container}>
    <Text>URL Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default UrlExample;

```

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

### WebSocket Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating WebSocket communication.

```javascript
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const WebSocketExample = () => {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = () => {
      setMessage('Connected');
    };

    ws.onmessage = (event) => {
      setMessage('Received: ' + event.data);
    };

    ws.onerror = (error) => {
      setMessage('Error: ' + error.message);
    };

    ws.onclose = () => {
      setMessage('Disconnected');
    };

    return () => {
      ws.close();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text>{message}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default WebSocketExample;

```

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

### TurboModule Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

General example of a TurboModule.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const TurboModuleExample = () => (
  <View style={styles.container}>
    <Text>Turbo Module Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TurboModuleExample;

```

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

### TextInput Key Prop Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating the 'key' prop with TextInput.

```javascript
import React, { useState } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

const TextInputKeyProp = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        key="uniqueTextInputKey"
        style={styles.input}
        onChangeText={setText}
        value={text}
        placeholder="Input with a key prop"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default TextInputKeyProp;

```

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

### Timer Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating timer functionalities.

```javascript
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const TimerExample = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <View style={styles.container}>
      <Text>Timer: {seconds}s</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TimerExample;

```

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

### NativeCxxModuleExample Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example of a native C++ module.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const NativeCxxModuleExample = () => (
  <View style={styles.container}>
    <Text>Native CXX Module Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default NativeCxxModuleExample;

```

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

### Dimensions Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Shows how to get screen dimensions using the Dimensions API. Useful for responsive layouts.

```javascript
import * as React from 'react';
import {
  Dimensions,
  StyleSheet,
  Text,
  View,
} from 'react-native';

const DimensionsExample = () => {
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;
  const screenWidth = Dimensions.get('screen').width;
  const screenHeight = Dimensions.get('screen').height;

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Screen Dimensions:</Text>
      <Text style={styles.dimensionText}>Window Width: {windowWidth.toFixed(2)}</Text>
      <Text style={styles.dimensionText}>Window Height: {windowHeight.toFixed(2)}</Text>
      <Text style={styles.dimensionText}>Screen Width: {screenWidth.toFixed(2)}</Text>
      <Text style={styles.dimensionText}>Screen Height: {screenHeight.toFixed(2)}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  dimensionText: {
    fontSize: 18,
    color: 'blue',
  },
});

export default DimensionsExample;

```

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

### SnapshotViewIOS Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example for taking snapshots of views on iOS.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const SnapshotViewIOS = () => (
  <View style={styles.container}>
    <Text>SnapshotViewIOS Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default SnapshotViewIOS;

```

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

### Animated.View Example with Pan Gesture

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Integrates pan gestures with animations using Animated.event. Requires a gesture handler setup.

```javascript
import * as React from 'react';
import {
  Animated,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';

const PanGestureExample = () => {
  const translateX = React.useRef(new Animated.Value(0)).current;
  const translateY = React.useRef(new Animated.Value(0)).current;

  const handlePanGesture = Animated.event([
    {
      nativeEvent: {
        translationX: translateX,
        translationY: translateY,
      },
    },
  ], {
    useNativeDriver: true,
  });

  return (
    <View style={styles.container}>
      <PanGestureHandler onGestureEvent={handlePanGesture}>
        <Animated.View
          style={{
            ...styles.box,
            transform: [
              { translateX: translateX },
              { translateY: translateY },
            ],
          }}>
          <Text style={styles.text}>Drag Me</Text>
        </Animated.View>
      </PanGestureHandler>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'tomato',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 20,
  },
});

export default PanGestureExample;

```

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

### SetPropertiesExample

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating how to set properties on components.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const SetPropertiesExample = () => (
  <View style={styles.container}>
    <Text style={styles.text}>Hello World</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
  },
});

export default SetPropertiesExample;

```

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

### ToastAndroid Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example of using the ToastAndroid API.

```javascript
import React from 'react';
import { Button, StyleSheet, Text, ToastAndroid, View } from 'react-native';

const ToastAndroidExample = () => {
  const showToast = () => {
    ToastAndroid.show('This is a toast!', ToastAndroid.SHORT);
  };

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ToastAndroidExample;

```

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

### Switch Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Demonstrates the usage of the Switch component.

```javascript
import React, { useState } from 'react';
import { StyleSheet, Switch, Text, View } from 'react-native';

const SwitchExample = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: '#767577', true: '#81b0ff' }}
        thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
      <Text>Switch is {isEnabled ? 'ON' : 'OFF'}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default SwitchExample;

```

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

### BackgroundImage Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Demonstrates how to use the Image component as a background image. This example shows basic usage.

```javascript
import * as React from 'react';
import {
  ImageBackground,
  StyleSheet,
  Text,
  View,
} from 'react-native';

const BackgroundImageExample = () => {
  return (
    <View style={styles.container}>
      <ImageBackground
        source={require('./path/to/your/background-image.png')}
        resizeMode="cover"
        style={styles.image}>
        <Text style={styles.text}>Image Background</Text>
      </ImageBackground>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: 'white',
    fontSize: 30,
    fontWeight: 'bold',
    backgroundColor: '#000000a0',
    padding: 10,
  },
});

export default BackgroundImageExample;

```

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

### TransparentHitTest Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating transparent hit testing.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const TransparentHitTestExample = () => (
  <View style={styles.container}>
    <View style={styles.transparentBox}>
      <Text>This area is transparent but hittable.</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  transparentBox: {
    width: 200,
    height: 200,
    backgroundColor: 'rgba(0,0,0,0.1)',
    justifyContent: 'center',
    alignItems: 'center',
    // pointerEvents: 'box-none' // This would make it non-hittable
  },
});

export default TransparentHitTestExample;

```

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

### XHRExample

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating XMLHttpRequest.

```javascript
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

const XHRExample = () => {
  const sendRequest = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log(JSON.parse(xhr.responseText));
      } else {
        console.error('Request failed');
      }
    };
    xhr.onerror = () => {
      console.error('Network error');
    };
    xhr.send();
  };

  return (
    <View style={styles.container}>
      <Button title="Send Request" onPress={sendRequest} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default XHRExample;

```

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

### SampleTurboModule Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Sample implementation of a TurboModule.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const SampleTurboModule = () => (
  <View style={styles.container}>
    <Text>Sample Turbo Module Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default SampleTurboModule;

```

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

### Install and Use rustfmt

Source: https://github.com/swc-project/swc/blob/main/CONTRIBUTING.md

Install the rustfmt component for code formatting. Use rustfmt to automatically format changed files according to project standards.

```bash
rustup component add --toolchain nightly rustfmt-preview
```

```bash
rustfmt +nightly --unstable-features --skip-children
```

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

### Transform Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example showing view transformations.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const TransformExample = () => (
  <View style={styles.container}>
    <View style={styles.box} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
    transform: [
      { rotate: '45deg' },
      { scale: 1.5 },
      { translateX: 50 },
      { translateY: -50 },
    ],
  },
});

export default TransformExample;

```

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

### FlatList Example Index

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

An index or entry point for various FlatList examples.

```javascript
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const FlatListExampleIndex = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>FlatList Examples</Text>
      <Button title="Base FlatList" onPress={() => navigation.navigate('BaseFlatListExample')}/>
      <Button title="Basic FlatList" onPress={() => navigation.navigate('FlatListBasic')}/>
      <Button title="Inverted FlatList" onPress={() => navigation.navigate('FlatListInverted')}/>
      <Button title="Multi-Column FlatList" onPress={() => navigation.navigate('FlatListMultiColumn')}/>
      <Button title="FlatList with Separators" onPress={() => navigation.navigate('FlatListWithSeparators')}/>
      {/* Add more buttons for other FlatList examples */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

export default FlatListExampleIndex;
```

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

### Text Example (iOS)

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Basic example of the Text component on iOS.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const TextExample = () => (
  <View style={styles.container}>
    <Text>Hello, world!</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TextExample;

```

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

### SampleLegacyModule Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Sample implementation of a legacy native module.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const SampleLegacyModule = () => (
  <View style={styles.container}>
    <Text>Sample Legacy Module Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default SampleLegacyModule;

```

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

### StatusBar Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Demonstrates how to control the status bar.

```javascript
import React from 'react';
import { StatusBar, StyleSheet, Text, View } from 'react-native';

const StatusBarExample = () => (
  <View style={styles.container}>
    <Text>StatusBar Example</Text>
    <StatusBar barStyle="dark-content" />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default StatusBarExample;

```

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

### Keyboard Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Demonstrates handling keyboard events like showing and hiding.

```javascript
import React, { useState, useEffect } from 'react';
import { View, TextInput, Text, StyleSheet, Keyboard, Platform } from 'react-native';

const KeyboardExample = () => {
  const [keyboardVisible, setKeyboardVisible] = useState(false);
  const [text, setText] = useState('');

  useEffect(() => {
    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => setKeyboardVisible(true)
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => setKeyboardVisible(false)
    );

    // Cleanup listeners on unmount
    return () => {
      keyboardDidShowListener.remove();
      keyboardDidHideListener.remove();
    };
  }, []);

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
        placeholder="Type something..."
        onFocus={() => {
          // Manually trigger focus if needed, though usually automatic
        }}
      />
      <Text style={styles.statusText}>
        Keyboard is: {keyboardVisible ? 'Visible' : 'Hidden'}
      </Text>
      <Text>Input value: {text}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  input: {
    height: 50,
    width: '100%',
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 10,
  },
  statusText: {
    fontSize: 16,
    color: 'blue',
  },
});

export default KeyboardExample;
```

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

### Community CLI Plugin Start Index

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Main entry point for the 'start' command in the community CLI plugin. This command typically starts the development server for React Native projects.

```javascript
const runServer = require('./runServer');
const attachKeyHandlers = require('./attachKeyHandlers');
// ... other imports

module.exports = async (argv) => {
  const server = await runServer(argv);
  attachKeyHandlers(server);
  // ... other logic
};

```

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

### iOS Prebuild Setup Script

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

The setup script for the iOS prebuild process. It initializes and configures the necessary environment and tools for building React Native applications on iOS.

```javascript
packages/react-native/scripts/ios-prebuild/setup.js
```

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

### Vibration Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example of using the Vibration API.

```javascript
import React from 'react';
import { Button, StyleSheet, Text, View, Vibration } from 'react-native';

const VibrationExample = () => {
  const vibrate = () => {
    Vibration.vibrate();
  };

  return (
    <View style={styles.container}>
      <Button title="Vibrate" onPress={vibrate} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default VibrationExample;

```

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

### Touchable Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Demonstrates various touchable components.

```javascript
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const TouchableExample = () => (
  <View style={styles.container}>
    <TouchableOpacity style={styles.button} onPress={() => alert('Button pressed!')}>
      <Text style={styles.buttonText}>Press Me</Text>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
  },
});

export default TouchableExample;

```

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

### Image Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

A basic example of displaying an image in React Native.

```javascript
import React from 'react';
import { Image, View, StyleSheet } from 'react-native';

const ImageExample = () => {
  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
        style={styles.logo}
        resizeMode="contain"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 100,
    height: 100,
  },
});

export default ImageExample;
```

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

### Placeholder Text Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc_html_minifier/tests/fixture/comment/basic/output.min.html

Example of placeholder text.

```text
*   test
```

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

### Many Pointers Properties Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating handling of multiple pointers or touch inputs. Useful for multi-touch gestures or complex interactions.

```javascript
import * as React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {
  GestureHandlerRootView,
  PointersGestureHandler,
} from 'react-native-gesture-handler';

const ManyPointersPropertiesExample = () => {
  const [pointerCount, setPointerCount] = React.useState(0);

  const onPointersDown = (event) => {
    setPointerCount(event.nativeEvent.numberOfPointers);
    console.log('Pointers down:', event.nativeEvent.numberOfPointers);
  };

  const onPointersMove = (event) => {
    setPointerCount(event.nativeEvent.numberOfPointers);
    console.log('Pointers move:', event.nativeEvent.numberOfPointers);
  };

  const onPointersUp = (event) => {
    setPointerCount(event.nativeEvent.numberOfPointers);
    console.log('Pointers up:', event.nativeEvent.numberOfPointers);
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Text style={styles.text}>Multiple Pointers Example</Text>
        <PointersGestureHandler
          onPointersDown={onPointersDown}
          onPointersMove={onPointersMove}
          onPointersUp={onPointersUp}>
          <View style={styles.touchableArea}>
            <Text style={styles.infoText}>Touch with multiple fingers</Text>
            <Text style={styles.countText}>Pointers Active: {pointerCount}</Text>
          </View>
        </PointersGestureHandler>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  touchableArea: {
    width: 250,
    height: 250,
    backgroundColor: 'lightblue',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10,
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
  infoText: {
    fontSize: 16,
    marginBottom: 10,
  },
  countText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'darkblue',
  },
});

export default ManyPointersPropertiesExample;

```

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

### TurboCxxModule Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example of a TurboModule written in C++.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const TurboCxxModule = () => (
  <View style={styles.container}>
    <Text>Turbo CXX Module Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TurboCxxModule;

```

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

### Share Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Demonstrates the usage of the Share API to share content.

```javascript
import React from 'react';
import { Button, Share, StyleSheet, Text, View } from 'react-native';

const ShareExample = () => {
  const shareMessage = async () => {
    try {
      const result = await Share.share({
        message:
          'React Native | A framework for building native apps using React',
      });
      if (result.action === Share.sharedAction) {
        if (result.activityType) {
          // shared with activity types
        } else {
          // shared
        }
      } else if (result.action === Share.dismissedAction) {
        // dismissed
      }
    } catch (error) {
      alert(error.message);
    }
  };
  return (
    <View style={styles.container}>
      <Button title="Share Message" onPress={shareMessage} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ShareExample;

```

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

### Install JS Dependencies

Source: https://github.com/swc-project/swc/blob/main/CONTRIBUTING.md

Installs JavaScript dependencies using pnpm. Ensure Yarn Package Manager is installed before running this command.

```bash
pnpm install
```

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

### DisplayContents Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example related to displaying content. The specific functionality depends on the context within the RNTester app.

```javascript
import * as React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

const DisplayContentsExample = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Display Contents Example</Text>
      {/* Add specific content display logic here */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default DisplayContentsExample;

```

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

### W3C Pointer Events Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

A general example demonstrating the usage of W3C Pointer Events in React Native.

```javascript
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const W3CPointerEventsExample = () => {
  const handlePointerEnter = () => {
    console.log('Pointer entered!');
  };

  const handlePointerLeave = () => {
    console.log('Pointer left!');
  };

  const handlePointerDown = () => {
    console.log('Pointer down!');
  };

  const handlePointerUp = () => {
    console.log('Pointer up!');
  };

  return (
    <View
      style={styles.container}
      onPointerEnter={handlePointerEnter}
      onPointerLeave={handlePointerLeave}
      onPointerDown={handlePointerDown}
      onPointerUp={handlePointerUp}
    >
      <Text>Pointer Events Example</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightcoral',
  },
});

export default W3CPointerEventsExample;
```

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

### Base FlatList Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

A fundamental example of using FlatList to display a scrollable list of items.

```javascript
import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const BaseFlatListExample = () => {
  const data = [
    { key: '1', title: 'Item 1' },
    { key: '2', title: 'Item 2' },
    { key: '3', title: 'Item 3' },
    { key: '4', title: 'Item 4' },
    { key: '5', title: 'Item 5' },
  ];

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.key}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

export default BaseFlatListExample;
```

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

### Compatibility Animated Pointer Move Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example demonstrating compatibility with animated pointer move events. This might be relevant for touch interactions or gesture handling.

```javascript
import * as React from 'react';
import {
  Animated,
  StyleSheet,
  Text,
  View,
} from 'react-native';

const CompatibilityAnimatedPointerMove = () => {
  const pointerMoveAnim = React.useRef(new Animated.ValueXY()).current;

  const handlePointerMove = Animated.event([
    {
      nativeEvent: {
        // Assuming pointer event structure, adjust if needed
        // For web, this might be different than native mobile events
        // This is a placeholder based on common animation event structures
        // Actual event properties might vary.
      },
    },
  ], {
    useNativeDriver: false, // Pointer events might not always support native driver
  });

  // Placeholder for actual pointer move handling logic
  // In a real scenario, you'd update pointerMoveAnim based on event data
  React.useEffect(() => {
    // Simulate pointer movement for demonstration
    const timer = setTimeout(() => {
      Animated.spring(pointerMoveAnim, {
        toValue: { x: 100, y: 100 },
        useNativeDriver: false,
      }).start();
    }, 1000);
    return () => clearTimeout(timer);
  }, [pointerMoveAnim]);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Animated Pointer Move Compatibility</Text>
      <Animated.View
        style={{
          ...styles.box,
          transform: [
            { translateX: pointerMoveAnim.x },
            { translateY: pointerMoveAnim.y },
          ],
        }}
        // onPointerMove={handlePointerMove} // Uncomment and adapt for actual pointer events
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'teal',
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
  },
});

export default CompatibilityAnimatedPointerMove;

```

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

### TextAdjustsDynamicLayout Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example showing how Text adjusts its layout dynamically.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const TextAdjustsDynamicLayoutExample = () => (
  <View style={styles.container}>
    <Text style={styles.text}>This is a long text that should wrap and adjust its layout dynamically.</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 18,
    textAlign: 'center',
  },
});

export default TextAdjustsDynamicLayoutExample;

```

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

### Compatibility Native Gesture Handling Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example focusing on compatibility with native gesture handling. This is crucial for smooth and performant gesture recognition.

```javascript
import * as React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {
  GestureHandlerRootView,
  PanGestureHandler,
  State,
} from 'react-native-gesture-handler';

const CompatibilityNativeGestureHandling = () => {
  const panRef = React.useRef();
  const translateX = React.useRef(new Animated.Value(0)).current;
  const translateY = React.useRef(new Animated.Value(0)).current;

  const onGestureEvent = Animated.event([
    {
      nativeEvent: {
        translationX: translateX,
        translationY: translateY,
        state: new Animated.Value(State.UNDETERMINED),
      },
    },
  ], {
    useNativeDriver: true,
  });

  const onHandlerStateChange = (event) => {
    if (event.nativeEvent.oldState === State.ACTIVE) {
      const { translationX, translationY } = event.nativeEvent;
      translateX.extractOffset();
      translateY.extractOffset();
      translateX.setValue(translationX);
      translateY.setValue(translationY);
    }
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.container}>
        <Text style={styles.text}>Native Gesture Handling Compatibility</Text>
        <PanGestureHandler
          ref={panRef}
          onGestureEvent={onGestureEvent}
          onHandlerStateChange={onHandlerStateChange}>
          <Animated.View
            style={{
              ...styles.box,
              transform: [
                { translateX: translateX },
                { translateY: translateY },
              ],
            }}>
            <Text style={styles.boxText}>Drag Me</Text>
          </Animated.View>
        </PanGestureHandler>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'coral',
    justifyContent: 'center',
    alignItems: 'center',
  },
  boxText: {
    color: 'white',
    fontSize: 16,
  },
  text: {
    fontSize: 18,
    marginBottom: 20,
  },
});

export default CompatibilityNativeGestureHandling;

```

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

### TextInputSharedExamples

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Shared examples for the TextInput component.

```javascript
import React from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

const TextInputSharedExamples = () => (
  <View style={styles.container}>
    <TextInput placeholder="Shared TextInput example" />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default TextInputSharedExamples;

```

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

### LegacyModuleExample

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example of a legacy native module.

```javascript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

const LegacyModuleExample = () => (
  <View style={styles.container}>
    <Text>Legacy Module Example</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default LegacyModuleExample;

```

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

### Object Spread

Source: https://github.com/swc-project/swc/blob/main/crates/swc_ecma_minifier/tests/passing.txt

Basic example demonstrating the object spread syntax.

```javascript
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 };
console.log(obj2);
```

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

### TextInput Example (Android)

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example of TextInput component specific to Android.

```javascript
import React, { useState } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

const TextInputExample = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        onChangeText={setText}
        value={text}
        placeholder="Enter text here..."
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 50,
    width: '80%',
    borderColor: 'gray',
    borderWidth: 1,
    paddingHorizontal: 10,
  },
});

export default TextInputExample;

```

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

### ContentURLAndroid Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example for handling content URLs on Android. This might involve specific intent handling or deep linking configurations.

```javascript
import * as React from 'react';
import {
  Linking,
  StyleSheet,
  Text,
  View,
} from 'react-native';

const ContentURLAndroidExample = () => {
  const [url, setUrl] = React.useState('');

  React.useEffect(() => {
    const getUrlAsync = async () => {
      const initialUrl = await Linking.getInitialURL();
      setUrl(initialUrl || 'No initial URL found');
    };
    getUrlAsync();

    const linkingSubscription = Linking.addEventListener('url', ({ url }) => {
      setUrl(url);
      console.log('Received URL:', url);
    });

    return () => {
      linkingSubscription.remove();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Content URL (Android):</Text>
      <Text style={styles.urlText}>{url}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    marginBottom: 10,
  },
  urlText: {
    fontSize: 16,
    color: 'blue',
    textAlign: 'center',
  },
});

export default ContentURLAndroidExample;

```

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

### ExampleTextInput

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Basic example of the TextInput component.

```javascript
import React, { useState } from 'react';
import { StyleSheet, TextInput, View } from 'react-native';

const ExampleTextInput = () => {
  const [text, setText] = useState('');

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        onChangeText={setText}
        value={text}
        placeholder="Type something..."
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

export default ExampleTextInput;

```

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

### XHRExampleDownload

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Example of downloading a file using XMLHttpRequest.

```javascript
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';

const XHRExampleDownload = () => {
  const downloadFile = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.w3.org/TR/PNG/iso_8859-1.txt');
    xhr.responseType = 'blob'; // Use 'blob' for binary data

    xhr.onload = () => {
      if (xhr.status === 200) {
        const blob = xhr.response;
        console.log('Downloaded blob:', blob);
        // You can then process the blob, e.g., create a URL or save it
      } else {
        console.error('Download failed');
      }
    };

    xhr.onerror = () => {
      console.error('Network error');
    };

    xhr.send();
  };

  return (
    <View style={styles.container}>
      <Button title="Download File" onPress={downloadFile} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default XHRExampleDownload;

```

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

### CSS Style Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc_html_minifier/tests/fixture/text/collapse-whitespace-only-metdata/output.min.html

An example of inline CSS styling for an element.

```css
a{color:red}
```

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

### Jest DOM Setup File

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native-web/manifest.txt

This file contains setup code for Jest when running tests in a DOM environment. It typically includes imports for necessary testing utilities.

```javascript
import '@testing-library/jest-dom';
// Additional setup if needed
```

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

### FlatList Inverted Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Renders a FlatList with its content inverted, starting from the bottom.

```javascript
import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const FlatListInverted = () => {
  const data = Array.from({ length: 20 }, (_, i) => ({ key: String(i), title: `Item ${i + 1}` }));

  const renderItem = ({ item }) => (
    <View style={styles.item}>
      <Text>{item.title}</Text>
    </View>
  );

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.key}
      inverted={true}
    />
  );
};

const styles = StyleSheet.create({
  item: {
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
});

export default FlatListInverted;
```

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

### Input Accessory View Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

Demonstrates the InputAccessoryView component, which provides a custom accessory view above the keyboard.

```javascript
import React, { useState } from 'react';
import { View, TextInput, Text, Button, StyleSheet, InputAccessoryView } from 'react-native';

const InputAccessoryViewExample = () => {
  const [text, setText] = useState('');

  const handleDonePress = () => {
    alert('Done pressed!');
    // You might want to dismiss the keyboard or perform another action here
  };

  const inputAccessoryViewID = 'uniqueInputAccessoryViewID';

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
        placeholder="Type something..."
        inputAccessoryViewID={inputAccessoryViewID}
      />

      <InputAccessoryView nativeID={inputAccessoryViewID}>
        <View style={styles.accessory}>
          <Button title="Done" onPress={handleDonePress} />
        </View>
      </InputAccessoryView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    height: 50,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 20,
    paddingHorizontal: 10,
  },
  accessory: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
    padding: 10,
    borderTopWidth: 1,
    borderTopColor: '#ccc',
  },
});

export default InputAccessoryViewExample;
```

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

### Animation Backend Chessboard Example

Source: https://github.com/swc-project/swc/blob/main/crates/swc/tests/flow-projects/react-native/manifest.txt

A complex animation example demonstrating a chessboard pattern. This likely involves advanced animation techniques.

```javascript
import * as React from 'react';
import {
  Animated,
  StyleSheet,
  View,
  Easing,
  Text,
} from 'react-native';

const ChessboardExample = () => {
  const animationValue = React.useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.loop(
      Animated.timing(animationValue, {
        toValue: 1,
        duration: 2000,
        easing: Easing.linear,
        useNativeDriver: true,
      })
    ).start();
  }, [animationValue]);

  const animatedStyle = {
    transform: [
      {
        translateX: animationValue.interpolate({
          inputRange: [0, 1],
          outputRange: [-100, 100],
        }),
      },
      {
        translateY: animationValue.interpolate({
          inputRange: [0, 1],
          outputRange: [-100, 100],
        }),
      },
    ],
    opacity: animationValue.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: [1, 0, 1],
    }),
  };

  const renderSquare = (color, index) => (
    <View key={index} style={[styles.square, { backgroundColor: color }]} />
  );

  const boardSize = 8;
  const squares = [];
  for (let i = 0; i < boardSize * boardSize; i++) {
    const row = Math.floor(i / boardSize);
    const col = i % boardSize;
    const color = (row + col) % 2 === 0 ? '#eee' : '#333';
    squares.push(renderSquare(color, i));
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Chessboard Animation</Text>
      <View style={styles.boardContainer}>
        {squares}
        <Animated.View style={[styles.animatedSquare, animatedStyle]} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  boardContainer: {
    width: 300,
    height: 300,
    flexDirection: 'row',
    flexWrap: 'wrap',
    position: 'relative',
  },
  square: {
    width: '12.5%',
    height: '12.5%',
  },
  animatedSquare: {
    position: 'absolute',
    width: '12.5%',
    height: '12.5%',
    backgroundColor: 'rgba(255, 0, 0, 0.5)',
  },
});

export default ChessboardExample;

```