In this article, we learn about react-native styling view, flex dimensions, flexbox layout and how to use these using these components you can design awesome UI. All components in react-native accept common props called style
React native view
In react native all components must be displayed inside View, without view we can not render components on the screen
<View> <Text>Hello world</Text> </View>
This is not gone be displayed until you set height and width to parent View
You can stylesheet to text as well as View as follows
export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started, edit App.js </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, });
flex: 1 will expand the view and fill all available space make sure its parent dimension is greater than 0, otherwise it won’t be work to avoid this you must set height, width or flex to parent view if you don’t set height, width or flex to view it will be considered as 0
we can set height and width dynamically with respect to window
const Dimensions = require('Dimensions'); const window = Dimensions.get('window'); var height = (window.height ) / 2; var width = (window.width) / 2;
now you can add your own logic using these height and width i suggest you to make another file for style called Style.js and make new directory under root folder called CSS and keep this Style.js in CSS folder so that you can access it globally
Code for Style.js
import { StyleSheet } from 'react-native'; const Dimensions = require('Dimensions'); const window = Dimensions.get('window'); var height = (window.height ) / 2; var width = (window.width) * 0.85; export default StyleSheet.create({ container: { // flex: 1, height: height, width: width, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', } });
Now just import this Style.js like below
import Styles from '../css/Styles';
Usage you can add style from here also
<View style={Styles.container,{margin: 5}}>
Flex Dimensions
To know more about Flex dimensions please check this react-native official website click here
Flexbox
It provide consistent layout on different screen sizes, that’s why it is very useful
export default class App extends Component<Props> { render() { return ( <View style={{flex: 1, flexDirection: 'row',flexWrap: 'wrap'}}> <View style={{width: 150, height: 150, backgroundColor: '#6f8233'}} /> <View style={{width: 150, height: 150, backgroundColor: '#94ae44'}} /> <View style={{width: 150, height: 150, backgroundColor: '#bada55'}} /> </View> ); } }
If we remove flexWrap: ‘wrap’ from style then have to add horizontal scroll view like below
export default class App extends Component<Props> { render() { return ( <ScrollView horizontal={true}> <View style={{flex: 1, flexDirection: 'row'}}> <View style={{width: 150, height: 150, backgroundColor: '#6f8233'}} /> <View style={{width: 150, height: 150, backgroundColor: '#94ae44'}} /> <View style={{width: 150, height: 150, backgroundColor: '#bada55'}} /> </View> </ScrollView> ); } }
When we remove height width and add flex: 1 then
render() { return ( <View style={{flex: 1, flexDirection: 'row',flexWrap: 'wrap'}}> <View style={{flex: 1, backgroundColor: '#6f8233'}} /> <View style={{flex: 1, backgroundColor: '#94ae44'}} /> <View style={{flex: 1, backgroundColor: '#bada55'}} /> </View> ); }
Let’s change flexDirection: ‘column’ see the result
Now, we can render this view inside a loop to display dynamic data don’t need to create Adapter for displaying list just put view inside a loop like below
var names = ['Jasmin', 'Jhon', 'Robart']; return ( <View style={{flex: 1, flexDirection: 'column',flexWrap: 'wrap'}}> {names.map(function(name, index){ return <View key={ index }><Text style={welcome}>{name}</Text></View>; })} </View> );
This is how we can render dynamic data
Thank you 🙂 enjoy coding…
Awsome site! I am loving it!! Will be back later to read some more. I am taking your feeds also
Thanks a lot 🙂