I like to think there is 2 ways, and 2 ways only, to understand how an element compute its width and height, when not given: To answer this question, we "simply" have to answer to the most fundamental question in layout: How the size of an element is computed when it's not explicitly fixed in its style? 2.1 Understanding the auto-sizing of an element: the parent vs content-driven model Why were the text too large in the first place? This is the second question I asked myself, and the answer was trickier than I thought.Ģ. why was the initial text too large in the first place? Why did we have to make it shrink? Here is a drawing that helped me fix the idea:īut. ++code>flexGrow++/code> (and ++code>flexShrink++/code>) controls the size of an item along what is usually called the main axis of the container (see the React Native doc) : in our case, horizontally. I used to believe that it was because of the ++code>flexGrow++/code> part that ++code>flex: 1++/code> worked we had to allow the element to grow vertically, so the text could gently wrap in a wider space? Nice mental model, but it's wrong! Note: If you need a reminder about Flexbox properties, I recommend this article on CSS-Tricks: clear and well illustrated, made for web CSS but really useful for React Native too. We won't discuss the ++code>flexBasis++/code> property in this article, as it has no impact in the problem. In the Flexbox layout, ++code>flex: 1++/code> is a shortcut for 3 style properties: 1.2 why does the solution works: FlexGrow & FlexShrink The Text is wrapping, but not enough so we can see it entirely. The row container is itself in a classic vertical ++code>View++/code>. But they are not impacting for the study: everything essential is above.īasically, what we have is a++code> Text++/code> in a row container, with an icon before. Used some extra padding, colors and radiuses. Note: You can play around with the code to obtain the screenshot, I Here is a React Native code that allows to reproduce the bug ?: Why is the solution working? 1.1 situation Basic knowledge of React Native / Javascript - Basic knowledge of Flexbox Layoutġ. This article does not require an extended developer experience to be understood. You will need: Then, more interestingly, I explain why was the Text going off screen in the first place First why is the StackOverflow fix working 2. And after some exploration, I happily announce you that I solved it! ? I'll explain everything in this article:ġ. You see, it made a lot of reasons to want to solve this mystery. We are a Swiss Agency specializing in React Native, caring even about the smallest of details.My Brain after fixing the going-out Text without understanding what I did Thanks to Axelra for sponsoring my time to turn this into an open source project! Written by Jonny Burger for our needs at Axelra. See the contributing guide to learn how to contribute to the repository and the development workflow. With Animateable Text, you can use props that you cannot use on a TextInput, such as selectable, dataDetectorType or onTextLayout. Lack of full capabilities: Not all props are available. (Behavior in screenshot happens only on Android) Inconsistent styling: When styling a TextInput, you need to add more styles to make it align with the rest of your text. The problem gets worse the slower the device and the more congested the render queue is. This naturally comes with a few edge cases, for example:įlicker: When changing values too fast, the text can be cut off and show an ellipsis. However, under the hood, it uses a and animates it's value prop. The best way so far has been to use the component from react-native-redash, which allows you to render a string from a Reanimated Text node. Using createAnimatedComponent doesn't allow you to animate the text since the children of Text are separate nodes rather than just props. Updating native state is too slow and not feasible for a smooth experience. We want to animate numbers based on gestures as fast as possible, for example for charts displaying financial data. FC = ( ) => OMG, why would you build this? Import AnimateableText from 'react-native-animateable-text' const Example: React.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |