Custom Bottom Navigation Bar in React Native

Introduction

• No external libraries used
• Custom bottom nav bar from scratch
• Components: Grey background, Bottom bar, Curve, Action button, Icons (Home, Search, Menu, Settings)
• Suitable for those looking for a custom tab bar

Setup and Components

• Create a BottomNavigator component
• Hard-coded layout for simplicity
• Key imports: TouchableOpacity, Image, styles

Background View

• Use absolute positioning
• Set width to 70, height to 35
• Use elliptical border radius
• Add grey background
• Styled with flex for center alignment

Touchable Button

• Wrap in TouchableOpacity
• Add ToggleOpen function on press
• Image styles: width 60, height 50
• Background color: taupe
• Shadow properties: opacity 0.5, radius 30, offset {x: 2, y: 5}
• Elliptical border radius for button

Action Button Styles

• Width & height: 60
• Align & justify content center
• Background color: custom (hex #ff5858)
• Add text shadow, border white

Bottom Bar View

• Position absolute
• Background color white
• Border width: 2, Radius: 3
• Box shadow with opacity
• Flex direction: row, justify space-between
• Add padding: 25

Adding Icons

• Wrap icons in touchable elements
• Use flex column for alignment
• TouchableOpacity for icons (Home, Search, Menu, Settings)
• Add image source URI for icons
• Icons styled with margin and center alignment

Text Labels for Icons

• Add text below each icon
• Center-text with flex
• Labels for Home, Search, etc.

Conclusion

• Customizable and reusable bottom navigation component
• Example provided: Button Navigator
• Encourage comments and subscriptions