Let's build iOS 16 in React Native 🤔

notJust․dev・2 minutes read

The tutorial focuses on replicating iOS 16 lock screen features and animations using React Native, Expo, and JavaScript. Vadim guides viewers through building the lock screen UI, implementing animations, and adjusting timing and delays for a smooth user experience.

Insights

The tutorial focuses on replicating iOS 16 lock screen features and animations using React Native and the React Native Animated library.
Vadim, the host, shares knowledge and experience on mobile app development, emphasizing the importance of subscribing for future videos on the subject.
Detailed step-by-step guides and assets are provided for building the iOS lock screen, covering tasks like rendering background images, displaying date and time UI, and creating footer sections with icons.
The tutorial delves into dynamic time implementation using the days.js library, state variables, and React Hooks to ensure real-time date and time display accuracy, preparing for further animation implementations with reanimated functionality.

Get key ideas from YouTube videos. It’s free

Recent questions

How can I replicate iOS 16 lock screen features?
By following a tutorial using React Native and Expo.
Where can I find step-by-step guides for iOS lock screen?
Visit assets.nojas.dev/iOS-lock-screen for guides.
Who is the host sharing knowledge on mobile app development?
Vadim is the host sharing expertise.
What library is used for displaying accurate times in the app?
The tutorial employs the days.js library.
How can I animate components on the lock screen?
Utilize React Native Animated hooks for animations.

Related videos

Summary

00:00

Building iOS 16 Lock Screen with React Native

The live stream focuses on building the iOS 16 lock screen using React Native.
The goal is to replicate the iOS 16 lock screen features and animations.
The tutorial will cover React Native using Expo and JavaScript, emphasizing React Native Animated library for animations.
The host, Vadim, shares knowledge and experience on mobile app development.
Viewers are encouraged to subscribe for future videos on mobile app development.
Assets and step-by-step guides are available at assets.nojas.dev/iOS-lock-screen.
The tutorial begins with initializing the project using "npx create Expo application."
Assets are imported from the provided bundle, including images and dummy data.
The first task involves rendering an image background using the wallpaper provided.
The next task includes displaying the date and time UI above the lock icon on the lock screen.
The tutorial progresses to implementing animations for swipe-up text, layout animations, and animated flat lists on the lock screen.

22:11

Styling Icons and Components for Display

Utilize Expo icons for screen display status, importing from Expo Vector icons.
Render the lock icon with the name "iOS lock closed" and adjust size to 20 with a white color.
Refresh the display if the icon doesn't appear, ensuring it works on iOS.
Organize the icons in a container for proper styling and spacing, enclosing them in a view.
Style the header components, assigning styles to the view, date, and time elements.
Adjust the font size of the time component to 82, with a font weight of 700 for boldness and a specific blue-tinted white color.
Customize the date component with a font size of 20, maintaining a less bold font weight for contrast.
Align the components in the center by adjusting the parent component's alignment properties.
Provide spacing between the lock icon and the date by setting a margin-top of 20 for the date.
Ensure the header displays correctly by adjusting the container's alignment properties and setting a static height of 250 for easier animation calculations.
Create a footer section after the header, including icons for flashlight and camera using Material Community Icons and Unicons.
Style the icons with a transparent background, round shape, and centered alignment within a view.
Adjust the footer's appearance by setting a background color, width, height, and padding for spacing.
Position the icons in a row with space between them using flex-direction: row and justify-content: space-between.
Ensure the footer stretches to the screen width by aligning items to stretch within the parent container.
Set a specific height for the footer for consistency and simplify future animation tasks.
Position the camera icon to the right by adjusting the flexbox's justify-content property to space-between.
Finalize the footer styling by removing unnecessary background colors and confirming the correct alignment and appearance.
Prepare for dynamic time implementation as the next task in the project.

44:22

Displaying Accurate Times with days.js Library

The tutorial focuses on working with the days.js library to display times accurately in an application.
Installation of days.js is initiated by running "npx Expo install day" in the terminal.
The days.js library returns a date object, not a string, which can be formatted easily for display.
Formatting options include HH for hours, mm for minutes, and SS for seconds, allowing customization of date and time display.
Utilizing state variables and the useState Hook from React, the current date is stored and updated for real-time display.
The setInterval function is employed to update the date state variable at specific intervals, ensuring accurate time display.
The useEffect Hook is used to initiate the interval function when the component mounts and clear it when unmounting to prevent memory leaks.
The resize mode for background images can be adjusted to ensure proper display on screens of varying sizes.
The notification flat list component is created to display notifications with images, titles, subtitles, and creation dates.
The notification list component renders a flat list using data from a notifications array, showcasing the notifications in a scrollable format within the application.

01:06:00

"Implement iOS-style animations in React UI"

Implement animations by ensuring the time remains fixed at the top of the screen when scrolling up, similar to iOS behavior.
Utilize the "list header component" property in flat lists to render the time as the list header component, allowing it to scroll with the list.
Adjust the status bar color to white to ensure visibility and consistency with iOS styling.
In React, consider using a scrollable div as an alternative to the flat list component.
Complete the UI part of the project, marking the user interface as finished.
Prepare to delve into animations, focusing on replicating Apple's animations for the lock screen.
Install reanimated in the Expo project using the command "npx Expo install react native reanimated."
Modify the babel.config file by adding the react native animated plugin for reanimated functionality.
Explore layout animations to easily animate components entering and exiting the screen, such as sliding and fading effects.
Transition to custom animations for more intricate and personalized effects, like creating a swipe up to open label with custom animations.

01:32:18

Animating Components with React Native Hooks

Animated styles can be used to style components, such as changing the color to red.
To move text to the top, the transform property is utilized, specifically translating the item on the Y-axis.
Negative values move the item closer to the top, while positive values move it lower on the screen.
React Native Animated hooks, like with timing, can smoothly move items in a specified direction.
The with repeat hook can repeat animations a set number of times or infinitely.
The with sequence hook allows for sequencing multiple animations in a specific order.
Opacity can be animated alongside position changes, with timing and delay functions used to control the transition.
Proper timing and delays are crucial to ensure synchronized animations of position and opacity.
Drawing a timeline can help visualize the sequence of animations and their durations.
The community feedback indicates that the explanation of the animations was clear and understandable.

01:59:07

Optimizing Animation Timing for Clarity and Impact

The timing of animations needs adjustment based on a diagram provided.
Design adjustments involve increasing the pause between animations.
The pose between animations should be increased from 300 to a longer duration.
The opacity segment should be increased from 300 to 1000 for a smoother transition.
The translation animation segment should be extended from 300 milliseconds to one second for better timing.
Adjustments are made based on a graph to ensure clarity in animations.
Further adjustments include increasing the segment duration for opacity and delay.
The delay between animations is increased to three seconds for a more pronounced effect.
Gradual decay may occur if numbers are not adjusted correctly, impacting animations.
Preparation for a course on full-stack mobile development is underway, with excitement for the upcoming start.

02:24:27

Animating Footer Visibility and Item Transitions

The opacity of an item on the screen is directly linked to the footer visibility value, with 1 making it fully visible and 0 making it invisible.
To ensure proper animation, use shared values and the animated style function, returning an object for animation.
When working with shared values, the animated style function should return an object, not directly an object.
Apply the animated footer style to the footer component to control its visibility based on the footer visibility value.
Use withTiming from Reanimated to smoothly animate the appearance and disappearance of the footer.
To give space to the flat list when the footer is not visible, use negative margins, mapping the footer visibility value to adjust the margin top.
Implement interpolation to smoothly transition the margin top value from -85 to 0 based on the footer visibility value.
Instead of moving the entire flat list, animate each individual item to create a more dynamic effect when hiding the list.
Use the onBeginDrag event to trigger the animation of hiding the list when scrolling down and showing it when scrolling up.
Utilize the interpolate function to map the list visibility value to adjust the translation of each item, creating a varied speed effect for items on the screen.

02:50:34

"Animating list items for dynamic display"

The index of an item in a list determines its position, with the index being crucial for identifying the item's display position.
Calculating the start position of an element involves multiplying the notification height by the index.
The distance between an element and its target position is determined by subtracting the start position from 500 pixels.
Adjusting the target position to 700 pixels can prevent items from being visible on the screen.
To dynamically set the target position, subtract the header and footer heights from the screen height.
Animating items to move below involves adjusting their position based on the container height.
Scaling down items as they move below can be achieved by animating the scale property.
Adjusting the opacity of items as they disappear or appear can enhance the animation effect.
Implementing animations for the last visible item in the list involves using the scroll y position to drive the animation.
Differentiating the animation start range for individual items based on their start positions can create a staggered appearance effect.

03:17:46

"Scrolling, Translation, Interpolation: UI Animation Techniques"

Scroll position starts from zero and goes to infinity.
Translation occurs from minus notification height to zero.
Interpolation defines two positions, position one and position two.
Clamping is used to restrict the translation values.
Extrapolation dot clamp is specified to control the interpolation.
Footer height is derived from footer visibility for animation adjustments.
Use memo hook is employed to prevent unnecessary re-rendering of components.
Header component is memoized to avoid repeated animations.
The task list and animations for the lock screen UI are completed.
The process involved rendering the UI, implementing animations, and fixing velocity issues.

03:48:30

"Smooth Animations Enhance Live Stream Experience"

Implemented animations in a live stream for a flat list, including hiding the footer while scrolling to provide more space for list elements without abrupt transitions.
Developed an animation to hide the notification list in the flat list, requiring individual item animations with varying speeds to create a stacked effect at the bottom of the screen.
Created a smooth animation for the last item in the list using opacity, translation, and scale adjustments to give the appearance of the item moving behind previous items, with plans to explore gyroscope-driven animations in future projects.

Try it yourself — It’s free.