-
-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## 📜 Description Added new blogpost for upcoming `1.9.0` release. ## 💡 Motivation and Context I want to highlight new key features of the release. Additionally I want to make an overview of achievements, so I've decided to combine everything into a single blogpost 🙂 ## 📢 Changelog ### Docs - added a new blogpost; ## 🤔 How Has This Been Tested? Tested on `localhost:3000` and via preview. ## 📝 Checklist - [x] CI successfully passed
- Loading branch information
1 parent
ba6e036
commit 668275c
Showing
1 changed file
with
98 additions
and
0 deletions.
There are no files selected for viewing
98 changes: 98 additions & 0 deletions
98
docs/blog/2023-11-01-new-features-achieved-milestones/index.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| --- | ||
| slug: new-features-achieved-milestones | ||
| title: New release, new features, achieved milestones | ||
| authors: [kirill] | ||
| tags: [react-native, keyboard, new hook, sticky view, achieved milestones] | ||
| keywords: [react-native-keyboard-controller, keyboard, keyboard sticky view, sticky view, KeyboardStickyView, focused input, focused input layout, useReanimatedFocusedInput] | ||
| --- | ||
|
|
||
| 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 😎 | ||
|
|
||
| import Lottie from 'lottie-react'; | ||
| import lottie from '../../docs/api/components/keyboard-sticky-view/ksv.lottie.json'; | ||
|
|
||
| <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 20 }}> | ||
| <Lottie className="lottie" animationData={lottie} style={{ width: 400, height: 400 }} loop /> | ||
| </div> | ||
|
|
||
| <!-- truncate --> | ||
|
|
||
| ### `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](https://github.com/hirbod) for your sponsoring, promotion, contributions and early library adoption 😎 | ||
| - [Ivan](https://github.com/IvanIhnatsiuk) for your ideas, help and early adoption of this library 💪 | ||
| - [Ksu](https://github.com/ksugaevskaya) for your sponsoring, help and mental support on every step of this library creation, I appreciate it ❤️ | ||
| - [Marcelo T Prado](https://github.com/MarceloPrado) for your sponsoring, active participation in issue resolution, contributions, and fresh ideas 🚀 | ||
| - [Abed El Rahman Al Tawil](https://github.com/mrtawil) 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](https://github.com/kirillzyusko/react-native-keyboard-controller/issues) or [discussions](https://github.com/kirillzyusko/react-native-keyboard-controller/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](https://twitter.com/ziusko) and [GitHub](https://github.com/kirillzyusko) for updates. Your support means the world to me, and if you're interested in taking our collaboration to the next level, consider [sponsoring](https://github.com/sponsors/kirillzyusko) me on GitHub 😊 | ||
|
|
||
| Thank you for being part of our community and for your continued support! 🚀 |