Animated Bottom Tab

Hello friend!

In this video, you'll be introduced to the exciting world of creating animated bottom tabs using React Native and Reanimated. With the powerful tools provided by React Native Reanimated, you'll be able to craft engaging and captivating animations for any type of component in your React Native projects.

Whether you're a seasoned React Native developer or just starting out, this video will guide you through the process of creating stunning animated bottom tabs that are sure to impress your users. You'll learn how to leverage the power of Reanimated to create fluid and responsive animations that bring your app to life.

In addition to exploring the basics of creating animated bottom tabs, you'll also discover advanced techniques for working with Animations in React Native Reanimated.

So, if you're ready to learn how to create impressive animated bottom tabs with React Native and Reanimated, then this is the video for you. Get ready to unleash your creativity and take your React Native development to new heights!

Learn more about Layout Animations in the React Native Reanimated Docs

Dependencies

yarn add @react-navigation/bottom-tabs
yarn add @react-navigation/native
yarn add d3-shape
yarn add react-native-reanimated
yarn add react-native-redash
yarn add react-native-safe-area-context
yarn add react-native-screens
yarn add react-native-svg
yarn add react-native-vector-icons
yarn add @types/d3-shape
yarn add @types/react-native-vector-icons

Make sure you add the following to your babel.config.js file:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"], // Add this line
  };
};

Also add this to your info.plist (for IOS)

<key>UIAppFonts</key>
<array>
  <string>FontAwesome.ttf</string>
  <string>Feather.ttf</string>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
</array>

Links

Go back to Projects