Understanding Flexbox in React Native | by Navdeep Singh Bedi

The struggle is realMastering these simple Flexbox recipes will make you a React Native UI master in no timeGetting StartedLets start with a simple example. A container View component with three Text components.//Our views 1 2 3 //Styleslet styles = StyleSheet.create({container: { backgroundColor:’#4286f4'},viewStyleOne: {width:40,height:40,justifyContent: ‘center’,alignItems:’center’, backgroundColor:’#b642f4'},textStyle:{textAlign:’center’}})Which renders as so:Initial ViewNow we add flex:1 to the container:container: { backgroundColor:’#4286f4', flex: 1 }This makes container fill its parent, i.e. whole screen.flex : 1Now we add:container: { backgroundColor:’#4286f4', flex: 1,flexDirection:’row’}Each view’s flexDirection is set to colum by default but setting it to ‘row’ will change the orientation of the items in the container.flexDirection set to ‘row’Now we can control the orientation of the content using flexDirection.Now lets add justifyContent and alignItems :container:{ backgroundColor:’#4286f4', flex: 1, flexDirection: ‘row’,justifyContent: ‘flex-end’,alignItems:’flex-start’}justifyContent: ‘flex-end’Similarly for:container: { backgroundColor:’#4286f4', flex: 1, flexDirection: ‘row’,justifyContent: ‘flex-end’,alignItems:’flex-end’}Views will render like:alignItems:’flex-end’flexDirection determines the primary axis as ‘row’ or ‘column’.justifyContent determines distribution of children along primary axis.alignItems

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The dev.to project with GatsbyJS-10

What I wish I knew when I started to work with React Native — Part 1

Build your own Instagram using React Native

Tech: Angular Component Alert - Date Range Picker

Building reason-react with parcel-bundler

10 Basic ReactJS Things

JavaScript development strategies for 2022

Top 8 Tools for Debugging React Native Applications!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Digital Marketing

Digital Marketing

More from Medium

Multi-threading in JS, and what you can do with it!

Custom Pagination in React using ReactPaginate

Amplify Bulk Data create, update & migration

cs371p Spring 2022 Week 3: Badr Belhiti