### Image onLoadStart Example

Source: https://github.com/react/react-native-website/blob/main/docs/image.md

Invoked on load start. This example demonstrates setting a loading state when the image begins to load.

```javascript
onLoadStart={() => this.setState({loading: true})}
```

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

### Install and Create a New React Native Project

Source: https://github.com/react/react-native-website/blob/main/website/blog/2017-03-13-introducing-create-react-native-app.md

Install the create-react-native-app package globally, create a new project, navigate into the project directory, and start the development server.

```sh
$ npm i -g create-react-native-app
$ create-react-native-app my-project
$ cd my-project
$ npm start
```

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

### Install Specific NetInfo Version

Source: https://github.com/react/react-native-website/blob/main/docs/libraries.md

Example of installing a specific version of the @react-native-community/netinfo library.

```bash
npm install @react-native-community/netinfo@^2.0.0
```

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

### Full Example with All Properties

Source: https://github.com/react/react-native-website/blob/main/docs/usewindowdimensions.md

This example demonstrates how to use useWindowDimensions to display height, width, font scale, and pixel ratio. It automatically updates when these values change.

```tsx
import {StyleSheet, Text, useWindowDimensions} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  const {height, width, scale, fontScale} = useWindowDimensions();
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Text style={styles.header}>Window Dimension Data</Text>
        <Text>Height: {height}</Text>
        <Text>Width: {width}</Text>
        <Text>Font scale: {fontScale}</Text>
        <Text>Pixel ratio: {scale}</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    fontSize: 20,
    marginBottom: 12,
  },
});

export default App;
```

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

### diffClamp()

Source: https://github.com/react/react-native-website/blob/main/docs/animated.md

Creates a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (`value = clamp(value + diff, min, max)`). This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down.

```APIDOC
## `diffClamp()`

### Description
Create a new Animated value that is limited between 2 values. It uses the difference between the last value so even if the value is far from the bounds it will start changing when the value starts getting closer again. (`value = clamp(value + diff, min, max)`).

This is useful with scroll events, for example, to show the navbar when scrolling up and to hide it when scrolling down.

### Method Signature
`static diffClamp(a: Animated, min: number, max: number): AnimatedDiffClamp;`
```

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

### Width and Height Example (JavaScript)

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.77/flexbox.md

Demonstrates how to dynamically set width and height using 'auto', pixels, and percentages. This example allows users to interactively change the dimensions.

```javascript
import React, {useState} from 'react';
import {View, TouchableOpacity, Text, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const WidthHeightBasics = () => {
  const [widthType, setWidthType] = useState('auto');
  const [heightType, setHeightType] = useState('auto');

  return (
    <PreviewLayout
      widthType={widthType}
      heightType={heightType}
      widthValues={['auto', 300, '80%']}
      heightValues={['auto', 200, '60%']}
      setWidthType={setWidthType}
      setHeightType={setHeightType}>
      <View
        style={{
          alignSelf: 'flex-start',
          backgroundColor: 'aliceblue',
          height: heightType,
          width: widthType,
          padding: 15,
        }}>
        <View style={[styles.box, {backgroundColor: 'powderblue'}]} />
        <View style={[styles.box, {backgroundColor: 'skyblue'}]} />
        <View style={[styles.box, {backgroundColor: 'steelblue'}]} />
      </View>
    </PreviewLayout>
  );
};

const PreviewLayout = ({
  children,
  widthType,
  heightType,
  widthValues,
  heightValues,
  setWidthType,
  setHeightType,
}) => (
  <SafeAreaProvider>
    <SafeAreaView style={{flex: 1, padding: 10}}>
      <View style={styles.row}>
        <Text style={styles.label}>width </Text>
        {widthValues.map(value => (
          <TouchableOpacity
            key={value}
            onPress={() => setWidthType(value)}
            style={[styles.button, widthType === value && styles.selected]}>
            <Text
              style={[
                styles.buttonLabel,
                widthType === value && styles.selectedLabel,
              ]}>
              {value}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <View style={styles.row}>
        <Text style={styles.label}>height </Text>
        {heightValues.map(value => (
          <TouchableOpacity
            key={value}
            onPress={() => setHeightType(value)}
            style={[styles.button, heightType === value && styles.selected]}>
            <Text
              style={[
                styles.buttonLabel,
                heightType === value && styles.selectedLabel,
              ]}>
              {value}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      {children}
    </SafeAreaView>
  </SafeAreaProvider>
);

const styles = StyleSheet.create({
  box: {
    width: 50,
    height: 50,
  },
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  button: {
    padding: 8,
    borderRadius: 4,
    backgroundColor: 'oldlace',
    alignSelf: 'flex-start',
    marginRight: 10,
    marginBottom: 10,
  },
  selected: {
    backgroundColor: 'coral',
    shadowOpacity: 0,
    borderWidth: 0,
  },
  buttonLabel: {
    fontSize: 12,
    fontWeight: '500',
    color: 'coral',
  },
  selectedLabel: {
    color: 'white',
  },
  label: {
    textAlign: 'center',
    marginBottom: 10,
    fontSize: 24,
  },
});

export default WidthHeightBasics;
```

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

### Get Dimensions Example Usage

Source: https://github.com/react/react-native-website/blob/main/docs/dimensions.md

A concise example showing how to destructure width and height from the result of `Dimensions.get('window')`.

```tsx
const {height, width} = Dimensions.get('window');
```

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

### Installing a Specific Library Version

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.78/libraries.md

Install a particular version of a library to ensure compatibility with your React Native version. For example, installing version 2.0.0 of the netinfo library.

```bash
npm install <library-name>@<version-number>
```

```bash
npm install @react-native-community/netinfo@^2.0.0
```

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

### Hello World Example

Source: https://github.com/react/react-native-website/blob/main/docs/introduction.md

An interactive example demonstrating a basic React Native component that displays text. This can be run directly in the browser using Snack Player.

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

const YourApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text>Try editing me! 🎉</Text>
    </View>
  );
};

export default YourApp;
```

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

### Get Zulu OpenJDK 17 Installation Info

Source: https://github.com/react/react-native-website/blob/main/docs/_getting-started-macos-android.md

Retrieves information about the Zulu OpenJDK 17 installation, including its path. This is useful for verifying the installation or locating the JDK.

```shell
brew info --cask zulu@17
```

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

### Start Development Server

Source: https://github.com/react/react-native-website/blob/main/README.md

Starts the Docusaurus development server for local testing.

```bash
yarn start
```

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

### Install a Specific Library Version

Source: https://github.com/react/react-native-website/blob/main/docs/libraries.md

Install a particular version of a library, for example, to ensure compatibility with an older React Native version.

```bash
npm install <library-name>@<version-number>
```

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

### Initialize React Native Project

Source: https://github.com/react/react-native-website/blob/main/docs/fabric-native-components.md

Initialize a new React Native project. Use `--install-pods false` to skip pod installation for now.

```bash
npx @react-native-community/cli@latest init Demo --install-pods false
```

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

### Align Self Example

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.78/flexbox.md

This example demonstrates the usage of the alignSelf property to align a flex item to the start of the cross-axis. Ensure you have the necessary styles defined.

```javascript
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 8,
    backgroundColor: 'white',
  },
  box: {
    height: 55,
    // The alignSelf property is applied here
    alignSelf: 'flex-start',
  },
  // ... other styles
});
```

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

### Initialize a New React Native Project

Source: https://github.com/react/react-native-website/blob/main/docs/get-started-without-a-framework.md

Use the React Native Community CLI to generate a new project. This is the standard way to start a project from scratch.

```shell
npx @react-native-community/cli@latest init AwesomeProject
```

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

### Clipboard API Example

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.77/clipboard.md

Demonstrates how to copy text to the clipboard and fetch it back using the Clipboard API. This example requires React Native setup.

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

const App = () => {
  const [copiedText, setCopiedText] = useState('');

  const copyToClipboard = () => {
    Clipboard.setString('hello world');
  };

  const fetchCopiedText = async () => {
    const text = await Clipboard.getString();
    setCopiedText(text);
  };

  return (
    <View style={{flex: 1}}>
      <View style={styles.container}>
        <TouchableOpacity onPress={() => copyToClipboard()}>
          <Text>Click here to copy to Clipboard</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => fetchCopiedText()}>
          <Text>View copied text</Text>
        </TouchableOpacity>

        <Text style={styles.copiedText}>{copiedText}</Text>
      </View>
    </View>
  );
};

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

export default App;
```

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

### Start the Expo development server

Source: https://github.com/react/react-native-website/blob/main/website/blog/2026-02-24-react-native-comes-to-meta-quest.mdx

Run this command in your Expo project directory to start the development server. This is necessary for connecting with Expo Go on the Meta Quest headset.

```bash
npx expo start
```

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

### VirtualizedList Example (JavaScript)

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.77/virtualizedlist.md

Demonstrates a basic implementation of VirtualizedList in JavaScript, showing how to render a list of items with specified data retrieval and item rendering functions.

```javascript
import React from 'react';
import {View, VirtualizedList, StyleSheet, Text, StatusBar} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const getItem = (_data, index) => ({
  id: Math.random().toString(12).substring(0),
  title: `Item ${index + 1}`,
});

const getItemCount = _data => 50;

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

const App = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container} edges={['top']}>
      <VirtualizedList
        initialNumToRender={4}
        renderItem={({item}) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        getItemCount={getItemCount}
        getItem={getItem}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight,
  },
  item: {
    backgroundColor: '#f9c2ff',
    height: 150,
    justifyContent: 'center',
    marginVertical: 8,
    marginHorizontal: 16,
    padding: 20,
  },
  title: {
    fontSize: 32,
  },
});

export default App;
```

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

### Start Metro Bundler with npm

Source: https://github.com/react/react-native-website/blob/main/docs/_integration-with-existing-apps-kotlin.md

Run the npm start command in your project's root directory to launch the Metro bundler. This server provides the JavaScript bundle to your Android simulator or device.

```shell
npm start
```

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

### Basic Layout Animation Example

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.84/layoutanimation.md

This example demonstrates how to use LayoutAnimation to animate changes in layout properties like opacity and size. It includes platform-specific setup for Android.

```tsx
import {
  useState,
  useEffect,
} from 'react';
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button,
} from 'react-native';

if (
  Platform.OS === 'android' &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const App = () => {
  const [boxPosition, setBoxPosition] = useState('left');

  const toggleBox = () => {
    LayoutAnimation.configureNext({
      duration: 500,
      create: {type: 'linear', property: 'opacity'},
      update: {type: 'spring', springDamping: 0.4},
      delete: {type: 'linear', property: 'opacity'},
    });
    setBoxPosition(boxPosition === 'left' ? 'right' : 'left');
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button title="Toggle Layout" onPress={toggleBox} />
      </View>
      <View
        style={[styles.box, boxPosition === 'left' ? null : styles.moveRight]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: 'blue',
  },
  moveRight: {
    alignSelf: 'flex-end',
    height: 200,
    width: 200,
  },
  buttonContainer: {
    alignSelf: 'center',
  },
});

export default App;
```

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

### LayoutAnimation Presets Example

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.77/layoutanimation.md

This example demonstrates using different LayoutAnimation presets (easeInEaseOut, linear, spring) to animate the position of boxes. It includes platform-specific setup for Android.

```javascript
import React, {useState} from 'react';
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button,
} from 'react-native';

if (
  Platform.OS === 'android' &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

const App = () => {
  const [firstBoxPosition, setFirstBoxPosition] = useState('left');
  const [secondBoxPosition, setSecondBoxPosition] = useState('left');
  const [thirdBoxPosition, setThirdBoxPosition] = useState('left');

  const toggleFirstBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setFirstBoxPosition(firstBoxPosition === 'left' ? 'right' : 'left');
  };

  const toggleSecondBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
    setSecondBoxPosition(secondBoxPosition === 'left' ? 'right' : 'left');
  };

  const toggleThirdBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setThirdBoxPosition(thirdBoxPosition === 'left' ? 'right' : 'left');
  };

  return (
    <View style={styles.container}>
      <View style={styles.buttonContainer}>
        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
      </View>
      <View
        style={[ 
          styles.box,
          firstBoxPosition === 'left' ? null : styles.moveRight,
        ]}
      />
      <View style={styles.buttonContainer}>
        <Button title="Linear" onPress={toggleSecondBox} />
      </View>
      <View
        style={[ 
          styles.box,
          secondBoxPosition === 'left' ? null : styles.moveRight,
        ]}
      />
      <View style={styles.buttonContainer}>
        <Button title="Spring" onPress={toggleThirdBox} />
      </View>
      <View
        style={[ 
          styles.box,
          thirdBoxPosition === 'left' ? null : styles.moveRight,
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: 'blue',
  },
  moveRight: {
    alignSelf: 'flex-end',
  },
  buttonContainer: {
    alignSelf: 'center',
  },
});

export default App;
```

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

### Start Metro Bundler

Source: https://github.com/react/react-native-website/blob/main/docs/_integration-with-existing-apps-ios.md

Run one of these commands in the project's root directory to start the Metro development server.

```shell
npm start
```

```shell
yarn start
```

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

### Styling an Image Component

Source: https://github.com/react/react-native-website/blob/main/docs/image.md

This example shows how to apply styles, such as resizing behavior, to an Image component. The `stretch` resize mode is demonstrated.

```javascript
import {Image, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  stretch: {
    width: 50,
    height: 200,
    resizeMode: 'stretch',
  },
});

const DisplayAnImageWithStyle = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <Image
        style={styles.stretch}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
    </SafeAreaView>
  </SafeAreaProvider>
);

export default DisplayAnImageWithStyle;
```

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

### Systrace Example with Buttons

Source: https://github.com/react/react-native-website/blob/main/docs/systrace.md

This example demonstrates how to use the Systrace API to capture non-timed JavaScript events. It includes buttons to start and stop profiling, and to log counter events.

```javascript
import {Button, Text, View, StyleSheet, Systrace} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  const enableProfiling = () => {
    Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
    Systrace.beginEvent('event_label');
    Systrace.counterEvent('event_label', 10);
  };

  const stopProfiling = () => {
    Systrace.endEvent();
  };

  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Text style={[styles.header, styles.paragraph]}>
          React Native Systrace API
        </Text>
        <View style={styles.buttonsColumn}>
          <Button
            title="Capture the non-Timed JS events in EasyProfiler"
            onPress={() => enableProfiling()}
          />
          <Button
            title="Stop capturing"
            onPress={() => stopProfiling()}
            color="#FF0000"
          />
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
    gap: 16,
  },
  header: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  paragraph: {
    fontSize: 25,
    textAlign: 'center',
  },
  buttonsColumn: {
    gap: 16,
  },
});

export default App;
```

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

### onStartReached

Source: https://github.com/react/react-native-website/blob/main/docs/virtualizedlist.md

Called once when the scroll position gets within onStartReachedThreshold from the logical start of the list.

```APIDOC
## `onStartReached`

### Description
Called once when the scroll position gets within `onStartReachedThreshold` from the logical start of the list.

### Type
`function`

### Code Example
```tsx
(info: {distanceFromStart: number}) => void
```
```

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

### Full Example of useWindowDimensions

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.77/usewindowdimensions.md

This example demonstrates how to use useWindowDimensions to display height, width, font scale, and pixel ratio. It automatically updates when screen dimensions change.

```tsx
import React from 'react';
import {StyleSheet, Text, useWindowDimensions} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const App = () => {
  const {height, width, scale, fontScale} = useWindowDimensions();
  return (
    <SafeAreaProvider>
      <SafeAreaView style={styles.container}>
        <Text style={styles.header}>Window Dimension Data</Text>
        <Text>Height: {height}</Text>
        <Text>Width: {width}</Text>
        <Text>Font scale: {fontScale}</Text>
        <Text>Pixel ratio: {scale}</Text>
      </SafeAreaView>
    </SafeAreaProvider>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    fontSize: 20,
    marginBottom: 12,
  },
});

export default App;
```

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

### Style an Image

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.77/image.md

This example demonstrates how to apply styles to an Image component, including setting dimensions and resize mode.

```javascript
import React from 'react';
import {Image, StyleSheet} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  stretch: {
    width: 50,
    height: 200,
    resizeMode: 'stretch',
  },
});

const DisplayAnImageWithStyle = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <Image
        style={styles.stretch}
        source={require('@expo/snack-static/react-native-logo.png')}/>
    </SafeAreaView>
  </SafeAreaProvider>
);

export default DisplayAnImageWithStyle;
```

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

### Get Initial Deep Link (TypeScript)

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.77/linking.md

This TypeScript version of the example uses `Linking.getInitialURL()` to get the deep link that launched the app. It includes type annotations for better code safety.

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

const useInitialURL = () => {
  const [url, setUrl] = useState<string | null>(null);
  const [processing, setProcessing] = useState(true);

  useEffect(() => {
    const getUrlAsync = async () => {
      // Get the deep link used to open the app
      const initialUrl = await Linking.getInitialURL();

      // The setTimeout is just for testing purpose
      setTimeout(() => {
        setUrl(initialUrl);
        setProcessing(false);
      }, 1000);
    };

    getUrlAsync();
  }, []);

  return {url, processing};
};

const App = () => {
  const {url: initialUrl, processing} = useInitialURL();

  return (
    <View style={styles.container}>
      <Text>
        {processing
          ? 'Processing the initial url from a deep link'
          : `The deep link is: ${initialUrl || 'None'}`}
      </Text>
    </View>
  );
};

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

export default App;

```

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

### Align Items Example

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.79/flexbox.md

Demonstrates how to use the 'alignItems' style property to control the alignment of children along the cross-axis. This example shows a basic setup for aligning items within a container.

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

const AlignItemsLayout = ({label, children}) => {
  const [selectedValue, setSelectedValue] = useState(undefined);

  return (
    <View>
      <View style={[styles.row, styles.buttons]}>
        {[undefined, 'flex-start', 'center', 'flex-end', 'stretch'].map(
          (value) => (
            <TouchableOpacity
              key={value ?? 'default'}
              onPress={() => setSelectedValue(value)}
              style={[styles.button, selectedValue === value && styles.selected]}>
              <Text
                style={[ 
                  styles.buttonLabel,
                  selectedValue === value && styles.selectedLabel,
                ]}>
                {value ?? 'default'}
              </Text>
            </TouchableOpacity>
          ),
        )}
      </View>
      <View style={[styles.container, {[label]: selectedValue}]}>{children}</View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 8,
    backgroundColor: 'aliceblue',
    minHeight: 200,
  },
  box: {
    width: 50,
    height: 50,
  },
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  button: {
    paddingHorizontal: 8,
    paddingVertical: 6,
    borderRadius: 4,
    backgroundColor: 'oldlace',
    alignSelf: 'flex-start',
    marginHorizontal: '1%',
    marginBottom: 6,
    minWidth: '48%',
    textAlign: 'center',
  },
  selected: {
    backgroundColor: 'coral',
    borderWidth: 0,
  },
  buttonLabel: {
    fontSize: 12,
    fontWeight: '500',
    color: 'coral',
  },
  selectedLabel: {
    color: 'white',
  },
  label: {
    textAlign: 'center',
    marginBottom: 10,
    fontSize: 24,
  },
});

export default AlignItemsLayout;

```

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

### Button Example with Various Configurations

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.80/button.md

Demonstrates different Button configurations including basic press, adjusted color, disabled state, and side-by-side layout. Uses `Alert` for press feedback, with a web fallback to `window.alert`.

```js
import {StyleSheet, Button, View, Text, Alert, Platform} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

const Separator = () => <View style={styles.separator} />;

function showAlert(message) {
  if (Platform.OS === 'web') {
    window.alert(message);
  } else {
    Alert.alert(message);
  }
}

const App = () => (
  <SafeAreaProvider>
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}>
          The title and onPress handler are required. It is recommended to set
          accessibilityLabel to help make your app usable by everyone.
        </Text>
        <Button
          title="Press me"
          onPress={() => showAlert('Simple Button pressed')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          Adjust the color in a way that looks standard on each platform. On
          iOS, the color prop controls the color of the text. On Android, the
          color adjusts the background color of the button.
        </Text>
        <Button
          title="Press me"
          color="#f194ff"
          onPress={() => showAlert('Button with adjusted color pressed')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          All interaction for the component are disabled.
        </Text>
        <Button
          title="Press me"
          disabled
          onPress={() => showAlert('Cannot press this one')}
        />
      </View>
      <Separator />
      <View>
        <Text style={styles.title}>
          This layout strategy lets the title define the width of the button.
        </Text>
        <View style={styles.fixToText}>
          <Button
            title="Left button"
            onPress={() => showAlert('Left button pressed')}
          />
          <Button
            title="Right button"
            onPress={() => showAlert('Right button pressed')}
          />
        </View>
      </View>
    </SafeAreaView>
  </SafeAreaProvider>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    marginHorizontal: 16,
  },
  title: {
    textAlign: 'center',
    marginVertical: 8,
  },
  fixToText: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  separator: {
    marginVertical: 8,
    borderBottomColor: '#737373',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

export default App;
```

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

### start()

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.79/animated.md

Starts any running animation. It takes an optional completion callback that will be called when the animation is done.

```APIDOC
## `start()`

### Description
Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done or when the animation is done because stop() was called on it before it could finish.

### Parameters
#### callback
- `callback` (Function): Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish.

### Request Example
```tsx
Animated.timing({}).start(({finished}) => {
  /* completion callback */
});
```
```

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

### Setup Codegen for iOS

Source: https://github.com/react/react-native-website/blob/main/docs/the-new-architecture/fabric-component-native-commands.md

Run `bundle install` and `bundle exec pod install` to set up codegen for iOS. This process is part of the script phases automatically added to the project by CocoaPods.

```bash
cd ios
bundle install
bundle exec pod install
```

```shell
... 
Framework build type is static library
[Codegen] Adding script_phases to ReactCodegen.
[Codegen] Generating ./build/generated/ios/ReactCodegen.podspec.json
[Codegen] Analyzing /Users/me/src/TurboModuleExample/package.json
[Codegen] Searching for codegen-enabled libraries in the app.
[Codegen] Found TurboModuleExample
[Codegen] Searching for codegen-enabled libraries in the project dependencies.
[Codegen] Found react-native
...
```

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

### Align Self Example

Source: https://github.com/react/react-native-website/blob/main/docs/flexbox.md

Demonstrates the use of 'alignSelf: 'flex-start'' to align an item to the start of the cross-axis.

```javascript
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    backgroundColor: 'lightblue',
  },
  box: {
    width: 100,
    height: 100,
    margin: 10,
  },
  red: {
    backgroundColor: 'red',
  },
  blue: {
    backgroundColor: 'blue',
  },
  green: {
    backgroundColor: 'green',
  },
  yellow: {
    backgroundColor: 'yellow',
  },
  // Example of alignSelf
  startAligned: {
    alignSelf: 'flex-start',
  },
  centerAligned: {
    alignSelf: 'center',
  },
  endAligned: {
    alignSelf: 'flex-end',
  },
});

const App = () => (
  <View style={styles.container}>
    <View style={[styles.box, styles.red, styles.startAligned]} />
    <View style={[styles.box, styles.blue, styles.centerAligned]} />
    <View style={[styles.box, styles.green, styles.endAligned]} />
    <View style={[styles.box, styles.yellow]} />
  </View>
);

export default App;
```

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

### Build the Library

Source: https://github.com/react/react-native-website/blob/main/website/versioned_docs/version-0.82/the-new-architecture/create-module-library.mdx

Build your React Native library using the prepare script.

```bash
yarn prepare
```