Hello Readers, CoolMonkTechie heartily welcomes you in this article (How To Translate A Design To A Flexible React Native App ?).
In this article, We will learn how to translate a design to a flexible React Native application. React Native is one of many cross-platform frameworks that assist a developer in creating an app that utilises native UI and has a high level of code reuse between platforms. It accomplishes this by acting as a renderer on both iOS and Android for the React framework, which itself has the advantage of allowing web developers to get started in the world of mobile development using familiar concepts. We will discuss the ability to take a static design from a designer and turn it into React native code.
A famous quote about learning is :
” One learns from books and example only that certain things can be done. Actual learning requires that you do those things. “
So Let’s begin.
The Layout System
React Native utilises a very web-like layout system, making heavy use of Flexbox to control the flow and sizing of individual elements on-screen. This gives a head-start to web developers as they already conceptually understand the Flexbox system, however it is totally new to native mobile developers who may be used to visually creating screen layouts in iOS Storyboards or working with XML in Android Layout files.
A component can specify the layout of its children using the Flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes. We will normally use a combination of flexDirection, alignItems, and justifyContent to achieve the right layout.
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row, and the flex parameter only supporting a single number.
Design to Code
An important skill to have when developing a cross-platform application is the ability to take a static design from a designer and turn it into code, ensuring that it will adapt correctly to any supported screen size. Typically, this is done by focusing on margins/paddings rather than widths and heights, unless of course a component should have a set width or height, such as a title bar or a button. For example, we envisioned a simple feed item from a social app.
The first step of converting the above design to code is to break it down into its component parts. We infer which elements align with which other elements and which parts should expand to fit either content or container. For example, when we break the design down into Flexbox rows (blue outline) and columns (green outline). Now let’s split these parts out into individual components so that we can define their behaviour more easily, starting with the lowest level components.
1. TitleTextContainer
This is a column view that contains two Text elements. It should match the height of the container it will be put into (in this case, a row with the user image) so we don’t need to add any height values to it. As for the text, it needs to float in the vertical centre of the container and be pinned to the horizontal start. This will be relatively simple:
TitleTextContainer.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class TitleTextContainer extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Jordan Duncan</Text>
<Text style={styles.subtitle}>2 hours ago</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
color: '#000'
},
subtitle: {
fontSize: 14,
fontWeight: 'normal',
color: '#333'
}
});
2. ActionContainer
This is a fixed-height row view that contains two Text elements. Each element should take up half of the width of the parent, so we will use flex: 1. Again, this is a simple component:
ActionContainer.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class ActionContainer extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.textContainer}>
<Text style={styles.text}>Like</Text>
</View>
<View style={styles.textContainer}>
<Text style={styles.text}>Comment</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
backgroundColor: '#951754',
height: 40,
borderRadius: 5,
},
textContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 18,
fontWeight: 'normal',
color: '#FFF'
}
});Now we can move up a level in our design and use these components.
3. FullTitleContainer
As we have already created our TitleTextContainer view, we can ignore its internal layout and when we do that, it becomes clear that all that is necessary is a row view that contains a fixed size Image and the TitleTextContainer that will flex to fit the remainder of the FullTitleContainer:
FullTitleContainer.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import TitleTextContainer from './TitleTextContainer';
export default class FullTitleContainer extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.image} />
<TitleTextContainer />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
paddingLeft: 5,
},
image: {
height: 60,
width: 60,
borderRadius: 30,
backgroundColor: '#0099FF',
marginRight: 10,
},
});
4. PostContentContainer
Similarly to the FullTitleContainer, now that we have dealt with the ActionContainer, all we are left with is a column view that contains a dynamic height Text component and our ActionContainer. As the container will expand to fit its contents (the contents will not expand to fit the container), we do not need to apply flex values to any content:
PostContentContainer.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import ActionButtonContainer from './ActionButtonContainer';
export default class PostContentContainer extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>I wish there was an easy way to make cross platform layouts :(</Text>
<ActionButtonContainer />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'column',
paddingLeft: 70,
paddingBottom: 10,
paddingRight: 10,
},
text: {
fontSize: 18,
fontWeight: 'normal',
color: '#000',
marginVertical: 10,
paddingBottom: 10,
},
});One thing to note here is that we have added a paddingLeft of 70 (image width 60 + padding 10) to the container. This is in order to bring it in line with the title text when we add it to the main component.
5. Putting it all together
Now that we have produced all the component parts, it is clear that the full component just consists of a column view that contains the FullTitleContainer and the PostContentContainer.
App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';
import FullTitleContainer from './FullTitleContainer';
import PostContentContainer from './PostContentContainer';
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Card>
<FullTitleContainer />
<PostContentContainer />
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#EEE',
padding: 20,
margin: 20,
},
});As we can see, it only requires an understanding of Flexbox to allow us to create a flexible, cross-platform layout that will look and perform great on a range of different devices.
That’s all about in this article.
Conclusion
In this article, We understood how to translate a design to a flexible React Native application.
Thanks for reading ! I hope you enjoyed and learned about translate a design To a flexible React Native app. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
You can also follow official website and tutorials of React Native as below links :
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING !!???
