In a recent React Native project I was asked to visualize a list of items in a way a little more appealing than just rendering each item with no animations at all. This way, we wanted to contribute more to our overall interactive app look & feel.


[intro_animate-react-native.mp4](https://prod-files-secure.s3.us-west-2.amazonaws.com/0d2f7ef3-c792-4b31-a3cb-7bfddc891f17/6ed0f6f5-016c-4fa5-ac9a-8fcada5c7c58/intro_animate-react-native.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45FSPPWI6X%2F20241205%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20241205T153555Z&X-Amz-Expires=3600&X-Amz-Signature=046112b262e9f701264e504ff546cef5fafeb2f8b7ac842bb7126e8c864f9d97&X-Amz-SignedHeaders=host&x-id=GetObject)


![Untitled.png](/images/posts/animated-flatlist-in-react-native/337d78f2-7edf-4f03-9b00-34cb682224a8.png)


# Heading 1


## Heading 2


`code goes here` and it should be awesome!


Test


one


two


three


four


five


## Links ?

- [https://github.com/NotionX/react-notion-x](https://github.com/NotionX/react-notion-x)
- [https://github.com/transitive-bullshit/nextjs-notion-starter-kit](https://github.com/transitive-bullshit/nextjs-notion-starter-kit)

**Inline styled text** [**https://github.com/NotionX/react-notion-x**](https://github.com/NotionX/react-notion-x) **and more after**


![Untitled.png](/images/posts/animated-flatlist-in-react-native/a9a831fa-fd0b-47ad-a747-0f8856788183.png)

- [x] Pretty URLs
- [x] Custom domains
- [x] Google Fonts
- [x] Page title/description for SEO
- [x] Custom scripts
- [x] A setup wizard to customize the script (instead of having to change the raw code)
- [ ] Stop random pages from showing up under custom domain
- [ ] Hide the What's New banner

![Untitled.png](/images/posts/animated-flatlist-in-react-native/a9a831fa-fd0b-47ad-a747-0f8856788183.png)


## Blocks ?


[link_preview](https://github.com/NotionX/react-notion-x)


[link_preview](https://github.com/transitive-bullshit/nextjs-notion-starter-kit)


`0:35` Josh Elman reached out to Alex Zhu in September of 2015. He was shocked to learn that Alex and [Musical.ly](http://musical.ly/) were based in Shanghai, China.


`1:45` Before working on Musical.ly, Alex spent most of his career in enterprise software (SAP). Alex's passion was always in consumer businesses: using the consumer approach to deal with enterprise design. 


`2:15` In 2013, Alex was a futurist for education in SAP. Tried to do some research on how the education industry was going to transform with new technology. **This prompted Alex to start a company in the education space. Alex and his co-founder came up with a "billion dollar" startup idea to transform education by combining Coursera + Twitter into a new product. The vision was to make educational content mobile-first and bite-sized.** This turned out to be a "complete failure."


`3:35` What were the lessons from this failure? And how did Alex ultimately decide to make Musical.ly?


	Major lessons from the failure:

	1. **If you want to build a new user-generated content platform or social network then the content has to be** _**extremely**_ **light. The content creation AND consumption need to happen within seconds, not minutes.**
	2. Education is a little bit against human nature. If you look at how people use their phone, the majority of people are using their phone to communicate and entertain (play games, using social media, or messaging).
	3. **It's pretty hard for a new startup to try to change human nature. It's better to follow the human nature than to fight against it.**
	4. **For a new social platform to take off, your early adopters need to be young.** Especially teenagers in the U.S. — why? They have a lot of time and they are creative. They are already digitally native. If your product can attract a small group of these users, they will talk about it in school and on social media — you won't need to spend as much for distribution. Zero cost distribution.

`6:00` How did you go from zero users to today? How did you start to grow your community? 


	[Musical.ly](http://musical.ly/) launched with "a lot of hacks." — App Store used to let you make your App Store name really long. The search engine on the App Store used to give more weight to the application name vs. keywords defined. So...they put a really long app name with all keywords. This led to them initially growing organically on the App Store.


	Initially, [Musical.ly](http://musical.ly/) focused on utility at first. Before you have the critical mass of users, you have to focus on utility. And then once you have enough users, you can start building a community around it. 


		Instagram Example: 


		Initial users of Instagram 1.0 didn't use Instagram for the feeds or likes or comments. They used Instagram for the amazing filters that they would post on other social medias.


	**Come for the utility, stay for the community.** 


---


### This is a great video


[video](https://www.youtube.com/watch?v=cG9hQTEaFxk)


### Heading 3


As you can see in the above picture, the requirement was to animate the items of given to a FlatList after another, but the rendering had to be customizable. We wanted to control how long it takes to render each item, have an optional initial delay before the first item is rendered, as well as giving users the chance to control how many items are rendered in parallel. And, of course, using this library should not require the user to do anything different when using this library compared to using the basic React Native FlatList component directly.


---


For a start, I created a simple wrapper wrapping React Native’s FlatList component. I already added the additional props with some defaults required to configure the animations.


```typescript
import React, { FC } from 'react';
import { ReactElement } from 'react';
import { FlatListProps, ListRenderItemInfo, FlatList } from 'react-native';

const FadeInFlatList = <ItemT,>({
  itemsToFadeIn = 10,
  initialDelay = 0,
  durationPerItem = 50,
  parallelItems = 1,
  ...props
}: FlatListProps<ItemT> & {
  itemsToFadeIn?: number;
  initialDelay?: number;
  durationPerItem?: number;
  parallelItems?: number;
}): ReactElement => {
  return (
    <FlatList
      {...props}
    />
  );
};

export default FadeInFlatList;
```


[embed](https://x.com/hirbod_dev/status/1794174301110981037)


[embed](https://pbs.twimg.com/media/GOZ-sDMXYAAv67e?format=jpg&name=large)


[embed](https://ro.pinterest.com/pin/352054895890867737/)


[embed](https://ro.pinterest.com/pin/1135470124815021178/)

Animated FlatList in React Native

In this tutorial, we will walk through how to build an animated onboarding flow using **React Native Reanimated**. We'll break down each component used for pagination, buttons, and dot indicators, and explore the animations involved. By the end of this guide, you'll have a smooth, interactive onboarding experience ready to be implemented in your React Native app.


**Watch the tutorial**


[video](https://www.youtube.com/watch?v=m8ATJwrAif0)


## Introduction


An onboarding flow is a crucial part of any mobile app. It introduces users to the core features and helps them get started quickly. To make this process more engaging, adding subtle animations can enhance the experience. In this tutorial, we will build a multi-step onboarding flow with animated pagination and navigation buttons using **Reanimated**.


**Grab the code**


[bookmark](https://www.animatereactnative.com/post/onboarding-pagination-indicator-reanimated)


## Prerequisites


Before getting started, ensure you have React Native Reanimated set up in your project. If you're new to it, follow their [installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started) for instructions.


Now, let’s dive into creating an animated onboarding experience.


---


## Step 1: Setting Up Constants


First, we’ll define some constants that control spacing, dot size, and animation properties. These will ensure a consistent layout across all components.


```typescript
const _spacing = 8;
const _buttonHeight = 42;
const _layoutTransition = LinearTransition.springify()
  .damping(80)
  .stiffness(200);
const _dotContainer = 24;
const _dotSize = _dotContainer / 3;
const _activeDot = "#fff";
const _inactiveDot = "#aaa";

```

- `_spacing`: General spacing between elements.
- `_buttonHeight`: Height of the onboarding navigation buttons.
- `_layoutTransition`: A spring-based layout transition that provides smooth movement.
- `_dotContainer`: Size of the dot container.
- `_dotSize`: Actual size of the dot.
- `_activeDot` and `_inactiveDot`: Colors for active and inactive dots.

These constants will be used throughout the tutorial to standardize the layout and animations.


---


## Step 2: Creating the Button Component


The `Button` component will be used for navigation between the onboarding steps. We'll use Reanimated's `AnimatedPressable` to create a button with animated enter and exit effects.


### Button Component


```typescript
function Button({ children, style, ...rest }: AnimatedProps<PressableProps>) {
  return (
    <AnimatedPressable
      style={[
        {
          height: _buttonHeight,
          borderRadius: _buttonHeight / 2,
          justifyContent: "center",
          alignItems: "center",
          paddingHorizontal: _spacing * 2,
        },
        style,
      ]}
      entering={FadeInLeft.springify().damping(80).stiffness(200)}
      exiting={FadeOutLeft.springify().damping(80).stiffness(200)}
      layout={_layoutTransition}
      {...rest}
    >
      {children}
    </AnimatedPressable>
  );
}

```


### Explanation:

- **Layout and Style**: We give the button a round shape by setting the `borderRadius` to half of its height. It also has padding for spacing.
- **Animations**: When the button appears, it enters with a `FadeInLeft` animation, and when it disappears, it exits with a `FadeOutLeft` animation. Both use spring-like physics to ensure smooth transitions.

---


## Step 3: Creating the Pagination Dots


Next, we’ll create animated dots for the pagination. The dots will change color based on the current onboarding step.


### Dot Component


```typescript
function Dot({ index, animation }: { index: number; animation: SharedValue<number>; }) {
  const stylez = useAnimatedStyle(() => {
    return {
      backgroundColor: interpolateColor(
        animation.value,
        [index - 1, index, index + 1],
        [_inactiveDot, _activeDot, _activeDot]
      ),
    };
  });

  return (
    <View style={{ width: _dotContainer, height: _dotContainer, justifyContent: "center", alignItems: "center" }}>
      <Animated.View style={[stylez, { width: _dotSize, height: _dotSize, borderRadius: _dotSize }]} />
    </View>
  );
}

```


### Explanation:

- **interpolateColor**: This function interpolates the background color based on the current index, changing the dot color to `_activeDot` (white) when selected and `_inactiveDot` (gray) when inactive.
- **useAnimatedStyle**: We use Reanimated's `useAnimatedStyle` to dynamically change the dot's color during the transition between steps.

---


## Step 4: Adding a Pagination Indicator


The `PaginationIndicator` is a moving element that highlights the active dot. It grows and shrinks as the user navigates through the onboarding steps.


### PaginationIndicator Component


```typescript
function PaginationIndicator({ animation }: { animation: SharedValue<number>; }) {
  const stylez = useAnimatedStyle(() => {
    return {
      width: _dotContainer + _dotContainer * animation.value,
    };
  });

  return (
    <Animated.View
      style={[
        {
          backgroundColor: "#29BE56",
          height: _dotContainer,
          width: _dotContainer,
          borderRadius: _dotContainer,
          position: "absolute",
          left: 0,
          top: 0,
        },
        stylez,
      ]}
    />
  );
}

```


### Explanation:

- **useAnimatedStyle**: The width of the indicator is animated as the user switches between onboarding steps. This gives a fluid sliding effect over the dots.
- **Layout**: The indicator has a fixed position and moves between the dots.

---


## Step 5: Assembling the Pagination Component


Now, let’s bring the `Dot` and `PaginationIndicator` components together into a `Pagination` component. This component will render the dots and control the active step.


### Pagination Component


```typescript
export function Pagination({ selectedIndex, total }: { selectedIndex: number; total: number; }) {
  const animation = useDerivedValue(() => {
    return withSpring(selectedIndex, { damping: 80, stiffness: 200 });
  });

  return (
    <View style={{ justifyContent: "center", alignItems: "center" }}>
      <View style={{ flexDirection: "row" }}>
        <PaginationIndicator animation={animation} />
        {[...Array(total).keys()].map((i) => (
          <Dot key={`dot-${i}`} index={i} animation={animation} />
        ))}
      </View>
    </View>
  );
}

```


### Explanation:

- **selectedIndex**: The `selectedIndex` determines the current step, which controls the dot color and indicator animation.
- **useDerivedValue**: We use `useDerivedValue` to smoothly animate the transitions between steps with a spring effect.
- **Rendering Dots**: The dots are rendered dynamically based on the total number of steps in the onboarding flow.

---


## Step 6: Building the Main Onboarding Flow


Finally, we’ll put everything together into the main `Onboarding` component, which manages the steps, pagination, and buttons for navigating through the onboarding flow.


### Onboarding Component


```typescript
export function Onboarding({ total, selectedIndex, onIndexChange }: { total: number; selectedIndex: number; onIndexChange: (index: number) => void; }) {
  return (
    <View style={{ padding: _spacing, gap: _spacing * 2 }}>
      <Pagination total={total} selectedIndex={selectedIndex} />
      <View style={{ flexDirection: "row", gap: _spacing }}>
        {selectedIndex > 0 && (
          <Button
            style={{ backgroundColor: "#ddd" }}
            onPress={() => { onIndexChange(selectedIndex - 1); }}
          >
            <Text style={{ fontWeight: "700" }}>Back</Text>
          </Button>
        )}
        <Button
          style={{ backgroundColor: "#036BFB", flex: 1 }}
          onPress={() => {
            if (selectedIndex >= total - 1) return;
            onIndexChange(selectedIndex + 1);
          }}
        >
          {selectedIndex === total - 1 ? (
            <Animated.Text
              key="finish"
              style={{ color: "#fff", fontWeight: "700" }}
              entering={FadeInDown.springify().damping(80).stiffness(200)}
              exiting={FadeOutUp.springify().damping(80).stiffness(200)}
            >
              Finish
            </Animated.Text>
          ) : (
            <Animated.Text
              key="continue"
              style={{ color: "#fff", fontWeight: "700" }}
              layout={_layoutTransition}
              entering={FadeInDown.springify().damping(80).stiffness(200)}
              exiting={FadeOutUp.springify().damping(80).stiffness(200)}
            >
              Continue
            </Animated.Text>
          )}
        </Button>
      </View>
    </View>
  );
}

```


### Explanation:

- **Buttons**: If the `selectedIndex` is greater than 0, the “Back” button appears, allowing the user to go to the previous step. The “Continue” button dynamically changes to “Finish” on the last step.
- **Pagination**: The current index is passed to the `Pagination` component, which updates the dot colors and indicator position.

---


## Step 7: Integrating the Onboarding Component into a Screen


To use the `Onboarding` component in your app, you can integrate it within a screen like this:


```typescript
export default function OnboardingScreen() {
  const [index, setIndex] = useState(0);
  const totalSteps = 3;

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Onboarding
        total={totalSteps}
        selectedIndex={index}
        onIndexChange={setIndex}
      />
    </View>
  );
}

```


### Explanation:

- **Managing State**: We manage the current step using the `index` state. The total number of steps is set to 3, and we pass this to the `Onboarding` component.
- **Handling Navigation**: The `setIndex` function updates the current step, allowing the user to navigate through the onboarding steps.

---


## Conclusion


By following these steps, you’ll be able to create a fully functional animated onboarding flow using React Native Reanimated. The components are modular and can be easily customized to fit your app's design. You can adjust the animations, layout, and overall behavior to provide a unique onboarding experience for your users.


**Grab the code**


[bookmark](https://www.animatereactnative.com/post/onboarding-pagination-indicator-reanimated)


Let me know if you need any more assistance!

Create an Animated Onboarding Flow with React Native Reanimated

React Native Marquee component, a cross-platform marquee component, powered by Reanimated:

- 🔋 Powered by Reanimated 3
- 📱 Works with Expo
- ✅ Cross-platform (iOS, Android, Web)
- ⚡️ 60-120fps
- 🪝 Works with any React Native element/component
- ⌨️ Written in TypeScript

[link_preview](https://github.com/animate-react-native/marquee)


Marquee animations are a fantastic way to display scrolling text or content in a limited space, perfect for showcasing announcements, headlines, or featured items. The new `@animatereactnative/marquee` library makes creating smooth, customizable marquee effects effortless in React Native. In this post, we’ll explore the library’s core features, prop options, and how to get started.


[embed](https://animate-react-native.github.io/marquee/)


## 🎉 Key Features of `@animatereactnative/marquee`

- **Smooth Animation**: Built using React Native Reanimated, this library ensures seamless and lag-free animations.
- **Flexible Customization**: Control the speed, spacing, and style of the marquee to align with any design.
- **Responsive Design**: Optimized for various screen sizes, ensuring consistent visuals across platforms.
- **Ease of Use**: Designed to be developer-friendly, making marquee animations accessible with minimal configuration.

## 📥 Installation


To install `@animatereactnative/marquee`, use npm or yarn:


```shell
# Using npm
npm install @animatereactnative/marquee

# Using yarn
yarn add @animatereactnative/marquee
```


`@animate-react-native/marquee` depends on the React Native Reanimated library. To add it, follow these steps:


```shell
npm install react-native-reanimated
# or
yarn add react-native-reanimated
```


Once both `@animatereactnative/marquee` and `react-native-reanimated` are installed, you’re all set to start using marquee animations!


## ⚙️ Basic Usage with Flexible Content


Creating a marquee animation is simple. Here’s an example from the official repository that demonstrates how you can wrap any React Native component within the marquee effect:


```javascript
import { Marquee } from '@animatereactnative/marquee';

// ...

export function Example() {
  return (
    <Marquee spacing={20} speed={1}>
      <Heading>Powered by AnimateReactNative.com</Heading>
    </Marquee>
  );
}
```

- **Wrap any component**: You can pass any React Native component inside `Marquee`, including `Text`, `Image`, or custom components, to create an interactive and visually engaging marquee.
- **Example content**: In this example, we display a combination of text messages and images that will scroll continuously. This is great for announcements, promotions, or displaying a series of images and messages together.

## Customizing the Marquee with Props


The `@animatereactnative/marquee` library offers a range of props for easy customization:


| Prop       | Description                                                  | Required | Type                   | Default |
| ---------- | ------------------------------------------------------------ | -------- | ---------------------- | ------- |
| `children` | Any component or text to apply the infinite scrolling effect | **Yes**  | `React.ReactNode`      | —       |
| `speed`    | Controls the speed of the marquee animation                  | No       | `number`               | `1`     |
| `spacing`  | Sets the spacing between repeated items                      | No       | `number`               | `0`     |
| `style`    | Styles to apply to the marquee container                     | No       | `StyleProp<ViewStyle>` | —       |


## 🎨 Use Cases for Marquee Animations


The library is suitable for many applications:

- **News Headlines**: Display the latest news in a scrolling format.
- **Sales Announcements**: Showcase sales or promotions.
- **Stock Tickers**: Show live stock prices or exchange rates.
- **Event Highlights**: Announce event schedules or important updates.

## 🛠️ Open Source Contributions


As an open-source project, `@animatereactnative/marquee` welcomes contributions! You can help by:

- Submitting pull requests for enhancements or bug fixes.
- Opening issues for feature requests or bugs.
- Providing feedback on usability and new features.

Visit the GitHub repository for more details:


[link_preview](https://github.com/animate-react-native/marquee)


## 🚀 Final Code Example


```javascript
import React from 'react';
import { Marquee } from '@animatereactnative/marquee';
import { Text, Image, View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      {/* Marquee Component */}
      <Marquee speed={1.5} spacing={20} style={styles.marqueeContainer}>
        {/* Custom Content */}
        <Image
          source={{ uri: '<https://placekitten.com/200/200>' }}
          style={styles.image}
        />
        <Text style={styles.text}>Limited-time offers available now!</Text>
        <Image
          source={{ uri: '<https://placekitten.com/200/200>' }}
          style={styles.image}
        />
        <Text style={styles.text}>Sign up today for exclusive discounts!</Text>
      </Marquee>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  marqueeContainer: {
    paddingVertical: 10,
    backgroundColor: '#333',
    borderRadius: 5,
  },
  image: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginHorizontal: 10,
  },
  text: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    marginHorizontal: 10,
  },
});

```


---


This guide covers everything you need to get started with `@animate-react-native/marquee`, from installation to implementation and customization. Enjoy bringing smooth marquee effects to your app!

Effortless Marquee Animations in React Native

**Exciting News: I’ve Started Blogging on** [**AnimateReactNative.com**](http://animatereactnative.com/)**!**


I’m thrilled to announce that I’ve officially started blogging over at [AnimateReactNative.com](https://animatereactnative.com/)! 🎉 Whether you’re new to mobile development or a seasoned pro, there’s going to be something for everyone. I’ll be sharing a wide range of content, including **in-depth tutorials**, **walk-throughs**, **code snippets**, and **quick, hasty tips** designed to help you get the most out of React Native, animations, and mobile app development.


My goal is to make this a space where we can all learn, grow, and experiment together. Expect regular posts that break down complex concepts into easy-to-follow steps, and be ready to dive into topics like React Native animations with **Reanimated,** **Moti**, **React Native Gesture Handler,** mobile performance optimization, and more!


### Get Involved: Submit Your Inspiration!


But wait, there’s more! I want this journey to be as interactive as possible. That’s why I’m inviting you to **submit your ideas and inspiration** on the [Inspiration page](https://www.animatereactnative.com/inspiration). Have a cool animation concept or a tricky challenge you’d love to see brought to life? Send it my way! I’ll be selecting ideas from the community and coding them live during upcoming streams. It’s a great way to collaborate and get your ideas featured in real-time!


---


Don’t forget to subscribe to my **YouTube channel** for even more in-depth video tutorials, where I’ll be breaking down advanced concepts and sharing live coding sessions.


[bookmark](https://www.youtube.com/@catalinmirondev)


---


Stay tuned for more updates, and I can’t wait to share what’s coming next. Let’s build something amazing together! 🚀


Thank you for supporting my journey! I’m excited to share that we’ve reached **700 users** who now have a **lifetime license** on AnimateReactNative.com. Your support means the world, and I’m so grateful to have such an amazing community of developers.


![image.png](/images/posts/new-blog-tutorials-tips-and-live-coding/48c6d827-5252-4c2d-91c2-26ecfa21ba88.png)


🎉🎉🎉

blog

Effortless Marquee Animations in React Native

Create an Animated Onboarding Flow with React Native Reanimated

New Blog: Tutorials, Tips, and Live Coding