### Install react-native-m3 Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md Install the library and its peer dependency using npm. Ensure React Native version is 0.78.0 or higher. ```bash npm install react-native-m3 react-native-nitro-modules ``` -------------------------------- ### Install CocoaPods Dependencies Source: https://github.com/kamp0010/react-native-m3/blob/main/example/README.md Installs Ruby dependencies for iOS development using CocoaPods. Run 'bundle install' once to install the bundler, then 'bundle exec pod install' after updating native dependencies. ```sh bundle install ``` ```sh bundle exec pod install ``` -------------------------------- ### Start Metro Bundler Source: https://github.com/kamp0010/react-native-m3/blob/main/example/README.md Starts the Metro JavaScript bundler for React Native development. Use npm or Yarn to run this command from the project root. ```sh # Using npm npm start # OR using Yarn yarn start ``` -------------------------------- ### LyricLine Type Definition Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md Defines the structure for a single line of lyrics, including its text content, start time, and an optional end time. ```typescript interface LyricLine { words: string; // Text content startTimeMs: number; // Start time in milliseconds endTimeMs?: number; // End time (optional) } ``` -------------------------------- ### Convert Gradient Angle to Offset Source: https://github.com/kamp0010/react-native-m3/blob/main/new.txt Converts a GradientAngle enum value into a GradientOffset data class, defining the start and end points for a linear gradient. Useful for applying gradients programmatically. ```kotlin fun GradientOffset(angle: GradientAngle): GradientOffset = when (angle) { GradientAngle.CW45 -> GradientOffset( start = Offset.Zero, end = Offset.Infinite, ) GradientAngle.CW90 -> GradientOffset( start = Offset.Zero, end = Offset(0f, Float.POSITIVE_INFINITY), ) GradientAngle.CW135 -> GradientOffset( start = Offset(Float.POSITIVE_INFINITY, 0f), end = Offset(0f, Float.POSITIVE_INFINITY), ) GradientAngle.CW180 -> GradientOffset( start = Offset(Float.POSITIVE_INFINITY, 0f), end = Offset.Zero, ) GradientAngle.CW225 -> GradientOffset( start = Offset.Infinite, end = Offset.Zero, ) GradientAngle.CW270 -> GradientOffset( start = Offset(0f, Float.POSITIVE_INFINITY), end = Offset.Zero, ) GradientAngle.CW315 -> GradientOffset( start = Offset(0f, Float.POSITIVE_INFINITY), end = Offset(Float.POSITIVE_INFINITY, 0f), ) else -> GradientOffset( start = Offset.Zero, end = Offset(Float.POSITIVE_INFINITY, 0f), ) } ``` -------------------------------- ### Run Code Generation Command Source: https://github.com/kamp0010/react-native-m3/blob/main/IMPLEMENTATION_GUIDE.md Execute the npm script to generate C++ bridge and Kotlin Specs for new components. ```bash npm run codegen ``` -------------------------------- ### Gradient Background from Image URL Source: https://github.com/kamp0010/react-native-m3/blob/main/new.txt Use this component to create an animated gradient background by providing an image URL. It extracts colors from the image and applies a smooth gradient. Ensure the Coil library is set up for image loading. ```kotlin GradientBackgroundFromImage( imageUrl = "https://example.com/album.jpg", gradientAngle = GradientAngle.CW135, endColor = Color.Black, modifier = Modifier.fillMaxSize(), content = { // Your player content here } ) ``` ```kotlin @Composable fun GradientBackgroundFromImage( imageUrl: String, gradientAngle: GradientAngle = GradientAngle.CW135, endColor: Color = md_theme_dark_background, animationDuration: Int = 300, modifier: Modifier = Modifier.fillMaxSize(), content: @Composable () -> Unit = {}, ) { // Palette state for color extraction from image val paletteState = rememberPaletteState() // Animated start color (extracted from palette) val startColor = remember { Animatable(md_theme_dark_background) } // Gradient offset based on selected angle val gradientOffset by remember { mutableStateOf(GradientOffset(gradientAngle)) } // Store bitmap of the album art var albumBitmap by remember { mutableStateOf(null) } // Generate palette from the loaded image LaunchedEffect(imageUrl) { // Load image and convert to bitmap for palette generation val request = ImageRequest .Builder(LocalPlatformContext.current) .data(imageUrl) .diskCachePolicy(CachePolicy.ENABLED) .crossfade(300) .build() try { val bitmap = request.context.imageLoader.executeBlocking(request).image?.let { // Convert drawable to bitmap it } // Note: In real implementation, you'd use Coil's toBitmap() extension // This requires the image to be loaded first } catch (e: Exception) { e.printStackTrace() } } // Extract and animate colors from palette LaunchedEffect(Unit) { snapshotFlow { paletteState.palette } .distinctUntilChanged() .collect { val extractedColor = palette.getColorFromPalette() startColor.animateTo( targetValue = extractedColor, animationSpec = tween(durationMillis = animationDuration), ) } } // Display the image (optional, can be hidden or used as background) AsyncImage( model = ImageRequest .Builder(LocalPlatformContext.current) .data(imageUrl) .diskCachePolicy(CachePolicy.ENABLED) .crossfade(300) .build(), contentDescription = "Album Artwork", modifier = Modifier.fillMaxSize(), ) { // Generate palette from the successfully loaded image state.result.takeIf { it.image != null }?.let { LaunchedEffect(it.image) { try { paletteState.generate(it.image!!) } catch (e: Exception) { e.printStackTrace() } } } } // Apply gradient background Box( modifier = modifier.background( Brush.linearGradient( colors = listOf( startColor.value, endColor, ), start = gradientOffset.start, end = gradientOffset.end, ), ), ) { content() } } ``` -------------------------------- ### Gradient Background from Bitmap Source: https://github.com/kamp0010/react-native-m3/blob/main/new.txt Use this component when you already have an ImageBitmap. It simplifies creating an animated gradient background directly from the provided bitmap. Customize gradient angle and end color as needed. ```kotlin GradientBackgroundFromBitmap( bitmap = imageBitmap, gradientAngle = GradientAngle.CW90, modifier = Modifier.fillMaxSize(), ) { // Your content } ``` ```kotlin @Composable fun GradientBackgroundFromBitmap( bitmap: ImageBitmap, gradientAngle: GradientAngle = GradientAngle.CW135, endColor: Color = md_theme_dark_background, animationDuration: Int = 300, modifier: Modifier = Modifier.fillMaxSize(), ``` -------------------------------- ### Image-Based Animated Gradient Background Source: https://github.com/kamp0010/react-native-m3/blob/main/new.txt Use this Composable to create a gradient background that dynamically extracts colors from a provided bitmap and animates the gradient transition. Ensure a bitmap is available for color extraction. ```kotlin val paletteState = rememberPaletteState() val startColor = remember { Animatable(md_theme_dark_background) } val gradientOffset by remember { mutableStateOf(GradientOffset(gradientAngle)) } LaunchedEffect(bitmap) { try { paletteState.generate(bitmap) } catch (e: Exception) { e.printStackTrace() } } LaunchedEffect(Unit) { snapshotFlow { paletteState.palette } .distinctUntilChanged() .collect { palette -> val extractedColor = palette.getColorFromPalette() startColor.animateTo( targetValue = extractedColor, animationSpec = tween(durationMillis = animationDuration), ) } } Box( modifier = modifier.background( Brush.linearGradient( colors = listOf( startColor.value, endColor, ), start = gradientOffset.start, end = gradientOffset.end, ), ), ) { content() } ``` -------------------------------- ### GradientBackgroundFromImage Source: https://github.com/kamp0010/react-native-m3/blob/main/new.txt Creates a gradient background by extracting colors from a given image URL. It automatically animates color changes and allows customization of gradient angle, end color, animation duration, and content. ```APIDOC ## GradientBackgroundFromImage ### Description A reusable gradient background component that automatically extracts colors from album artwork and applies a smooth animated gradient. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters - **imageUrl** (String) - Required - URL of the album artwork image - **gradientAngle** (GradientAngle) - Optional - The angle direction of the gradient (default: CW135) - **endColor** (Color) - Optional - The end color of the gradient (default: md_theme_dark_background) - **animationDuration** (Int) - Optional - Duration of color animation in milliseconds (default: 300) - **modifier** (Modifier) - Optional - Modifier for the Box (default: Modifier.fillMaxSize()) - **content** (@Composable () -> Unit) - Optional - Composable lambda for content to be displayed over gradient (default: {}) ### Request Example ```kotlin GradientBackgroundFromImage( imageUrl = "https://example.com/album.jpg", gradientAngle = GradientAngle.CW135, endColor = Color.Black, modifier = Modifier.fillMaxSize(), content = { // Your player content here } ) ``` ### Response #### Success Response (200) This component does not return a value, it renders a UI element. #### Response Example None ``` -------------------------------- ### GradientBackgroundFromBitmap Source: https://github.com/kamp0010/react-native-m3/blob/main/new.txt Creates a gradient background directly from an ImageBitmap. This is useful when the image is already loaded. It allows customization of gradient angle, end color, animation duration, and content. ```APIDOC ## GradientBackgroundFromBitmap ### Description Simplified version that takes a bitmap directly. Useful when you already have the image bitmap loaded. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters - **bitmap** (ImageBitmap) - Required - The ImageBitmap to extract colors from - **gradientAngle** (GradientAngle) - Optional - The angle direction of the gradient (default: CW135) - **endColor** (Color) - Optional - The end color of the gradient (default: md_theme_dark_background) - **animationDuration** (Int) - Optional - Duration of color animation in milliseconds (default: 300) - **modifier** (Modifier) - Optional - Modifier for the Box (default: Modifier.fillMaxSize()) - **content** (@Composable () -> Unit) - Optional - Composable lambda for content to be displayed over gradient ### Request Example ```kotlin GradientBackgroundFromBitmap( bitmap = imageBitmap, gradientAngle = GradientAngle.CW90, modifier = Modifier.fillMaxSize() ) { // Your content } ``` ### Response #### Success Response (200) This component does not return a value, it renders a UI element. #### Response Example None ``` -------------------------------- ### Build and Run iOS App Source: https://github.com/kamp0010/react-native-m3/blob/main/example/README.md Builds and runs the React Native application on an iOS simulator or device. This command should be run in a separate terminal while Metro is active. ```sh # Using npm npm run ios # OR using Yarn yarn ios ``` -------------------------------- ### Build and Run Android App Source: https://github.com/kamp0010/react-native-m3/blob/main/example/README.md Builds and runs the React Native application on an Android device or emulator. This command should be run in a separate terminal while Metro is active. ```sh # Using npm npm run android # OR using Yarn yarn android ``` -------------------------------- ### Static Gradient Background Source: https://github.com/kamp0010/react-native-m3/blob/main/new.txt A simple Composable for creating a static linear gradient background. This is useful when you don't need image-based color extraction and want a predefined gradient. It fills the maximum size by default. ```kotlin val gradientOffset by remember { mutableStateOf(GradientOffset(gradientAngle)) } Box( modifier = modifier.background( Brush.linearGradient( colors = listOf(startColor, endColor), start = gradientOffset.start, end = gradientOffset.end, ), ), ) { content() } ``` -------------------------------- ### LyricsView Component Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md A component to display synchronized lyrics with customizable text and colors. ```APIDOC ## LyricsView Component ### Description A component to display synchronized lyrics with customizable text and colors. ### Props #### Required Props - **lines** (LyricLine[]) - Array of lyric lines. - **syncType** ('LINE_SYNCED' | 'RICH_SYNCED' | 'UNSYNCED') - Sync mode. - **currentTimeMs** (number) - Current playback position in ms. #### Optional Props - **translatedLines** (LyricLine[]) - Optional translated lyrics. - **activeTextColor** (string) - Hex color for active line. Default: `#FFFFFF`. - **inactiveTextColor** (string) - Hex color for inactive lines. Default: `#595959`. - **translationColor** (string) - Hex color for translations. Default: `#FFFF00`. - **fontSize** (number) - Font size in SP. Default: 24. - **fontFamily** (string) - Custom font family name (must be registered in the app). - **showScrollShadows** (boolean) - Show gradient shadows. Default: `true`. - **backgroundColor** (string) - Background for shadows. Default: `#242424`. - **onLineClick** ((ms: number) => void) - Tap callback for seeking. ### Custom Fonts The `fontFamily` prop uses dynamic resolution via React Native's standard mechanisms. You can use fonts loaded via `expo-font` or registered through `react-native.config.js`. ### Example Usage ```tsx ``` ### LyricLine Type ```typescript interface LyricLine { words: string; // Text content startTimeMs: number; // Start time in milliseconds endTimeMs?: number; // End time (optional) } ``` ``` -------------------------------- ### Add New ViewManager to M3Package Source: https://github.com/kamp0010/react-native-m3/blob/main/IMPLEMENTATION_GUIDE.md Register the newly generated ViewManager for M3Button in the M3Package class to make it available to React Native. ```kotlin override fun createViewManagers(reactContext: ReactApplicationContext): List> { return listOf( HybridWavyProgressIndicatorViewManager(), HybridWavySliderViewManager(), HybridM3ButtonViewManager() // Add new manager here ) } ``` -------------------------------- ### LoadingIndicator with Morphing Animation Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md Implement a Material Design loading indicator that animates between different polygon shapes. Specify the desired colors and the sequence of vertices for the morphing effect. ```tsx import { LoadingIndicator } from 'react-native-m3'; // ... ``` -------------------------------- ### LoadingIndicator Component Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md A Material Design loading indicator with a morphing animation between geometric shapes. ```APIDOC ## LoadingIndicator (@ExperimentalMaterial3ExpressiveApi) ### Description A modern Material Design loading indicator that features a morphing animation between various geometric shapes (polygons). ### Props | Prop | Type | Default | Description | | :--- | :--- | :--- | :--- | | `color` | `string` | Material Default | Hex color of the loading indicator. | | `polygonVertices` | `number[]` | `[...MaterialDefault]` | Sequence of vertices for the morphing shapes (min 2). | ### Example Usage ```tsx import { LoadingIndicator } from 'react-native-m3'; // ... ``` ``` -------------------------------- ### LyricsView Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md A synchronized lyrics display component supporting line-synced, word-synced, and static lyrics. It allows customization of text colors and sync behavior. ```APIDOC ## LyricsView ### Description A synchronized lyrics display component with support for line-synced, word-synced (rich sync), and static lyrics. ### Props #### Path Parameters - None #### Query Parameters - None #### Request Body - None ### Component Usage ```tsx import { LyricsView, callback } from 'react-native-m3'; const lyrics = [ { words: "Hello world", startTimeMs: 0 }, { words: "This is a test", startTimeMs: 3000 }, { words: "Of synced lyrics", startTimeMs: 6000 }, ]; // ... seekTo(ms))} activeTextColor="#FFFFFF" inactiveTextColor="#595959" /> ``` ### Props Details - **style** (object) - Optional - Styles for the LyricsView component. - **lines** (array) - Required - An array of lyric objects, each with `words` (string) and `startTimeMs` (number). - **syncType** ('LINE_SYNCED' | 'RICH_SYNCED' | 'STATIC') - Optional - Type of synchronization. For rich sync, word timing format is `word word`. - **currentTimeMs** (number) - Required - The current playback time in milliseconds. - **onLineClick** ((ms: number) => void) - Optional - Callback invoked when a lyric line is clicked. - **activeTextColor** (string) - Optional - Hex color for the active lyric line. - **inactiveTextColor** (string) - Optional - Hex color for inactive lyric lines. ``` -------------------------------- ### WavySlider Usage Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md Implement WavySlider for an expressive slider with a dynamic wave track. Callbacks must be wrapped with `callback()`. Customize wave height, length, and direction. ```tsx import { WavySlider, callback } from 'react-native-m3'; // ... setSliderValue(v))} waveHeight={10} waveLength={30} waveDirection="TAIL" /> ``` -------------------------------- ### LyricsView Usage Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md Display synchronized lyrics with LyricsView. Supports line-synced and rich (word-synced) modes. Use `callback()` for event handlers like `onLineClick`. ```tsx import { LyricsView, callback } from 'react-native-m3'; const lyrics = [ { words: "Hello world", startTimeMs: 0 }, { words: "This is a test", startTimeMs: 3000 }, { words: "Of synced lyrics", startTimeMs: 6000 }, ]; // ... seekTo(ms))} activeTextColor="#FFFFFF" inactiveTextColor="#595959" /> ``` -------------------------------- ### WavyProgressIndicator Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md A circular progress indicator with an expressive wavy animation on the track. It allows customization of progress, colors, stroke widths, and wave properties. ```APIDOC ## WavyProgressIndicator ### Description A circular progress indicator that features an expressive wavy animation on the track. ### Props #### Path Parameters - None #### Query Parameters - None #### Request Body - None ### Component Usage ```tsx import { WavyProgressIndicator } from 'react-native-m3'; // ... ``` ### Props Details - **progress** (number) - Required - The progress (0.0 to 1.0). - **color** (string) - Optional - Hex color of the indicator. Default: Material Default. - **trackColor** (string) - Optional - Hex color of the track. Default: Material Default. - **strokeWidth** (number) - Optional - Stroke width in DP. Default: 4. - **trackStrokeWidth** (number) - Optional - Track stroke width in DP. Default: 4. - **gapSize** (number) - Optional - Gap between track and progress in DP. Default: 4. - **amplitude** (number) - Optional - Wave amplitude (0.0 to 1.0). Default: 0.2. - **wavelength** (number) - Optional - Length of a single wave cycle in DP. Default: 20. - **waveSpeed** (number) - Optional - Speed of wave movement in DP/s. Default: 10. ``` -------------------------------- ### WavySlider Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md A highly expressive slider that transforms the track into a dynamic wave. It supports value changes, wave customization, and interaction toggles. ```APIDOC ## WavySlider ### Description A highly expressive slider that transforms the track into a dynamic wave. ### Props #### Path Parameters - None #### Query Parameters - None #### Request Body - None ### Component Usage ```tsx import { WavySlider, callback } from 'react-native-m3'; // ... setSliderValue(v))} waveHeight={10} waveLength={30} waveDirection="TAIL" /> ``` ### Props Details - **value** (number) - Required - The current value of the slider. - **onValueChange** ((v: number) => void) - Optional - Invoked during dragging. - **onValueChangeFinished** (() => void) - Optional - Invoked when dragging ends. - **valueRangeMin** (number) - Optional - Minimum range value. Default: 0. - **valueRangeMax** (number) - Optional - Maximum range value. Default: 1. - **steps** (number) - Optional - Number of discrete steps (0 for continuous). Default: 0. - **waveLength** (number) - Optional - Wave cycle length in DP. Default: 20. - **waveHeight** (number) - Optional - Wave amplitude in DP. Default: 6. - **waveVelocity** (number) - Optional - Speed of animation in DP/s. Default: 10. - **waveDirection** ('HEAD' | 'TAIL' | 'LEFT' | 'RIGHT') - Optional - Direction of wave travel. Default: 'TAIL'. - **waveThickness** (number) - Optional - Thickness of the active wavy track. Default: 4. - **trackThickness** (number) - Optional - Thickness of the inactive track. Default: 4. - **incremental** (boolean) - Optional - If wave increases height towards thumb. Default: false. - **enabled** (boolean) - Optional - Interaction toggle. Default: true. - **activeTrackColor** (string) - Optional - Active track hex color. - **thumbColor** (string) - Optional - Thumb hex color. ``` -------------------------------- ### Extract Color from Image Palette Source: https://github.com/kamp0010/react-native-m3/blob/main/new.txt Safely extracts a vibrant color from a Palette object, prioritizing specific color types (DarkVibrant, DarkMuted, etc.). Falls back to a default background color if the palette is null or no suitable color is found. ```kotlin fun Palette?.getColorFromPalette(): Color { val p = this ?: return md_theme_dark_background val defaultColor = 0x000000 var startColor = p.getDarkVibrantColor(defaultColor) if (startColor == defaultColor) { startColor = p.getDarkMutedColor(defaultColor) if (startColor == defaultColor) { startColor = p.getVibrantColor(defaultColor) if (startColor == defaultColor) { startColor = p.getMutedColor(defaultColor) if (startColor == defaultColor) { startColor = p.getLightVibrantColor(defaultColor) if (startColor == defaultColor) { startColor = p.getLightMutedColor(defaultColor) } } } } } return Color(startColor) } ``` -------------------------------- ### Define Nitro Spec for M3Button Source: https://github.com/kamp0010/react-native-m3/blob/main/IMPLEMENTATION_GUIDE.md Update TypeScript definitions to include a new HybridView for M3Button, specifying its props and callbacks. ```typescript interface M3Button { label: string onPress: () => void } ``` -------------------------------- ### WavyProgressIndicator Usage Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md Use WavyProgressIndicator for a circular progress indicator with a wavy animation. Customize color, stroke width, and wave properties. ```tsx import { WavyProgressIndicator } from 'react-native-m3'; // ... ``` -------------------------------- ### LyricsView Custom Font Configuration Source: https://github.com/kamp0010/react-native-m3/blob/main/README.md Configure a custom font for the LyricsView component by providing its registered name to the fontFamily prop. Ensure the font is loaded via expo-font or registered in react-native.config.js. ```tsx ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.