Skip to main content

New release, new features, achieved milestones

ยท 7 min read
Kirill Zyusko
Library author

In this blog post I'd like to make an overview of new features available in 1.9.0 as well as going through the big milestones that were achieved ๐Ÿ˜Ž

Introducing the New Features in react-native-keyboard-controllerโ€‹

I'm excited to announce the latest release of react-native-keyboard-controller! This update brings two powerful new features to help you manage the keyboard behavior in your React Native applications. Whether you're building a simple form or a complex UI, these additions will make your life easier ๐Ÿ˜Ž

KeyboardStickyViewโ€‹

KeyboardStickyView is a new component that simplifies handling keyboard interactions in your React Native applications. With this component, you can easily ensure that the content inside remains visible, accessible and is sticky to the keyboard movement. Here are some of the key features:

  • Auto-Adjustment: The KeyboardStickyView automatically adjusts the position of your UI components when the keyboard is displayed, ensuring that your content inside a container remains visible.
  • Customizable Behavior: You have full control over how the UI adjusts when the keyboard is shown or hidden. You can specify offset property and it'll automatically interpolate values based on keyboard animation to make the transition seamless.
  • Universal Compatibility: Whether your users are on Android or iOS, KeyboardStickyView ensures that your content remains accessible and visible, even when the keyboard appears. No more platform-specific quirks; it just works.
  • Custom Content: The flexibility of KeyboardStickyView shines as you can place any content inside it. It's perfect for multi-step flows, chats, or any scenario where you need buttons and widgets to remain easily accessible when the keyboard is up.
  • Effortless Integration: Implementing KeyboardStickyView in your app is a breeze. Just wrap your UI elements within this component, and it takes care of the rest. It automatically adjusts the position of your UI components as the keyboard is shown or hidden.

useReanimatedFocusedInput hookโ€‹

This hook represents a significant evolution from the features introduced in the 1.6.0 release. In 1.6.0, a new target property was introduced to fetch the layout of the currently focused TextInput. While it served its purpose, it came with a set of challenges:

  • Complex Setup on Fabric Architecture: Setting up this feature on the new Fabric architecture posed complications, including the use of deprecated APIs like findNodeHandle.
  • Inconsistencies Across Architectures: The measurements could sometimes yield different results depending on the underlying architecture in use.
  • Inability to Detect Layout Changes: It lacked the ability to detect layout changes for the focused TextInput within the library's ecosystem.

Considering these challenges, the decision was made to enhance the library's capabilities and introduce a new hook that simplifies interactions with the API while addressing the issues mentioned above. And thus, I present to you...๐Ÿฅ

The new useReanimatedFocusedInput hook ๐Ÿ˜Ž. This hook eliminates the need for integrating or using third-party elements, ensuring consistent functionality across all platforms and architectures. Its standout feature is its ability to detect events crucial for building robust keyboard handling, even beyond direct keyboard interactions, such as the detection of layout changes.

With useReanimatedFocusedInput, I've created a more streamlined and versatile solution to meet your needs.

Achieved milestonesโ€‹

๐ŸŽ‰ Celebrating 1000 Stars: A Heartfelt Thank You to Our Incredible Community ๐ŸŒŸโ€‹

The react-native-keyboard-controller has reached an incredible milestone - 1000 stars! ๐Ÿš€ This achievement wouldn't have been possible without the unwavering support and contributions from amazing community of developers and enthusiasts.

I want to take a moment to express my deepest gratitude to each and every one of you who has been a part of this journey. Your support, engagement, and feedback have played a crucial role in shaping this project and making it what it is today.

Thank You for:

๐Ÿ™Œ Star Power: Your stars show your endorsement and appreciation for my work. Each star represents a vote of confidence and encouragement.

๐Ÿ’ฌ Engaging Feedback: Your questions, suggestions, and issues have helped me improve the library and make it more robust. Your thoughtful feedback is invaluable.

๐Ÿ‘ฉโ€๐Ÿ’ป Contributions: Many of you have contributed your time and expertise to enhance the project. Your code, documentation updates, and bug reports have been a driving force behind my progress.

๐ŸŒ Spreading the Word: Sharing the project within your networks has helped me grow and reach a wider audience. Your support has a ripple effect.

๐Ÿค Community Spirit: Your active participation in discussions, forums, and events related to the library creates a sense of unity and shared purpose.

๐Ÿ“ˆ 8.000 weekly downloads on npmโ€‹

While 8.000 weekly downloads on npm is undoubtedly a milestone to celebrate, I want to take a moment to express my heartfelt appreciation to every single user of react-native-keyboard-controller. Whether you've been with me from the beginning or you've just started using the library, your trust and support mean a lot for me.

It's not about the size of the number; it's about the impact each one of you makes in your own unique way. Every user is an integral part of the growing community, contributing to the success and development of the project. Your feedback, your questions, your ideas, and your trust are what keep me inspired and motivated!

So, thank you. Thank you for choosing react-native-keyboard-controller for your applications. Your faith in the library drives me to continually improve, innovate, and provide you with the best tools for your React Native projects.

Special Thank You โค๏ธโ€‹

Especially I want to make a huge shoot out to:

  • Hirbod for your sponsoring, promotion, contributions and early library adoption ๐Ÿ˜Ž
  • Ivan for your ideas, help and early adoption of this library ๐Ÿ’ช
  • Ksu for your sponsoring, help and mental support on every step of this library creation, I appreciate it โค๏ธ
  • Marcelo T Prado for your sponsoring, active participation in issue resolution, contributions, and fresh ideas ๐Ÿš€
  • Abed El Rahman Al Tawil for your sponsoring and active involvement in addressing issues ๐Ÿ‘

Your support and collaboration have strengthened the community and enriched the project. I couldn't have come this far without you. Thank you for believing in the mission and helping me create a better environment for React Native development.

Instead of summaryโ€‹

The latest features in react-native-keyboard-controller are designed to simplify keyboard interactions and add visual appeal to your React Native applications. Whether you need to ensure your content remains visible when the keyboard is active or want to create stunning animations, this update has got you covered.

To get started, update your package to the latest version of react-native-keyboard-controller, and dive into the documentation to see these features in action.

I look forward to hearing your feedback and suggestions. Feel free to reach out to me or create GitHub issues or discussions. Happy coding!

Stay tuned for future updates and releases as I continue to enhance the react-native-keyboard-controller library. Follow me on Twitter and GitHub for updates. Your support means the world to me, and if you're interested in taking our collaboration to the next level, consider sponsoring me on GitHub ๐Ÿ˜Š

Thank you for being part of our community and for your continued support! ๐Ÿš€