Introducing Flexbox

Flexbox is an elegant layout tool in CSS3. It helps you divide space into columns & rows in your user interface.

Open src/views/Home.js and put this into it:

// src/views/Home.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { withNavigation } from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
      return (
        <View style={styles.row}>
            <View style={styles.col}>
              <Text>Product here</Text>
            </View>
        </View>
      );
    }
}

const styles = StyleSheet.create({
  row: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
  },
  col: {
      flex: 1,
  },
});

export default withNavigation(HomeScreen);

We created a new style object similar to CSS StyleSheets. And define the direction of the main axis row.

React Native Elements

React Native Elements provide all-in-one UI kit for creating apps in react native: cards, button, pricing, etc.

Let’s create a new component: Product which is basically a Cardcomponent described here.

// src/components/Product.js
import React from 'react';
import { Text, StyleSheet } from 'react-native';
import { Card, Button } from 'react-native-elements';
import { withNavigation } from 'react-navigation';

class Product extends React.Component {
    render() {
      return (
        <Card
            image={{uri: 'https://vader-prod.s3.amazonaws.com/1543958419-810KAtkwn6L.jpg'}}>
            <Text style={{marginBottom: 10, marginTop: 20 }} h2>
                Kid shoes
            </Text>
            <Text style={styles.price} h4>
                $ 200
            </Text>
            <Text h6 style={styles.description}>
                added 2h ago
            </Text>
            <Button
            type="clear"
            title='Buy now'
            onPress={() => this.props.navigation.navigate('Details')} />
        </Card>
      );
    }
}

const styles = StyleSheet.create({
    name: {
        color: '#5a647d',
        fontWeight: 'bold',
        fontSize: 30
    },
    price: {
        fontWeight: 'bold',
        marginBottom: 10
    },
    description: {
        fontSize: 10,
        color: '#c1c4cd'
    }
});

export default withNavigation(Product);

Let’s use this component in src/views/Home.js:

// src/views/Home.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { withNavigation } from 'react-navigation';
import Product from '../components/Product';

class HomeScreen extends React.Component {
    render() {
      return (
        <View style={styles.row}>
            <View style={styles.col}>
              <Product/>
            </View>
        </View>
      );
    }
}

const styles = StyleSheet.create({
  row: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
  },
  col: {
      flex: 1,
  },
});

export default withNavigation(HomeScreen);

Tada!

E-Commerce App with React Native

Chapter 2 of 2Next