Download to read offline
Uploaded byKaty Slemon
Understanding Flexbox Layout in React Native.pdf
El tutorial explica el uso de Flexbox en React Native, destacando sus conceptos fundamentales y cómo implementar diseños de aplicación utilizando esta técnica. Se aborda la configuración de contenedores y elementos flex, así como las propiedades clave como `flex-direction`, `justify-content` y `align-items`. Además, se presentan ejemplos prácticos y un recurso de GitHub para acceder a un repositorio de ejemplos de Flexbox.
Understanding Flexbox Layout in React Native.pdf
- 1.
- 2.
- 3. If you haveworked with mobile applications development or frontend development, you might be familiar with designing an application using flexbox. If you don’t know, then don’t worry. Just stick to this tutorial till the end; you will come to know the basics and implementation of flexbox layout. Let’s move ahead with our tutorial: Flexbox Layout in React Native Application without further ado.
- 4.
- 5. General discussion aboutflexbox layout Different React Native layouts Flexbox layout properties Implementing flexbox layout in React Native app The first thing to know is what our tutorial has for you. So, these are the main sections that we will cover in this blog post. So much knowledge, right? Moving towards our first section. Let’s read about what flexbox is and learn about its concept.
- 6.
- 7. Flexible Box Module,popularly known as flexbox, is a designing model that deals with a one-dimensional layout of an application. Now, what does this one-dimensional layout means? Simple, it states that the concept of flexbox relies on the layout with one dimension at a time – it could be a row or column. Further, flexbox gives the freedom to distribute the space between interface items and powerful alignments capabilities. Flexbox layout has made developers’ lives easy by lessening application responsiveness struggles. Fundamental concepts of Flexbox Layout
- 8. Two Axes ofFlexbox Main Axis: It is defined by property flex- direction Cross Axis: It runs perpendicular to the main axis Flexbox deals with two axes – Start and End Lines Before, CSS had given more importance to left-to-write writing mode and made it default. But, with modern layout methods, a wide range of writing modes was introduced. Thus, it stopped the assumption of text lines starting at the top left of the document and ending at the right of the document.
- 9. Flex Container The areaof the document on which we want to apply the flex property can be said as a flex container. To create a flex container, you just need to set the display property(of the area’s container) as flex or inline-flex. And, items within the area’s container will become flex items.
- 10. Looking for ReactNative developers to build high- performance mobile applications? Bacancy has the most dedicated and skilled developers. Contact us today and hire React Native developer!
- 11.
- 12. React Native provideslimited but sufficient flexbox layout properties and values. The main difference is that all the React Native container elements are, by default, Flex containers. There’s no need to add a display: ‘flex’. It avoids writing extra code. Keep in mind that the child element of the parent container can be positioned with the property Flex item – ‘align-self’. Here’s an example of applying the property align- self:flex-end to Flex container (last box) that contains child elements.
- 13. Here are differentdefaults for React native development that makes flexbox more advantageous.
- 14.
- 15. This section willdiscuss flexbox properties that can enhance your application’s design.
- 16. Flexbox Layout in ReactNative Example
- 17. orange box white box greenbox. Let’s implement flexbox in our React Native application. Our demo application will have a parent container with three boxes: The parent and child container is a View Component.
- 18. // Layout constApp = () => { return ( <View style={styles.container}> <View style={styles.orangeBox} /> <View style={styles.whiteBox} /> <View style={styles.greenBox} /> </View> ); }; // Style const styles = StyleSheet.create({ container: { backgroundColor: '#454545', }, orangeBox: { width: 80, height: 80, backgroundColor: 'orange', }, whiteBox: { width: 80, height: 80, backgroundColor: 'white', }, greenBox: { width: 80, height: 80, backgroundColor: 'blue', }, }); Output
- 19. After adding theproperty is flex: 1, the space is split into a single group; thus, our parent container will display on the entire screen. container: { flex: 1, backgroundColor: '#454545', }, React Native Flex
- 20.
- 21. React Native FlexDirection flexDirection controls the direction of child elements of the parent container. Here are the values you can add to flexDirection. column– It is the default value. It aligns child elements from top to bottom. On enabling the wrapping, the next line will start to the right of the first item to the top container. row– It aligns the elements from left to the right. The next line will start under the first element to the left container on enabling the wrapping. column- reverse– It aligns elements in the reverse order – bottom to top. On enabling the wrapping, the next line will start to the right of the first item to the bottom container.
- 22. row-reverse– It alignselements in the reverse order – right to left. The next line will start under the first item to the right container to enable the wrapping. container: { flex: 1, flexDirection: 'row', backgroundColor: '#454545', }, Output
- 23. React Native Justify Content flex-start-It is the default value. Aligns elements to the container’s main axis start. flex-end-Aligns elements to the container’s main axis end. center- Aligns elements to the container’s main axis center. justifyContent is used to align the child elements within the main axis of the parent container. You can set the elements horizontally and vertically by setting flexDirection as row and column. The property offers a few more values are stated below:
- 24. space-between- Evenly spaceoff the elements and distribute the remaining spaces equally between the children across the container’s main axis. space-around- Evenly space off the elements and distribute the remaining spaces around the children across the container’s main axis. space-evenly- Evenly distributes the elements. The spaces between the adjacent items, first item and main- start edge, and last item and main-end edge are the same. Let’s see a few examples.
- 25. justifyContent: ‘flex-start’ container: { flex:1, flexDirection: 'row', justifyContent: 'flex- start', backgroundColor: '#454545', }, Output
- 26. Below are thescreenshots of the output of each of these values used for property justifyContent. justifyContent: ‘flex-end’
- 27.
- 28.
- 29. React Native AlignItems alignItems is used to align the child with the cross axis of its parent container. Similar to justifyContent that aligns with the main axis, this property will align the children with the cross axis. Let’s take some examples. alignItems: ‘flex-start’ container: { flex: 1, flexDirection: 'row', justifyContent: flex-start', alignItems: flex-start, backgroundColor: '#454545', },
- 30. Output Below are thescreenshots of each of these values. alignItems: ‘flex-end’
- 31. alignItems: ‘center’ So, thiswas understanding and implementing the Flexbox layout in React Native. I hope the purpose of the tutorial was served as you expected.
- 32.
- 33. If you wishto clone the repository and play around with the code. Here’s the github repo: flexbox-layout-demo. If you want to practice more with an online game interface, then you can play the game flexbox froggy.
- 34.
- 35. Flexbox is easyto maintain and understand; once you have understood its concept, you would love to work with it. If you have any queries, suggestions, or feedback, write us back. Also, feel free to suggest topics if you want us to write a tutorial on them. Keep learning!
- 36.