custombuttonandapi/App.js at main · akhzarna/custombuttonandapi · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, FlatList, SectionList, TouchableOpacity } from 'react-native';
import { useEffect, useState } from "react";

import CustomButton from './CustomButton';

import axios from 'axios'

const DATA = [
  {
    title: 'Main dishes',
    data: ['Pizza', 'Burger', 'Risotto'],
  },
  {
    title: 'Sides',
    data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
  },
  {
    title: 'Drinks',
    data: ['Water', 'Coke', 'Beer'],
  },
  {
    title: 'Desserts',
    data: ['Cheese Cake', 'Ice Cream'],
  },
];

export default function App() {

  const [data, setData] = useState([]);

  useEffect(()=>{
    axios.get('https://fakestoreapi.com/products', {
      // params: {
      //     articleID: articleID
      // }
  })
      .then(function (response) {

          console.log('response',response.data);

          setData(response.data)

        })
      .catch(function (error) {
          // console.log(error);
      })
      .then(function () {
          // always executed
          console.log('Always',data[0]);
      });
  },[])


  loginBtnPressed=()=>{

  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>

      {/* <CustomButton afzal='top' />
      <CustomButton afzal='bottom' />
      <CustomButton afzal='left' />
      <CustomButton afzal='right' /> */}


      <FlatList
        data={data}
        renderItem={({item}) =>
          (
            <View style={{flex:1}}>
               <View style={{flex:0.50, backgroundColor:'lightgrey'}}>
                  <Text> {item.title} </Text>
               </View>
               <View style={{flex:0.50, backgroundColor:'green'}}>
                  <Text> {item.category} </Text>
              </View>


              <Text> {item.category} </Text>
            </View>
          )
        }
        keyExtractor={item => item.id}
      />


  {/* <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({item}) => (
        <View style={{backgroundColor:'green'}}>
          <Text style={styles.title}>{item}</Text>
        </View>
      )}
      renderSectionHeader={({section: {title}}) => (
        <View style={{backgroundColor:'lightgrey'}}>
        <Text style={styles.header}>{title}</Text>
        </View>
      )}
    /> */}

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    // alignItems: 'center',
    // justifyContent: 'center',
    marginTop:100
  },
});