<|start_filename|>src/pages/QRCode/styles.js<|end_filename|>
import styled from "styled-components/native";
import { colors } from "~/styles";

export const Container = styled.View`
  flex: 1;
  background: ${colors.background};
  padding-left: 30px;
  padding-right: 30px;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
`;

export const Text = styled.Text`
  margin-right: 7px;
  color: #707070;
  font-size: 18px;
  font-family: 'Poppins';
`;

export const Photo = styled.Image`
  width: 274px;
  height: 276px;
  margin-top: -29px;
`;

<|start_filename|>src/services/api.js<|end_filename|>
import HTTPClient from './http';
import qs from 'qs';

export async function startAuthentication(bankId) {
	try {
		const config = {
			method: 'get',
			url: `/startAuthentication/${bankId}`,
			headers: {},
		};

		const response = await HTTPClient(config);
		return response.data;
	} catch (error) {
		console.error(error);
	}
}

export async function bicosGet(idOrType) {
	try {
		const config = {
			method: 'get',
			url: `/bicos/${idOrType}`,
			headers: {},
		};

		const response = await HTTPClient(config);
		return response.data;
	} catch (error) {
		console.error(error);
	}
}

export async function peddingBicosGet(userId) {
	try {
		const config = {
			method: 'get',
			url: `/pedding/bico/${userId}`,
			headers: {}
		};

		const response = await HTTPClient(config);
		return response.data;
	} catch (error) {
		console.error(error);
	}
}

export async function transactionsGet(id) {
	try {
		const config = {
			method: 'get',
			url: `/transactions/get/${id}`,
			headers: {}
		};

		const response = await HTTPClient(config);
		return response.data;
	} catch (error) {
		console.error(error);
	}
}

export async function bicoDone(id) {
	try {
		const config = {
			method: 'get',
			url: `/done/bico/${id}`,
			headers: {}
		};

		const response = await HTTPClient(config);
		return response.data;
	} catch (error) {
		console.error(error);
	}
}

export async function bicosAdd(name, photo, description, type) {
	try {
		const data = qs.stringify({
			'name': name,
			'photo': photo,
			'description': description,
			'type': type
		 })

		const config = {
			method: 'post',
			url: `/bicos/add`,
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data
		}

		const response = await HTTPClient(config);
		return response.data;
	} catch (error) {
		console.error(error);
	}
}

export async function creditDone(id, amount) {
	try {
		const data = qs.stringify({
			amount,
			date: '26/07/2020',
			name: 'Crédito'
		 })

		const config = {
			method: 'post',
			url: `/transactions/add/${id}`,
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data
		}

		const response = await HTTPClient(config);
		return response.data;
	} catch (error) { 
		console.error(error);
	}
}

<|start_filename|>src/pages/BicoInfo/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import CardInfoBico from '~/components/CardInfoBico'
import {navigate} from '~/services/navigator'
import {bicosGet} from '~/services/api';
import {Container, ScrollContainer} from './styles';
import ClientHeader from "~/components/ClientHeader";

const BicoInfo = ({route}) => {
  const id = route.params.id

  const [bico, changeBico] = React.useState({title: 'Carregando...'});

  const loadApi = () => {
    bicosGet(id).then(bicosData => {
      console.log(bicosData)
      changeBico(bicosData.list[0])
    })
  }

  React.useEffect(loadApi, []);

  return (
    <MainContainer>
      <ClientHeader />
      <ScrollContainer>
        <Container>
          <CardInfoBico
            title={bico.name}
            subtitle={bico.type}
            photo={bico.photo}
            description={bico.description}
          />
        </Container>
      </ScrollContainer>
    </MainContainer>
  );
};

BicoInfo.propTypes = {};

export default BicoInfo;


<|start_filename|>src/pages/SelectBank/styles.js<|end_filename|>
import styled from 'styled-components/native';
import {colors, ScrollContainer as ScrollContainerComponent} from '~/styles';

export const Container = styled.View`
  background: ${colors.background};
  flex: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
`;

export const ScrollContainer = styled(ScrollContainerComponent).attrs({
  contentContainerStyle: {
    flexGrow: 1,
    justifyContent: 'center',
    flexDirection: 'column',
  },
})`
  padding-left: 20px;
  padding-right: 20px;
`;

export const Title = styled.Text`
  font-family: 'Roboto';
  font-size: 29px;
  font-weight: 700;
  margin-left: 64px;
  color: ${colors.textDark};
`;

export const Description = styled.Text`
  font-family: 'Roboto';
  font-size: 15px;
  margin-bottom: 12px;
  margin-left: 64px;
  font-weight: 500;
  color: ${colors.textDark};
`;


<|start_filename|>src/components/OptionsCarrosel/index.js<|end_filename|>
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, FlatList} from 'react-native';
import {navigate} from '~/services/navigator';

// import { Container } from './styles';

const OptionsCarrosel = (props) => {
  const options = [
    {
      id: 0,
      buttonColor: '#F2B84B',
      optionName: 'SAQUE',
      optionDescriton: 'Saque seu dinheiro',
      onPress: () => {navigate('WithdrawMoney')}
    },
    {
      id: 1,
      buttonColor: '#D9483B',
      optionName: 'CRÉDITO',
      optionDescriton: 'Solicitar Microcrédito',
      onPress: () => {navigate('RequestCredit')}
    },
    {
      id: 4,
      buttonColor: '#5BD9D9',
      optionName: 'PAGAR',
      optionDescriton: 'Efetuar Pagamento',
      onPress: () => {}
    },
  ];

  return (
    <View >
      <FlatList
        horizontal={true}
        style={styles.horizontalList}
        data={options}
        renderItem={({item}) => (
          <TouchableOpacity
            key={item.buttonColor}
            onPress={item.onPress}
            style={[styles.goButton, {backgroundColor: item.buttonColor}]}>
            <Text style={styles.optionText}>{item.optionName}</Text>
            <Text style={styles.descritonText}>{item.optionDescriton}</Text>
          </TouchableOpacity>
        )}
        scrollEnabled={true}
        showsHorizontalScrollIndicator={false}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  goButton: {
    width: 100,
    height: 100,
    borderRadius: 50 / 2,
    //   borderWidth: 0.5,
    //   borderColor: "#fff",
    shadowColor: '#000',
    shadowOpacity: 0.2,
    shadowOffset: {
      width: 4,
      height: 4,
    },
    elevation: 2,
    // position: "absolute",
    alignItems: 'center',
    alignSelf: 'center',
    justifyContent: 'center',
    marginLeft: 10,
  },
  horizontalList: {
    flex: 1,
    bottom: 1,
  },
  descritonText: {
    fontSize: 14,
    color: '#fff',
    textAlign: 'center',
    paddingHorizontal: 2,
    paddingTop: 5,
  },
  optionText: {fontSize: 16, color: '#fff', fontWeight: 'bold'},
});

export default OptionsCarrosel;


<|start_filename|>src/pages/HomePrestador/styles.js<|end_filename|>
import styled from 'styled-components/native';
import {colors, ScrollContainer as ScrollContainerComponent} from '~/styles';

export const Container = styled.View`
  background: ${colors.background};
  flex: 1;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
  background: #F1F1F1;
`;

export const ScrollContainer = styled(ScrollContainerComponent).attrs({
  contentContainerStyle: {
    flexGrow: 1,
    justifyContent: 'flex-start',
    flexDirection: 'column',
  },
})`
`;

export const Cards = styled.View.attrs({
  elevation: 1.5,
})`
  width: 96%;
  background: #FFF;
  border-radius: 32px;
  margin-top: 20px;
  margin-left: 11px;
  margin-right: 11px;
  padding: 13px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
`;

<|start_filename|>src/pages/SelectBank/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import ButtonText from '~/components/ButtonText'
import {navigate} from '~/services/navigator'
 
import {Container, ScrollContainer, Title, Description} from './styles';

const SelectBank = ({route}) => {
  return (
    <MainContainer>
      <Container>
        <ScrollContainer>
          <Title>Qual seu banco?</Title>
          <Description>Selecione o seu banco.</Description>

          <ButtonText text='Banco 01' onPress={() => {navigate('Login', {type: route.params.type, bank: '1'})}} style={{marginBottom: 5}} backgroundColor='#F2B84B' />

          <ButtonText text='Banco 02' backgroundColor='#F2B84B' onPress={() => {navigate('Login', {type: route.params.type, bank: '2'})}} style={{marginBottom: 5}} />

          <ButtonText text='Criar banco rápido & Sem complicação' onPress={() => {navigate('Login', {type: route.params.type, bank: '1'})}} backgroundColor='#F2B84B' />
        </ScrollContainer>
      </Container>
    </MainContainer>
  );
};

SelectBank.propTypes = {};

export default SelectBank;


<|start_filename|>src/pages/BicosList/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import {bicosGet} from '~/services/api';
import {navigate} from '~/services/navigator'
import CardProfileBico from '~/components/CardProfileBico'
import ClientHeader from "~/components/ClientHeader";

import {Container, ScrollContainer} from './styles';

const BicosList = () => {
  const [bicos, changeBicos] = React.useState([]);

  const loadApi = () => {
    bicosGet('all').then(bicosData => {
      console.log(bicosData)
      changeBicos(bicosData.list)
    })
  }

  React.useEffect(loadApi, []);

  return (
    <MainContainer>
      <ClientHeader />
      <ScrollContainer>
        <Container>
          {bicos.map(bico =>
            <CardProfileBico
              key={bico.id}
              title={bico.name}
              subtitle={bico.type}
              photo={bico.photo}
              onPress={() => {navigate('BicoInfo', {id: bico.id})}}
            />
          )}
        </Container>
      </ScrollContainer>
    </MainContainer>
  );
};

BicosList.propTypes = {};

export default BicosList;


<|start_filename|>src/pages/BicoPayDone/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import {bicoDone} from '~/services/api';
import {Container, Title, Description, Circle, Icon} from './styles';
import {useNavigation} from '@react-navigation/native';
import ButtonText from '~/components/ButtonText'

const BicoPayDone = () => {
  const navigation = useNavigation();

  const loadApi = () => {
    // donePay('22d2d333d2-5a47-40ff-8419-10a5fd379d07')
  }

  React.useEffect(loadApi, []);

  return (
    <MainContainer>
      <Container>
          <Circle>
            <Icon name='check-bold' />
          </Circle>
          <Title>BICO SOLICITADO!</Title>
          <Description>Pagamento efetuado!</Description>
          <ButtonText text='Entendi' onPress={() => {navigation.replace('BicoList')}} backgroundColor='#D9483B' />
      </Container>
    </MainContainer>
  );
};

BicoPayDone.propTypes = {};

export default BicoPayDone;


<|start_filename|>src/services/navigator.js<|end_filename|>
/* eslint-disable no-unused-expressions */

import React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params, {
    key: Math.random().toString(),
  });
}

export function reset(routes) {
  navigationRef.current?.reset(routes);
}

export function goBack() {
  navigationRef.current?.goBack();
}


<|start_filename|>src/styles/colors.js<|end_filename|>
export default {
  background: '#F2F2F2',
  statusBar: '#000',
  textLight: '#FFFFFF',
  textDark: '#000000',
  textGrey: '#707070',
  textWhite: '#fff',
  textMono: '#707070',
  buttonPrimary: '#F2B84B',
  buttonSecundary: '#F24141',
  buttonInfo: '#4b299a',
  buttonText: '#FFFFFF',
  colorPimary: '#5BD9D9',
  colorSecundary: '#D9483B',
  colorTertiary: '#521fc7',
  textMono: '#393838DE',
  textGrey: '#707070',
  textWhite: '#fff',
  buttonBackground: '#76e497',
  colorBlue: '#5BD9D9',
  colorYellow: '#F2B84B',
  colorRed: '#D9483B',
  colorRedLight: '#F24141',
  colorWhite: '#F2F2F2'
};


<|start_filename|>src/pages/QRCode/index.js<|end_filename|>
import React from "react";

import ButtonText from '~/components/ButtonText'

import {
  Container,
  Text,
  Photo
} from "./styles";

const QRCode = () => {
  const code = 'https://github.com/thauska/desafio-tecban'
  return (
    <Container>
      <Text>Certo! Agora você só precisa ir ao ATM mais próximo e scanear esse QRCODE</Text>
      <Photo source={{
          uri: 'https://www.qrtag.net/api/qr_6.png?url=' + code
      }} />
      <ButtonText text='Procurar Caixas Próximos' onPress={() => {}} backgroundColor='#D9483B' />
    </Container>
  );
};

export default QRCode;


<|start_filename|>src/components/ButtonInterface/styles.js<|end_filename|>
import styled from 'styled-components/native';
import {colors} from '~/styles';

export const Btn = styled.TouchableOpacity`
    background: ${(prop) => prop.backgroundColor || colors.buttonPrimary};
    alignItems: center;
    justifyContent: center;
    border-radius: 10px;
`;

export const Text = styled.Text`
    color: ${props => props.color ? colors.buttonText : colors.textDark};
    font-weight: 700;
    align-self: center;
    padding: 10px;
`;

<|start_filename|>src/components/CardProfileBico/styles.js<|end_filename|>
import styled from 'styled-components/native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {colors} from '~/styles';


export const Card = styled.TouchableOpacity.attrs({
  elevation: 1.5,
})`
  background: #FFF;
  width: 97%;
  border-radius: 32px;
  margin-top: 12px;
  margin-left: 6px;
  margin-right: 6px;
  padding: 15px;
  flex-direction: row;
  align-items: flex-start;
`;

export const Photo = styled.Image`
  width: 80px;
  height: 80px;
  border-radius: 32px;
  margin-right: 15px;
`;

export const DescriptionView = styled.View`
  flex: 1;
  padding-right: 12px;
`;

export const Title = styled.Text`
  margin-top: 4px;
  color: #707070;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: bold;
`;

export const SubTitle = styled.Text`
  color: #707070;
  margin-top: 4px;
  font-size: 14px;
  font-family: 'Poppins';
`;

export const IconView = styled.View`
  align-self: center;
  flex-direction: row;
`;

export const IconLove = styled(Icon).attrs({
  name: 'heart-outline'
})`
  color: #F24141;
  font-size: 28px;
  margin-right: 22px;
`;


export const RateView = styled.View`
  margin-top: 12px;
  flex-direction: row;
  align-items: flex-start;
`

export const IconStar = styled(Icon).attrs({
  name: 'star'
})`
  color: #F2B84B;
  font-size: 16px;
`;

export const IconStarHalf = styled(Icon).attrs({
  name: 'star-half'
})`
  color: #F2B84B;
  font-size: 16px;
`;

export const TextRate = styled.Text`
  color: #707070;
  margin-left: 4px;
  font-size: 14px;
  font-family: 'Poppins';
`;


<|start_filename|>src/pages/WithdrawMoney/styles.js<|end_filename|>
import styled from "styled-components/native";

import { ScrollContainer as ScrollComponent, colors } from "~/styles";

export const Container = styled.View`
  background: ${colors.background};
  flex: 1;
  /* align-items: center; */
  /* justify-content: center; */
  overflow: hidden;
`;

export const ScrollContainer = styled(ScrollComponent).attrs({
  flexGrow: 1,
})`
  padding-left: 30px;
  padding-right: 30px;
`;

export const Text = styled.Text`
  color: ${colors.textGrey};
  font-size: 18px;
  margin-top: 10px;
`;

export const TextInput = styled.Text`
  color: ${colors.textGrey};
  font-size: 16px;
  font-weight: 700;
  text-align: center;
`;

export const Input = styled.TextInput`
  padding: 0px;
  border-bottom-width: 2px;
  border-bottom-color: ${colors.colorRed};
  font-size: 50px;
  text-align: center;
`;

export const InputContainer = styled.View`
  margin-top: 170px;
`;

export const SubmitButton = styled.TouchableOpacity`
  position: relative;
  left: 0;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
  background: ${colors.colorRed};
  box-shadow: 3px 3px 6px #00000029;
  height: 51px;
  border-radius: 39px;
  flex-direction: row;
  margin: 20px;
`;

export const SubmitButtonText = styled.Text`
  color: ${colors.textWhite};
  font-size: 16px;
`;


<|start_filename|>src/components/ButtonText/styles.js<|end_filename|>
import styled from 'styled-components/native';
import IconMaterial from 'react-native-vector-icons/MaterialCommunityIcons';
import {colors} from '~/styles';

export const Button = styled.TouchableOpacity`
  flex-direction: row;
  background: ${(prop) => prop.backgroundColor || colors.buttonBackground};
  border-radius: 20px;
`;

export const Text = styled.Text`
  font-size: 18px;
  padding: 13px;
  color: ${(prop) => prop.textColor || colors.textLight};
  text-align: center;
  width: 100%;
  font-family: 'Poppins';
`;

export const Icon = styled(IconMaterial)`
  color: ${(prop) => prop.textColor || colors.textLight};
  font-size: 18px;
  margin-left: 16px;
`;

<|start_filename|>src/styles/index.js<|end_filename|>
import styled from 'styled-components/native';
import {StatusBar as StatusBarReact, Platform} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import colorsGlobal from './colors';

export const colors = colorsGlobal;

export const Container = styled(SafeAreaView)`
  flex: 1;
  background: ${colorsGlobal.background};
`;

export const StatusBar = styled(StatusBarReact).attrs({
  barStyle: 'light-content',
  backgroundColor: colorsGlobal.statusBar,
})``;

export const ScrollContainer = styled.ScrollView.attrs({
  vertical: true,
  showsVerticalScrollIndicator: true,
  fadingEdgeLength: 30,
  contentContainerStyle: {
    paddingBottom: 5,
  },
})`
  flex: 1;
  padding: 1px;
  background: ${colorsGlobal.background};
`;


<|start_filename|>src/pages/WithdrawMoney/index.js<|end_filename|>
import React from "react";

import {
  Container,
  ScrollContainer,
  Text,
  InputContainer,
  TextInput,
  Input,
  SubmitButton,
  SubmitButtonText,
} from "./styles";

import {navigate} from '~/services/navigator'

const WithdrawMoney = () => {
  const [money, setMoney] = React.useState("");
  return (
    <Container>
      <ScrollContainer>
        <Text>
          No BICOS você pode sacar seu dinheiro de forma rápida e prática
        </Text>
        <InputContainer>
          <TextInput>Quanto você deseja sacar?</TextInput>
          <Input
            value={money}
            onChangeText={(text) => {
              setMoney(text);
            }}
          ></Input>
        </InputContainer>
      </ScrollContainer>
      <SubmitButton>
        <SubmitButtonText onPress={() => {navigate('QRCode')}} >PRÓXIMO</SubmitButtonText>
      </SubmitButton>
    </Container>
  );
};

export default WithdrawMoney;


<|start_filename|>src/components/ProviderHeader/styles.js<|end_filename|>
import styled from 'styled-components/native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {colors} from '~/styles';


export const Container = styled.View`
    max-height: 200px;
    z-index: 5;
`;

export const MainContent = styled.View`
    background: ${(prop) => prop.backgroundColor || colors.colorRed};
    height: 90px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 20px;
    elevation: 10;
    z-index: 999;
`;

export const TextView = styled.View`
    flex: 1;
    flex-direction: column;
`;

export const Name = styled.Text`
    font-size: 20px;
    font-weight: 600;
    color: ${colors.textLight};
`;

export const Balance = styled.Text`
    color: ${colors.textLight};
    font-size: 16px;
    font-weight: 400;
`;

export const IconSearch = styled(Icon).attrs({
    name: 'magnify'
})`
    color: ${colors.textLight};
    font-size: 40px;
`;

export const InfoContent = styled.TouchableOpacity`
    background: #FFF;
    margin-top: -30px;
    height: 75px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    padding-bottom: 20px;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    elevation: 10;
`;

export const InfoText = styled.Text``;

export const Red = styled.Text`
    color: #D9483B;
    font-size: 16px;
    font-family: 'Poppins';
    font-weight: bold;
`;

export const Bold = styled.Text`
    font-size: 14px;
    font-family: 'Poppins';
    font-weight: bold;
`;

<|start_filename|>src/pages/RequestCredit/index.js<|end_filename|>
import React from "react";

import {navigate} from '~/services/navigator'

import {
  Container,
  Input,
  Text,
  TextSecundary,
  TextInput,
  FormContainer,
  Button,
  ButtonText,
} from "./styles";

const RequestCredit = () => {
  const [amount, onChangeText] = React.useState('')

  return (
    <Container>
      <Text>O BICOS te auxilia com microcrédito para os seus serviçõs:</Text>

      <FormContainer>
        <Text>De quanto você precisa?</Text>
        <Input onChangeText={onChangeText}></Input>
        <Text>Quando?</Text>
        <Input></Input>
        <Text>Justifique a sua solicitação de crédito</Text>
        <TextSecundary>
          Sua justificativa é essencial para a solicitação ser aceita
        </TextSecundary>
        <TextInput></TextInput>

        <Button>
          <ButtonText onPress={() => {navigate('CreditDone', {amount})}}>Solicitar Microcrédito</ButtonText>
        </Button>
      </FormContainer>
    </Container>
  );
};

export default RequestCredit;


<|start_filename|>src/index.js<|end_filename|>
import React from 'react';
import 'react-native-url-polyfill/auto';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {NavigationContainer} from '@react-navigation/native';
import Routes from '~/routes';
import {navigationRef} from '~/services/navigator';
import {StatusBar} from '~/styles';
import { LogBox } from 'react-native';

LogBox.ignoreLogs(['Warning: ...']);

export default function App() {
  return (
    <>
      <StatusBar />
      <SafeAreaProvider>
        <NavigationContainer ref={navigationRef}>
          <Routes />
        </NavigationContainer>
      </SafeAreaProvider>
    </>
  );
}


<|start_filename|>src/components/CardInfoBico/styles.js<|end_filename|>
import styled from 'styled-components/native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {colors} from '~/styles';


export const Card = styled.View.attrs({
  elevation: 1.5,
})`
  background: #FFF;
  flex: 1;
  width: 100%;
  border-radius: 32px;
  margin-top: 40px;
  margin-left: 9px;
  margin-right: 9px;
  margin-bottom: 27px;
  padding-bottom: 22px;
  flex-direction: column;
  align-items: center;
  padding-right: 34px;
  padding-left: 34px;
`;

export const Photo = styled.Image`
  width: 165px;
  height: 174px;
  border-radius: 32px;
  margin-top: -29px;
`;

export const DescriptionView = styled.View`
  padding-top: 13px;
  margin-bottom: 18px;
  flex-direction: row;
`;

export const Title = styled.Text`
  margin-right: 7px;
  color: #707070;
  font-size: 14px;
  font-family: 'Poppins';
  font-weight: bold;
`;

export const SubTitle = styled.Text`
  color: #707070;
  font-size: 14px;
  font-family: 'Poppins';
`;

export const Description = styled.Text`
  color: #707070;
  font-size: 14px;
  font-family: 'Poppins';
`;

export const IconView = styled.View`
  position: absolute;
  top: 39px;
  right: 28px;
`;

export const IconLove = styled(Icon).attrs({
  name: 'heart-outline'
})`
  color: #F24141;
  font-size: 28px;
  margin-right: 22px;
`;


export const RateView = styled.View`
  margin-top: 12px;
  margin-bottom: 30px;
  flex-direction: row;
  align-items: flex-start;
`

export const IconStar = styled(Icon).attrs({
  name: 'star'
})`
  color: #F2B84B;
  font-size: 16px;
`;

export const IconStarHalf = styled(Icon).attrs({
  name: 'star-half'
})`
  color: #F2B84B;
  font-size: 16px;
`;

export const TextRate = styled.Text`
  color: #707070;
  margin-left: 4px;
  font-size: 14px;
  font-family: 'Poppins';
`;


<|start_filename|>src/pages/Login/styles.js<|end_filename|>
import styled from 'styled-components/native';
import {WebView} from 'react-native-webview';
import {colors} from '~/styles';

export const Container = styled.View`
  background: ${colors.background};
  flex: 1;
  background: blue;
`;

export const Embed = styled(WebView)`
  flex: 1;
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  background: ${colors.background};
`;


<|start_filename|>src/components/CardPeddingBico/styles.js<|end_filename|>
import styled from 'styled-components/native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {colors} from '~/styles';


export const Card = styled.View.attrs({
  elevation: 1.5,
})`
  background: #FFF;
  width: 100%;
  border-radius: 32px;
  margin-top: 15px;
  margin-left: 9px;
  margin-right: 9px;
  padding-bottom: 22px;
  flex-direction: column;
  align-items: center;
  padding-right: 34px;
  padding-left: 34px;
`;


export const DescriptionView = styled.View`
  padding-top: 16px;
  margin-bottom: 4px;
  flex-direction: row;
`;

export const Title = styled.Text`
  flex: 1;
  margin-right: 7px;
  color: #707070;
  font-size: 18px;
  font-family: 'Poppins';
  font-weight: bold;
`;

export const Description = styled.Text`
  color: #707070;
  font-size: 14px;
  font-family: 'Poppins';
`;

export const InfoView = styled.View`
  flex: 1;
  margin-top: 8px;
  margin-bottom: 20px;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
`

export const Date = styled.Text`
  color: #707070;
  font-size: 16px;
  font-family: 'Poppins';
`;

export const Valor = styled.Text`
  flex: 1;
  margin-right: 7px;
  color: #707070;
  font-size: 16px;
  font-family: 'Poppins';
  font-weight: bold;
  text-align: right;
`;

<|start_filename|>src/pages/PayBico/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import {startAuthentication} from '~/services/api';
import {navigate} from '~/services/navigator'
import {Container, Embed} from './styles';

const PayBico = ({route}) => {
  const type = route.params.type
  const bank = route.params.bank

  const webViewRef = React.useRef(null);
  const [url, changeUrl] = React.useState('');

  const loadApi = () => {
    startAuthentication(bank).then((data) => changeUrl(data.url));
  };

  React.useEffect(loadApi, []);

  return (
    <MainContainer>
      <Container>
        <Embed
          ref={webViewRef}
          originWhitelist={['*']}
          source={{uri: url}}
          onLoad={(syntheticEvent) => {
            const {url} = syntheticEvent.nativeEvent;
            if (url.startsWith('https://www.google.co.uk')) {
              if (url.includes('access_denied')) {
                loadApi();
                console.error('Senha incorreta ou problema no login!')
              } else {
                const urlObject = new URL(url);
                const code = urlObject.searchParams.get('code');
                console.log('Code', code);
                if (type === 'bico') {
                  navigate('BicosList', {code})
                } else {
                  navigate('HomePrestador', {code})
                }
              }
            }
          }}
        />
      </Container>
    </MainContainer>
  );
};

PayBico.propTypes = {};

export default PayBico;


<|start_filename|>src/components/ButtonInterface/index.js<|end_filename|>
import React, { useState } from 'react';
import { Btn, Text } from './styles';

const ButtonInterface = (props) => {
    const [count, setCount] = useState(0);
    const onPress = () => console.warn('hello!');
    // const text = () => 

    return (
        <Btn onPress={onPress}>
            <Text>Botão</Text>
        </Btn>
    )
}

export default ButtonInterface;

<|start_filename|>src/pages/BicoDone/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import {bicoDone} from '~/services/api';
import {Container, Title, Description, Circle, Icon} from './styles';
import {navigate} from '~/services/navigator';
import ButtonText from '~/components/ButtonText'
import {useNavigation} from '@react-navigation/native';

const BicoDone = ({route}) => {
  const navigation = useNavigation();

  const loadApi = () => {
    bicoDone(route.params.id)
  }

  React.useEffect(loadApi, []);

  return (
    <MainContainer>
      <Container>
          <Circle>
            <Icon name='check-bold' />
          </Circle>
          <Title>BICO REALIZADO!</Title>
          <Description>O Cliente já efetuou o pagamento! Em breve o pagamento será depositado no seu saldo!</Description>
          <ButtonText text='Entendi' onPress={() => {navigation.replace('PeddingBicosList')}} backgroundColor='#D9483B' />
      </Container>
    </MainContainer>
  );
};

BicoDone.propTypes = {};

export default BicoDone;


<|start_filename|>src/services/http.js<|end_filename|>
import axios from 'axios';

const http = axios.create({
  baseURL: 'http://8fa45da06085.ngrok.io', 
  // baseURL: 'http://192.168.0.10:3000',
  timeout: 1000,
});

http.defaults.headers.post['Content-Type'] = 'application/json';

export default http;


<|start_filename|>src/routes.js<|end_filename|>
import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';

// PAGES
import Main from '~/pages/Main';
import Login from '~/pages/Login';
import BicosList from '~/pages/BicosList';
import BicoInfo from '~/pages/BicoInfo';
import SelectBank from '~/pages/SelectBank';
import PeddingBicosList from '~/pages/PeddingBicosList';
import BicoDone from '~/pages/BicoDone'
import HomePrestador from '~/pages/HomePrestador'
import RequestCredit from '~/pages/RequestCredit'
import CreditDone from '~/pages/CreditDone'
import QRCode from '~/pages/QRCode'
import WithdrawMoney from '~/pages/WithdrawMoney'

const paths = [
  {
    path: 'Main',
    title: 'Principal',
    screen: Main,
  },
  {
    path: 'Login',
    title: 'Login',
    screen: Login,
  },
  {
    path: 'BicosList',
    title: 'Lista de bicos',
    screen: BicosList
  },
  {
    path: 'BicoInfo',
    title: 'Informação do Bico',
    screen: BicoInfo
  },
  {
    path: 'SelectBank',
    title: 'SelectBank',
    screen: SelectBank
  }, 
  {
    path: 'PeddingBicosList',
    title: 'PeddingBicosList',
    screen: PeddingBicosList
  },
  {
    path: 'BicoDone',
    title: 'BicoDone',
    screen: BicoDone
  },
  {
    path: 'HomePrestador',
    title: 'HomePrestador',
    screen: HomePrestador
  },
  {
    path: 'RequestCredit',
    title: 'RequestCredit',
    screen: RequestCredit
  },
  {
    path: 'CreditDone',
    title: 'CreditDone',
    screen: CreditDone
  },
  {
    path: 'QRCode',
    title: 'QRCode',
    screen: QRCode
  },
  {
    path: 'WithdrawMoney',
    title: 'WithdrawMoney',
    screen: WithdrawMoney
  }
];

export default function Routes() {
  const Stack = createStackNavigator();

  const renderRoutes = () => {
    return paths.map((item) => {
      return (
        <Stack.Screen
          key={item.path}
          name={item.path}
          component={item.screen}
          options={{
            title: item.title,
            headerShown: false,
          }}
        />
      );
    });
  };

  return (
    <Stack.Navigator initialRouteName="main" >{renderRoutes()}</Stack.Navigator>
  );
}


<|start_filename|>src/pages/CreditDone/styles.js<|end_filename|>
import styled from 'styled-components/native';
import {colors} from '~/styles';
import IconMaterial from 'react-native-vector-icons/MaterialCommunityIcons';

export const Container = styled.View`
  background: ${colors.background};
  flex: 1;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  margin-right: 42px;
  margin-left: 42px;
  background: #F1F1F1;
`;

export const Title = styled.Text`
  color: #707070;
  font-family: 'Roboto';
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: ${colors.textDark};
  text-align: center;
`;

export const Description = styled.Text`
  color: #707070;
  font-family: 'Roboto';
  font-size: 18px;
  margin-bottom: 21px;
  font-weight: 500;
  text-align: center;
  color: ${colors.textDark};
`;

export const Circle = styled.View`
  background: #D9483B;
  width: 269px;
  height: 269px;
  border-radius: 269px;
  margin-bottom: 39px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
`;

export const Icon = styled(IconMaterial)`
  color: ${(prop) => prop.textColor || colors.textLight};
  font-size: 124px;
`;

<|start_filename|>src/components/ButtonText/index.js<|end_filename|>
import React from 'react';
import PropTypes from 'prop-types';
import {Button, Text, Icon} from './styles';

const ButtonText = ({onPress, text, textColor, icon, backgroundColor, ...rest}) => {
  return (
    <Button onPress={onPress} backgroundColor={backgroundColor} {...rest}>
      <Text textColor={textColor}>{icon && <Icon name={icon} />} {text}</Text>
    </Button>
  );
};

ButtonText.propTypes = {
  onPress: PropTypes.func.isRequired,
  text: PropTypes.string.isRequired,
  backgroundColor: PropTypes.string,
  textColor: PropTypes.string,
  icon: PropTypes.string
};

ButtonText.defaultProps = {
  backgroundColor: undefined,
  textColor: undefined,
  icon: undefined
};

export default ButtonText;


<|start_filename|>src/components/CardTransactions/styles.js<|end_filename|>
import styled from 'styled-components/native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {colors} from '~/styles';


export const Card = styled.View.attrs({
  elevation: 1.5,
})`
  background: #FFF;
  border-radius: 32px;
  margin-top: 20px;
  margin-left: 11px;
  margin-right: 11px;
  flex-direction: row;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
`;


export const DescriptionView = styled.View`
  margin-left: 24px;
  flex: 1;
  flex-direction: column;
`;

export const Title = styled.Text`
  margin-right: 7px;
  color: #707070;
  font-size: 18px;
  margin-bottom: 4px;
  font-family: 'Poppins';
  font-weight: bold;
`;

export const Description = styled.Text`
  color: #707070;
  font-size: 14px;
  font-family: 'Poppins';
`;

export const InfoView = styled.View`
  flex: 0.6;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
`

export const Date = styled.Text`
  color: #707070;
  font-size: 16px;
  font-family: 'Poppins';
`;

export const Valor = styled.Text`
  flex: 1;
  margin-right: 15px;
  color: ${(prop) => prop.isPositive ? '#0ECE07' : '#F24141'};;
  font-size: 20px;
  font-family: 'Poppins';
  font-weight: bold;
  text-align: right;
`;

<|start_filename|>src/components/CardProfileBico/index.js<|end_filename|>
import React from 'react';
import PropTypes from 'prop-types';
import {Card, Photo, DescriptionView, Title, SubTitle, IconView, TextRate, IconLove, RateView, IconStar, IconStarHalf} from './styles';

const CardProfileBico = ({onPress, title, subtitle, photo, ...rest}) => {
  return (
    <Card onPress={onPress} {...rest}>
      <Photo source={{
          uri: photo
      }} />
      <DescriptionView>
        <Title>{title}</Title>
        <SubTitle>{subtitle}</SubTitle>
        <RateView>
          <IconStar />
          <IconStar />
          <IconStar />
          <IconStar />
          <IconStarHalf />
          <TextRate>
            4.{Math.floor(Math.random() * (9 - 1 + 1) + 1)}
          </TextRate>
          <TextRate>
            ({Math.floor(Math.random() * (300 - 200 + 1) + 200)})
          </TextRate>
        </RateView>
      </DescriptionView>
      <IconView>
        <IconLove />
      </IconView>
    </Card>
  );
};

CardProfileBico.propTypes = {
  onPress: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string.isRequired,
  photo: PropTypes.string.isRequired
};

export default CardProfileBico;


<|start_filename|>src/pages/PeddingBicosList/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import {peddingBicosGet} from '~/services/api';
import {navigate} from '~/services/navigator'
import CardPeddingBico from '~/components/CardPeddingBico'
import ProviderHeader from "~/components/ProviderHeader";
import {Container, ScrollContainer} from './styles';

const PeddingBicosList = ({route}) => {
  const [bicos, changeBicos] = React.useState([]);

  const loadApi = () => {
    peddingBicosGet('7e7ff095-5a47-40ff-8419-10a5fd379d07').then(bicosData => {
      console.log(bicosData)
      changeBicos(bicosData.list)
    })
  }

  React.useEffect(loadApi, []);

  return (
    <MainContainer>
      <ProviderHeader />
      <ScrollContainer>
        <Container>
          {bicos.map(bico =>
            <CardPeddingBico
              key={bico.id}
              title={bico.name}
              description={bico.description}
              date={bico.date}
              amount={bico.amount}
              onPress={() => {navigate('BicoDone', {id: bico.id})}}
            />
          )}
        </Container>
      </ScrollContainer>
    </MainContainer>
  );
};

PeddingBicosList.propTypes = {};

export default PeddingBicosList;


<|start_filename|>src/pages/RequestCredit/styles.js<|end_filename|>
import styled from "styled-components/native";
import { colors } from "~/styles";

export const Container = styled.View`
  background: ${colors.background};
  padding-left: 30px;
  padding-right: 30px;
`;

export const FormContainer = styled.View`
  padding: 20px 0px;
`;

export const Text = styled.Text`
  color: ${colors.textGrey};
  font-size: 18px;
  margin-top: 10px;
`;
export const TextSecundary = styled.Text`
  color: ${colors.textGrey};
  font-size: 10px;
`;

export const Input = styled.TextInput`

  padding: 0px;
  width: 225px;
  border-bottom-width: 2px;
  border-bottom-color: ${colors.colorRed};
`;

export const TextInput = styled.TextInput`
  background: #fff;
  border: 2px ${colors.colorRed};
  height: 188px;
  border-radius: 6px;
  margin-top: 9px;
`;

export const Button = styled.TouchableOpacity`
  margin:15px;
  align-items: center;
  justify-content: center;
  background: ${colors.colorRed};
  box-shadow: 3px 3px 6px #00000029;
  height: 51px;
  border-radius: 39px;
`;

export const ButtonText = styled.Text`
  color: ${colors.textWhite};
  font-size: 16px;
`;


<|start_filename|>src/components/ClientHeader/styles.js<|end_filename|>
import styled from 'styled-components/native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {colors} from '~/styles';

export const Container = styled.View`
    flex: 1;
    max-height: 300px;
    z-index: 5;
`;

export const HeaderAnimated = styled.View`
    position: absolute;
    height: 100%;
    background: ${(prop) => prop.backgroundColor || colors.colorBlue};
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
`;

export const ContContent = styled.View`
    padding: 0 60px;
    flex: 1;
    justify-content: flex-end;
`;

export const Income = styled.Text`
    font-size: 18px;
    font-weight: 100;
    text-align: center;
    color: ${colors.textLight};
    flex-wrap: wrap;
`;

export const Money = styled.Text`
    font-size: 57px;
    font-weight: 900;
    text-align: center;
    color: ${colors.textLight}
`;
export const Footer = styled.View`
    flex:1
    flex-direction: row;
    justify-content: space-around;
    padding: 40px;
`;

export const FlexEnd = styled.View`
    flex: 1;
    flex-direction: row;
    align-items: flex-end;
`;

export const TextView = styled.View`
    flex: 1;
    flex-direction: column;
`;

export const AppLogo = styled.Image`
    margin-right: 10px;
`;

export const TextLogo = styled.Text`
    font-size: 18px;
    color: ${colors.textLight};
    font-weight: bold;
`;

export const TextName = styled.Text`
    font-size: 14px;
    color: ${colors.textLight};
    font-weight: normal;
`;

export const IconSearch = styled(Icon).attrs({
    name: 'magnify'
})`
    color: ${colors.textLight}
    font-size: 40px;
`;

<|start_filename|>src/components/ProviderHeader/index.js<|end_filename|>
import React from 'react';
import { Container, Red, Bold, MainContent, TextView, Name, Balance, IconSearch, InfoContent, InfoText } from './styles'
import {navigate} from '~/services/navigator'
import {peddingBicosGet} from '~/services/api';

const ProviderHeader = () => {
    const [bicos, changeBicos] = React.useState([]);
    const [total, changeTotal] = React.useState('0');

    const loadApi = () => {
      peddingBicosGet('7e7ff095-5a47-40ff-8419-10a5fd379d07').then(bicosData => {
        console.log(bicosData)
        changeBicos(bicosData.list)
        changeTotal(bicosData.total)
      })
    }

    React.useEffect(loadApi, []);

    return (
        <Container>
            <MainContent >
                <TextView>
                    <Name><NAME></Name>
                    <Balance>Saldo disponível: R$ {total}</Balance>
                </TextView>
                <IconSearch></IconSearch>
            </MainContent>
            <InfoContent onPress={() => {navigate('PeddingBicosList')}}>
                <InfoText>Você tem <Red>{bicos.length}</Red> solicitações de <Bold>BICO</Bold></InfoText>
            </InfoContent>
        </Container>
    )
};

export default ProviderHeader;

<|start_filename|>src/components/CardTransactions/index.js<|end_filename|>
import React from 'react';
import PropTypes from 'prop-types';
import {Card, DescriptionView, InfoView, Title, Date, Valor} from './styles';

const CardTransactions = ({name, date, amount, ...rest}) => {
  if (!amount) {
    amount = ''
  }
  const isPositive = Number(amount) > 0;

  return (
    <Card {...rest}>
      <DescriptionView>
        <Title>{name}</Title>
        <Date>{date}</Date>
      </DescriptionView>
      <InfoView>
        <Valor isPositive={isPositive}>{isPositive ? '+' : '-' } R$ {amount.replace('.', ',')}</Valor>
      </InfoView>
    </Card>
  );
};

CardTransactions.propTypes = {
  name: PropTypes.string.isRequired,
  date: PropTypes.string.isRequired,
  amount: PropTypes.string.isRequired
};

export default CardTransactions;


<|start_filename|>src/pages/BicosList/styles.js<|end_filename|>
import styled from 'styled-components/native';
import {colors, ScrollContainer as ScrollContainerComponent} from '~/styles';

export const Container = styled.View`
  background: ${colors.background};
  flex: 1;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  overflow: hidden;
  background: #F1F1F1;
`;

export const ScrollContainer = styled(ScrollContainerComponent).attrs({
  contentContainerStyle: {
    flexGrow: 1,
    justifyContent: 'flex-start',
    flexDirection: 'column',
  },
})`
`;

<|start_filename|>src/assets/img/index.js<|end_filename|>
const img = {
    walletIcon: require('./wallet.png')
}

export default img;

<|start_filename|>src/components/CardInfoBico/index.js<|end_filename|>
import React from 'react';
import PropTypes from 'prop-types';
import {Card, Photo, DescriptionView, Description, Title, SubTitle, IconView, TextRate, IconLove, RateView, IconStar, IconStarHalf} from './styles';
import ButtonText from '~/components/ButtonText'

const CardInfoBico = ({title, subtitle, photo, description, ...rest}) => {
  return (
    <Card {...rest}>
      <Photo source={{
          uri: photo
      }} />

      <IconView>
        <IconLove />
      </IconView>

      <DescriptionView>
        <Title>{title}</Title>
        <SubTitle>{subtitle}</SubTitle>
      </DescriptionView>
      <Description>
        {description}
      </Description>

      <RateView>
        <IconStar />
        <IconStar />
        <IconStar />
        <IconStar />
        <IconStarHalf />
        <TextRate>
          4.{Math.floor(Math.random() * (9 - 1 + 1) + 1)}
        </TextRate>
        <TextRate>
          ({Math.floor(Math.random() * (300 - 200 + 1) + 200)})
        </TextRate>
      </RateView>

      <ButtonText onPress={() => {}} icon='chevron-right' text='Cotratar' backgroundColor='#F2B84B' textColor='#F2F2F2' />
    </Card>
  );
};

CardInfoBico.propTypes = {
  title: PropTypes.string.isRequired,
  subtitle: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  photo: PropTypes.string.isRequired
};

export default CardInfoBico;


<|start_filename|>src/pages/Main/index.js<|end_filename|>
import React from "react";
import { Container as MainContainer } from "~/styles";
import ButtonText from "~/components/ButtonText";
import { navigate } from "~/services/navigator";

import {
  Container,
  ScrollContainer,
  Title,
  Description,
  Image,
  Logo
} from "./styles";

import man2 from "~/assets/img/man2.png";
import peopleTaking from "~/assets/img/peopleTaking.png";
import logo from '~/assets/img/logo_azul_escuro.png'

const Main = () => {
  return (
    <MainContainer>
      <Container>
        <ScrollContainer>
          <Logo source={logo} />
          <Title>Registre-se no Bicos</Title>

          <Image source={man2} />
          <Description>
            Para quem quer conseguir mais serviços toque nesse botão
          </Description>
          <ButtonText
            icon="arrow-right"
            text="Sou prestador"
            onPress={() => {
              navigate("SelectBank", { type: "admin" });
            }}
            backgroundColor="#D9483B"
          />
          <Image source={peopleTaking} />
          <Description>
            Se você está procurando um prestados de serviços toque nesse botão
          </Description>
          <ButtonText
            icon="arrow-right"
            text="Sou Cliente"
            backgroundColor="#5BD9D9"
            onPress={() => {
              navigate("SelectBank", { type: "bico" });
            }}
          />
        </ScrollContainer>
      </Container>
    </MainContainer>
  );
};

Main.propTypes = {};

export default Main;


<|start_filename|>src/pages/CreditDone/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import {creditDone} from '~/services/api';
import {Container, Title, Description, Circle, Icon} from './styles';
import {useNavigation} from '@react-navigation/native';
import ButtonText from '~/components/ButtonText'

const CreditDone = ({route}) => {
  const navigation = useNavigation();

  console.log(route.params)
  const loadApi = () => {
    creditDone('7e7ff095-5a47-40ff-8419-10a5fd379d07', route.params.amount)
  }

  React.useEffect(loadApi, []);

  return (
    <MainContainer>
      <Container>
          <Circle>
            <Icon name='check-bold' />
          </Circle>
          <Title>Parabéns, sua solicitação foi aceita!</Title>
          <Description>Você tem até 20/09/2020 para efetuar o pagamento com taxas de juros reduzidas!</Description>
          <ButtonText text='Entendi' onPress={() => {navigation.replace('HomePrestador')}} backgroundColor='#D9483B' />
      </Container>
    </MainContainer>
  );
};

CreditDone.propTypes = {};

export default CreditDone;


<|start_filename|>src/components/ClientHeader/index.js<|end_filename|>
import React from 'react';
import {Container, FlexEnd, ContContent, HeaderAnimated, Footer, Income, Money, TextLogo, TextView, TextName, IconSearch, AppLogo} from './styles';
import img from '~/assets/img';


const ClientHeader = () => {

    return (
        <Container>
            <HeaderAnimated>
                <ContContent>
                    <Income>Sua conta rendeu 0,35% no último mês</Income>
                    <Money>R$ 250,35</Money>
                </ContContent>
                <FlexEnd>
                    <Footer>
                        <AppLogo source={img.walletIcon} alt="logo" />
                        <TextView>
                            <TextLogo>Bicos</TextLogo>
                            <TextName><NAME></TextName>
                        </TextView>
                        <IconSearch />
                    </Footer>
                </FlexEnd>
            </HeaderAnimated>
        </Container>
    )
}

export default ClientHeader;

<|start_filename|>src/pages/Main/styles.js<|end_filename|>
import styled from "styled-components/native";
import { colors, ScrollContainer as ScrollContainerComponent } from "~/styles";

export const Container = styled.View`
  background: ${colors.background};
  flex: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
`;

export const ScrollContainer = styled(ScrollContainerComponent).attrs({
  contentContainerStyle: {
    flexGrow: 1,
    justifyContent: "center",
    flexDirection: "column",
  },
})`
  padding-left: 30px;
  padding-right: 30px;
`;

export const Title = styled.Text`
  font-family: "Roboto";
  font-size: 25px;
  font-weight: 500;
  color: ${colors.colorBlue};
`;

export const Description = styled.Text`
  /* font-family: "Roboto"; */
  text-align: center;
  font-size: 12px;
  margin: 10px 0px;
  font-weight: 500;
  color: ${colors.textDark};
`;

export const Image = styled.Image`
  margin-top: 10px;
  margin-bottom: 10px;
  align-self: center;
`;

export const Logo = styled.Image`
  margin-bottom: 10px;
  align-self: center;
`;




<|start_filename|>src/components/CardPeddingBico/index.js<|end_filename|>
import React from 'react';
import PropTypes from 'prop-types';
import {Card, DescriptionView, Description, InfoView, Title, Date, Valor} from './styles';
import ButtonText from '~/components/ButtonText'

const CardPeddingBico = ({title, description, date, amount, onPress, ...rest}) => {
  return (
    <Card {...rest}>
      <DescriptionView>
        <Title>{title}</Title>
      </DescriptionView>
      <Description>
        {description}
      </Description>
      <InfoView>
        <Date>{date}</Date>
        <Valor>Valor do BICO: R$ {amount.replace('.', ',')}</Valor>
      </InfoView>
      <ButtonText onPress={onPress} icon='chevron-right' text='Aceitar' backgroundColor='#F2B84B' textColor='#F2F2F2' />
    </Card>
  );
};

CardPeddingBico.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string.isRequired,
  date: PropTypes.string.isRequired,
  amount: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired
};

export default CardPeddingBico;


<|start_filename|>src/pages/HomePrestador/index.js<|end_filename|>
import React from 'react';
import {Container as MainContainer} from '~/styles';
import {transactionsGet} from '~/services/api';
import {navigate} from '~/services/navigator'
import CardTransactions from '~/components/CardTransactions'
import OptionsCarrosel from '~/components/OptionsCarrosel'
import ProviderHeader from "~/components/ProviderHeader";

import {Container, Cards, ScrollContainer} from './styles';

const HomePrestador = () => {
  const [transactions, changeTransactions] = React.useState([]);
  const [amount, changeAmount] = React.useState('00.00');

  const loadApi = () => {
    transactionsGet('7e7ff095-5a47-40ff-8419-10a5fd379d07').then(transactionsData => {
      console.log(transactionsData)
      changeTransactions(transactionsData.list)
      changeAmount(transactionsData.total)
    })
  }

  React.useEffect(loadApi, []);

  return (
    <MainContainer>
      <ProviderHeader />
      <ScrollContainer>
        <Container>
          {transactions.map((transaction) => <CardTransactions
            key={transaction.id}
            name={transaction.name}
            date={transaction.date}
            amount={transaction.amount}
          />)}
          <Cards>
            <OptionsCarrosel />
          </Cards>
        </Container>
      </ScrollContainer>
    </MainContainer>
  );
};

HomePrestador.propTypes = {};

export default HomePrestador;
