DOCSEARCHbyAlgolia
Submit Docs

netflix-ui

repository·main·Indexed 23 days ago

https://github.com/saulsharma/netflix-ui

A React Native UI implementation inspired by the Netflix interface. It provides pre-defined styles and components for streaming service experiences, including a HomeScreen with animated headers, parallax effects via useDeviceMotion, and VisionOS support. The package includes a central UI component entrypoint and a global styles object for layout, navigation, featured content, and content lists.

Tokens
529
Snippets
0
Records
4
Agent score
33%

What's inside netflix-ui

  2. Access global application styles via the `styles` object

    main

    The styles object contains a collection of pre-defined React Native StyleSheet objects used to maintain visual consistency across the Netflix UI clone. You can import this object and apply its properties to your components' style props.

    Key style groups include:

    • Layout & Containers: container, scrollView, scrollViewContent, contentList.
    • Header & Navigation: header, headerTitleContainer, headerTitle, categoryTabs, categoryTab, activeTab.
    • Featured Content: featuredContent, featuredWrapper, featuredImage, featuredLogo, playButton, myListButton.
    • Content Lists: movieRow, contentItem, thumbnail, sectionTitle, top10List.
    • Previews & Details: contentPreview, previewTitle, previewDescription, previewRating.
    • Coming Soon: comingSoonList, dateBadge, dateDay.

  4. Use the HomeScreen component

    main

    The HomeScreen component serves as the main entrypoint for the home tab. It implements a complex UI featuring:

    • Animated Header: A header that responds to scroll position via headerAnimatedProps.
    • Parallax/Tilt Effects: Uses useDeviceMotion to apply transform styles to featured content, categories, and buttons.
    • Dynamic Tab Visibility: Automatically hides or shows tabs based on scroll direction using a SLIDE_ACTIVATION_POINT (set to 90) and a SCROLL_THRESHOLD (set to 4).
    • VisionOS Support: Wraps content in a VisionContainer and adjusts padding if isVisionOS is true.
    • Content Rendering: Displays a FeaturedContent section followed by a list of MovieList or GameList components based on the rowTitle in the movie data.

    To use this screen, it is typically rendered via expo-router as the / or /index route within the (tabs) layout.