![]() ![]() Note that this solution relies on two additional libraries, for the header height, and for the keyboard height. Import React, ) Įnter fullscreen mode Exit fullscreen mode In the end, we get a shiny new 2021-friendly, less than 100 line, deliciously clean keyboard shifting view component: This actually makes things easier while at the same time eliminating the second deprecation of using asure(), since we are able to call the measure() method directly on the ref returned by currentlyFocusedInput(). ![]() TextInputState.currentlyFocusedField() can be replaced with TextInputState.currentlyFocusedInput() which returns not a number (like currentlyFocusedField()), but a React ref to the input itself. Long story short, I converted the class component to a functional component with hooks and found a way to replace those two deprecated methods. Second, it was utilizing deprecated methods of TextInputState.currentlyFocusedField() and asure(). The first was that it was the old school style of class components. I found this potential solution from John Tucker via codeburst.io, which takes the input location and keyboard height itself and adjusts the screen accordingly - but there were two things that I didn't like with that post. It was time to hunt for a different solution. While iPhones of all shapes and sizes were working great with React Native's standard KeyboardAvoidingView component, I quickly learned that Android devices didn't like to abide by the same rules.Īlarm bells started going off when I read something on Stack Overflow (no link, I couldn't find it again) that some phone manufacturers for Android don't expose the keyboard API at all! So it was clear that I couldn't reliably trust whatever info Android phones were sending to React Native's KeyboardAvoidingView. In our case, we followed the styling and layout used in Whatsapp, Tinder, and Facebook Messenger. You want a clean text input and send button - luckily, we have fantastic apps to use as examples. The most critical screen of an entire chat function, in my opinion, is the chat window itself. □Īlright, enough joking - let's get into the technical info and code. (Did you know, for example, that Flipper screws up file uploads in development mode on React Native projects, and that commenting out a single line fixes it?) <- that little gem right there took me 2 weeks to figure out why file uploads wouldn't work on Android devices. ![]() You know how many people they needed to get the chat working?! TEAMS!Īll bravado aside, I had multiple cases of imposter syndrome and existential crisis during the sprint. I know, I know, most dev consultants would need teams of people to get this done. □ This wasn't your grandma's chat either - the full feature set included profile picture uploading, routing push notifications to the correct chat window based on sender, and creation of new channels based on various events around the app. That's right - I built an entire chat function in a mobile app in 3 weeks. Our latest sprint (for "v.1.3.0□") was designed to culminate in a chat functionality. I've been deep in the React Native world recently as I develop big features for InClub, an app that enables you to join and host private events! This post is mirrored on my blog, chrisfrew.in ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |