Projeto Portfólio Layout - Aplicação Mobile React Native

Aplicação Front-end Mobile desenvolvida em React Native com o design Flexbox, para layout de portfólio de Loja de Vestuário feminino e empresas de diversos segmentos, permitindo a visualização dos demais itens ao rolar a tela do app (ScrollView).

🚀 Tecnologias

Components
StatusBar
Platform
ScrollView
States
Dimensions
react-native-vector-icons
StyleSheet

▶️ Start

npm install
npm run start / npm start

👊 Como contribuir

Dê um fork nesse repositório
Crie a sua branch com a feature

git checkout -b my-feature

Commit a sua contribuição

git commit -m 'feat: My feature'

Push a sua branch

git push origin my-feature

📣 ⬇ Abaixo, as principais estruturas e interface principal:

src/index.js

import React from 'react';
import { View, StatusBar, ScrollView } from 'react-native';

import './config/ReactotronConfig';
import Header from './components/Header';
import SubHeader from './components/SubHeader';
import ProductList from './components/ProductList';
import Tabs from './components/Tabs';
import styles from '~/geral';

const App = () => (
  <>
    <StatusBar
      barStyle="dark-content"
      translucent
      backgroundColor="transparent"
    />

    <View style={ styles.container }>
      <Header />
      <ScrollView>
        <SubHeader />
        <ProductList />
      </ScrollView>
      <Tabs />
    </View>
  </>
);

export default console.tron.overlay(App);

src/components/ProductList/Product/index.js

import React from 'react';
import { View, Image, Text } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';

import styles from './styles';

const Product = ({
  product:
  {
    image,
    title,
    description,
    price
  }
}) => (
  <View style={ styles.container }>
    <Icon name="ios-checkmark-circle-outline"
      size={26}
      style={ styles.checkIcon } />
    <View style={ styles.imageContainer }>
      <Image
        source={{ uri: image }}
        style={ styles.image }
      />
    </View>

    <View style={ styles.infoContainer }>
      <Text style={ styles.title }>{ title }</Text>
      <Text style={ styles.description }>{ description }</Text>
      <Text style={ styles.price }>{ price }</Text>
    </View>
  </View>
);

export default Product;

src/components/ProductList/index.js

import React, { Component } from 'react';
import { View } from 'react-native';

import Product from './Product';
import styles from './styles';

export default class index extends Component {
  state = {
    products: [
      {
        id: 1,
        image: 'https://live.staticflickr.com/5542/9337583623_7e3dcc1072_c.jpg',
        title: 'Vestido Andrea pink flamingos',
        description: 'Andrea Accessori di abbigliamento pink flamingos',
        price: 'R$140,00'
      },
      {
        id: 2,
        image: 'https://live.staticflickr.com/5443/9551762710_4498b5e9ed_c.jpg',
        title: 'Vestido Perón black sky',
        description: 'Perón Studios El Caribe black sky',
        price: 'R$160,00'
      },
      {
        id: 3,
        image: 'https://live.staticflickr.com/3730/9339533933_d944303fb6_c.jpg',
        title: 'Vestido longo Andrea blue',
        description: 'Andrea Accessori di abbigliamento blue river',
        price: 'R$200,00'
      },
      {
        id: 4,
        image: 'https://live.staticflickr.com/3684/9339500607_bbc39f8bd5_c.jpg',
        title: 'Vestido longo Andrea wine',
        description: 'Andrea Accessori di abbigliamento wine tango',
        price: 'R$220,00'
      }
    ],
  };

  render() {
    return (
      <View style={ styles.container }>
        {this.state.products.map(product =>
          <Product
            key={ product.id }
            product={ product }
          />
        )}
      </View>
    );
  }
};

RenanBorba/react-native-layout