futurescope[@]zoho[.]com
FUTURECOPE
Facebook
Twitter
Google+
Vimeo
Behance
Instagram
SoundCloud
RSS
Tech Talkies-FUTURESCOPE
  • HOME
  • BUZZWORTHY
    • Gadgets
    • Gear
    • Appliance
    • Smartphone
  • SCI-TECH
    • Apps & Software
    • Artificial Intelligence (AI)
    • Programming
    • Science
    • Web Technology
  • LIFEHACKS
  • Game
  • TECHBUZZ
  • CRYPTO
  • BUSINESS
  • BLOG
FLEXBOX

How To Create Responsive Layouts In React Native

January 28, 2020ProgrammingNo CommentsEditor Futurescope

Discover The Article

  • 1 1. First of all, FLEXBOX
  • 2 2. Aspect Ratio
  • 3 3. Screen Dimensions
  • 4 4. Detect the Platform
    • 4.1 Donate Bitcoin to Editor Futurescope
    • 4.2 Donate Bitcoin Cash to Editor Futurescope
    • 4.3 Donate Ethereum to Editor Futurescope
    • 4.4 Donate Litecoin to Editor Futurescope
    • 4.5 Donate Monero to Editor Futurescope
    • 4.6 Donate ZCash to Editor Futurescope

Last Updated on January 28, 2020 by Editor Futurescope

This article was originally published on Miquido.com on Oct. 10, 2019.

Native Apps developers always put a lot of effort into making beautiful apps with a rich UI and which are stable on every supported device. For iOS, this means just a few devices. For Android it could be over a dozen. When you code an app with React Native you can add up these numbers and then multiply it by two, since every device can be rotated. In this short article I’ll try to show you a few tools and tricks which can help you deal with the huge range of devices without going crazy!

1. First of all, FLEXBOX

Components can control layout with a flexbox algorithm. It’s created to keep the proportions and consistency of the layout on different screen sizes.

Flexbox works very similar to CSS on the Web with just a few exceptions which are really easy to learn. When flex prop is a positive number, then components become flexible and will adjust to the screen respective to its flex value. That means that flex equates to flexGrow: [number], flexShrink: 1, flexBasis: 0.

When flex: 0 — it’s sized accordingly to the height and width and is inflexible.
If flex is a negative number it also uses height and width but if there is not enough space it will shrink to its minHeight and minWidth.

There are few main properties provided by flexbox, so let’s get through them!
Flex describes how elements divide space between them. As mentioned above it’s limited to single numbers.

If all elements have flex: 1 they will have the same width.
In other cases they will split the sum of the flex among themselves

Flex direction — we can pick a row or a column (you can also set the reverse) to set your main axis along which your content will be placed. By default flexDirection is set to a column instead of row — which is caused by the nature of the screen on mobile devices.

justifyContent — this prop helps you to position content inside a container along the main axis. You can check few possible placements below:

Align Items — it works the same as justifyContent but align items on the perpendicular axis to the main axis.

Flex prop do a really good job of keeping proportions between elements. Regardless of screen size. FlexDirection and justifyContent keep layout behaviour consistent.

There are many more flexbox props. I touched just a few to show how they can be helpful.

Top of Form

Bottom of Form

2. Aspect Ratio

Another cool prop is aspect ratio (it’s available only in React Native) which helps keep proportions of your elements under control. If you know only one dimension of your element (width or height), it keeps the second dimension in relation to the one you already know.

3. Screen Dimensions

It is great when your designs are the same for both platforms, and all types of devices (mobile, tablets, ipads). However, sometimes we have to deal with different layouts for specific screen dimensions or device types.

By default React Native doesn’t provide properties which clearly answer which device or what screen size is. But there is a remedy for this.

To find out what the screen dimensions are we can use Dimensions API.

import { Dimensions } from ‘react-native’;

const {width, height} = Dimensions.get(‘window’);

Since React Native 0.61 you can also use a hook.

const {width, height} = useWindowDimensions();

Once we obtain the width from supported range screen sizes you can pick breakpoints from which your layout can change. You can provide different styles to component or hide some parts of the screen. This is similar behaviour to media queries used in CSS.

import { Text, View, Dimensions } from ‘react-native’;

class App extends PureComponent {

  constructor(props) {

    super(props);

    this.state = {

      width: Dimensions.get(‘window’).width

    };

  }

  render() {

    return (

     <View>

       {this.state.width < 320 ? <Text>width of the past</Text> : <Text>how big is big enough?</Text>}

     </View>

    );

  }

}

4. Detect the Platform

Apart from screen size you can also change the layout depending on which platform app is launched. To achieve this we can use the Platform module.

There are many cases where it can be used:
In component render function:

 <View>

    {Platform.OS === ‘ios’ ? <Text>Hi Apple!</Text> : <Text>Hi Android!</Text>}

 </View>

In styles:

cube: {

    width: Platform.OS === ‘ios’ ? 200 : 300,

    aspectRatio: 1

  }

The Platform module provides select method which can accept any type of args. With this flexibility we can achieve the same effect as above but cleaner code:

const Logo = Platform.select({

  ios: () => require(‘Apple’),

  android: () => require(‘Android’),

})();

<Logo />;

In styles:

import {Platform, StyleSheet} from ‘react-native’;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    …Platform.select({

      ios: {

        backgroundColor: ‘red’,

      },

      android: {

        backgroundColor: ‘blue’,

      },

    }),

  },

});

5. Device Rotation

Many apps can work in portrait and landscape mode. If this is the case for your app you have to ensure that the layout doesn’t break when changing orientation. As you can expect sometimes the layout can change drastically when you flip the device.Your components may need different styling depending on the orientation. Unfortunately, by default rotation of the device does not trigger a rerender. That’s why it has to be handled manually. We already have the knowledge required to build our own and it’s quite easy!

class RotateComponent extends PureComponent {

  constructor(props) {

    super(props);

    this.state = {

      orientation: ”

    };

  }

  getOrientation = () => {

    if (Dimensions.get(‘window’).width < Dimensions.get(‘window’).height) {

      this.setState({ orientation: ‘portrait’ });

    } else { this.setState({ orientation: ‘landscape’ }); }

  };

  componentDidMount() {

    Dimensions.addEventListener(‘change’, this.getOrientation);

  }

  render() {

    return (

      <Text>{this.state.orientation}</Text>

    );

  }

}

If you need to support orientation change across the app, it’s a good idea to use HOC to inject orientation.

const HOC = WrappedComponent => class extends PureComponent { constructor(props) { super(props); this.state = { orientation: ” }; } componentDidMount() { Dimensions.addEventListener(‘change’, this.getOrientation); } getOrientation = () => { if (Dimensions.get(‘window’).width < Dimensions.get(‘window’).height) { this.setState({ orientation: ‘portrait’ }); } else { this.setState({ orientation: ‘landscape’ }); } }; render() { return; } };

That’s all! You can also pass getOrientation to onLayout prop exposed by View component. It is fired on every layout change, so it should be used carefully. The decision is yours!

If you want to take advantage of the orientation in your styles, remember that it should be inline styles. We already know how to trigger a rerender of the layout when the device is rotated, but the styles are loaded only once. That’s why styles which affect the layout on rotation should be placed inline.

As you might expect, a huge React Native community already provides packages which solve many of the issues mentioned here. You can check it here or here to name just a few.

This article was originally published on Miquido.com on Oct. 10, 2019.

Did you like this?
Tip Editor Futurescope with Cryptocurrency
  • Bitcoin
  • Ethereum
  • Litecoin
  • Monero

Donate Bitcoin to Editor Futurescope

Scan to Donate Bitcoin to Editor Futurescope
Scan the QR code or copy the address below into your wallet to send some bitcoin:
Donate via Installed Wallet
[X] Click Here to Hide Donation Details

Donate Bitcoin Cash to Editor Futurescope

Scan to Donate Bitcoin Cash to Editor Futurescope
Scan the QR code or copy the address below into your wallet to send bitcoin:
Donate via Installed Wallet
[X] Click Here to Hide Donation Details

Donate Ethereum to Editor Futurescope

Scan to Donate Ethereum to Editor Futurescope
Scan the QR code or copy the address below into your wallet to send some Ether:
Donate via Installed Wallet
[X] Click Here to Hide Donation Details

Donate Litecoin to Editor Futurescope

Scan to Donate Litecoin to Editor Futurescope
Scan the QR code or copy the address below into your wallet to send some Litecoin:
Donate via Installed Wallet
[X] Click Here to Hide Donation Details

Donate Monero to Editor Futurescope

Scan to Donate Monero to Editor Futurescope
Scan the QR code or copy the address below into your wallet to send some Monero:
Donate via Installed Wallet
[X] Click Here to Hide Donation Details

Donate ZCash to Editor Futurescope

Scan to Donate ZCash to Editor Futurescope
Scan the QR code or copy the address below into your wallet to send some ZCash:
[X] Click Here to Hide Donation Details
Editor Futurescope
https://www.futurescope.co
Founding writer of Futurescope. Nascent futures, foresight, future emerging technology, high-tech and amazing visions of the future change our world. The Future is closer than you think!
Previous post Top 7+ Tips to Improve Enterprise Security Next post AceStream Channels Working Links Anyone Can Access still in 2021

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

thirteen + eight =

Search futurescope.co

Exchange Cryptocurrency

Exchange Cryptocurrency at The Best Rate

Recent Posts

  • What is CCXProcess.exe? Is it Safe or a Virus?

    What is CCXProcess.exe? Is it Safe or a Virus?If you're a regular user of Adobe, chances are high that you may have encountered CCXProcess.exe at some point in… Read more…

  • Games like Corruption of Champions! You Can’t Miss the Corruption of Champions Alternatives

    Games like Corruption of ChampionsCorruption of Champions is an erotic fantasy text-based game that has left many gamers on the edge of their seats… Read more…

  • What Is Embedded System And How Does It Work?

    What Is Embedded System And How Does It Work_Embedded systems are everywhere. Surprisingly many people use embedded systems in their day-to-day lives but are not aware of what… Read more…

  • Best Method for Creating Custom Google Maps

    Method for Creating Custom Google MapsIf you want to create a custom Google map, you have several options. To begin with, you can use Google… Read more…

  • What Is The Best DS Emulator For Android?

    What is the best DS emulator for Android?Do you miss playing your classic favorite Nintendo DS games like Pokémon, Mario, The Legend of Zelda, and many more?… Read more…

FUTURESCOPE

Love to talk about near future that change our life and way of thinking. We always bit curious what’s going to change in science & technology. We look for them, analysis them, finally shared with tech lovers that enhance your lifestyle and we hope - give you a giggle too. Sincerely thank you for with us and please bookmark, share & follow with our way!

Address

160 Crocus DR Ontario, M1R4T1, Canada

Donations are always appreciated!

BTC Wallet: 1DCtDekZkSTtpioeUCPtUpX3LgYDXBjV4B

Ether Wallet: 0xf735E39A5c803014E731bdC297D38E36C5ba3FAD

Helping Us by Helping You!

The major help is when you use any of our promoted links when you buy anything. It costs you nothing.

These places always have the competitive prices, which we recommend them all personally.

If you’ve gotten your chosen gear/gadgets or anything through one of our links. It’s great people like you who allow me to keep adding more information to this site full-time.

HomeAboutPrivacy PolicySitemapContact
© 2020. FUTURESCOPE is brought to you by DotSurfer publishing family.