BooksInfo/main.js at master · Muhammad-Abdullah-dev/BooksInfo · 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
118
119
120
121
122
123
import {createStackNavigator,createBottomTabNavigator, createAppContainer} from 'react-navigation';
import { StyleSheet,View,Button,Text,TouchableOpacity,FlatList,ActivityIndicator,Image,ToastAndroid } from 'react-native';//ToastAndroid
import React, { Component } from 'react';

export default class main extends React.Component {


    constructor(){
        super()
        this.state = {
          dataSource: [],
          isLoading: true
        }

    }

    showdetails = (item) =>{
        ToastAndroid.show(item.item.title, ToastAndroid.SHORT)
        this.props.navigation.navigate('details', { itemId: item.item });

        // console.log(item)
        // console.log(item.item.title)

    }

    renderItem = ({ item }) =>{
        return (
            <TouchableOpacity style={{flex:1, flexDirection: 'row', marginBottom:3}}
           onPress={() => this.showdetails({item})}
           >
                <Image style={{width: 80,height:80, margin:5 }}
                    source={{ uri: item.thumbnailUrl }} />
                <View style={{flex:1, justifyContent:'center', marginLeft: 5}}>
                    <Text style ={{fontSize: 18, color:'green',marginBottom:15}} >
                        {item.title}
                    </Text>
                    <Text style={{fontSize:16,color:'red'}}>
                        {item.authors}
                    </Text>
                </View>
            </TouchableOpacity>
        )
    }

    renderSeparator = () => {
      return(
          <View
          style={{height:1, width:'100%',backgroundColor:'black'}}>

          </View>
      )
    }

    componentDidMount(){
        const url = 'http://www.mocky.io/v2/5d308d7f320000b0572045c0'
        fetch(url)
        .then((response) => response.json()

        )
        .then((responseJson) => {
        this.setState({
            dataSource: responseJson,
            isLoading: false
        })
        })
        .catch((error) => {
            console.log(error)
        })
    }

    render() {
        const { navigate } = this.props.navigation;
        if (this.state.isLoading) {
            return (

                <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                 <ActivityIndicator size="large" color="#0000ff" />
                </View>

            );
        }
        else {
            return (
                <View style={StyleSheet.container}>
                    <FlatList
                     data={this.state.dataSource}
                        renderItem={this.renderItem}
                        keyExtractor={(item, index) => index.toString()}
                        ItemSeparatorComponent={this.renderSeparator}
                    />
                </View>
            );
        }

    }
}

/*class SettingsScreen extends React.Component {
    render() {
      return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Settings!</Text>
        </View>
      );
    }
  }*/

//   const TabNavigator = createBottomTabNavigator({
//     main: { screen: main },
//     Settings: { screen: SettingsScreen },
//   });

//   export default createAppContainer(TabNavigator);


//   const styles = StyleSheet.create({
//       container:{
//           flex:1,
//           backgroundColor:'#F5FCFF'
//       }
//   })