oof

src/App.js

@@ -30,7 +30,6 @@ const AppNavigator = createBottomTabNavigator({
   defaultNavigationOptions: ({ navigation }) => ({
     tabBarIcon: ({ focused, horizontal, tintColor }) => {
       const { routeName } = navigation.state;
-      let IconComponent = Ionicons;
       let iconName;
       switch(routeName) {
         case "Home":
@@ -46,7 +45,7 @@ const AppNavigator = createBottomTabNavigator({
           iconName = "ios-settings";
           break;
       }
-      return <IconComponent name={iconName} size={25} color={tintColor} />;
+      return <Ionicons name={iconName} size={25} color={tintColor} />;
     },
   }),
 });

src/routes/home.js

@@ -7,34 +7,47 @@ import { Text, View, TouchableOpacity, FlatList, Image } from "react-native";
 export default class HomeScreen extends React.Component {
   state = {
     dataSource: [],
-    debug: "deeeebug"
+    columns: 1,
+    debug: "0.00px"
   };
   handleScroll = e => {
     const el = e.nativeEvent;
+    return;
     this.setState({
       debug: `${el.contentOffset.y.toFixed(2)}px`
     });
   };
-  handleLayout = e => {
+  handleLayout = async e => {
     console.log(e.nativeEvent.layout);
-  };
 
-  async componentDidMount() {
+    let h = e.nativeEvent.layout.height;
-    const res = await (await fetch("https://dev.f0ck.me/api/p?eps=54")).json();
+    let w = e.nativeEvent.layout.width;
+    let columns = ~~(w / 128);
+    let rows = ~~(h / 128);
+    let eps = 200;//columns * rows;
+
+    const res = await (await fetch(`https://dev.f0ck.me/api/p?eps=${eps}`)).json();
     const items = res.items.map(e => ({
       id: e.id,
       src: `https://f0ck.me/t/${e.id}.png`
     }));
 
     this.setState({
-      dataSource: items
+      dataSource: items,
+      columns: columns,
+      debug: `c: ${columns} r: ${rows} eps: ${eps}`
     });
+  };
+
+  async componentDidMount() {
+    return true; // lul
   }
 
   render() {
+
     return (
       <View style={{ flex: 1, backgroundColor: theme.background }}>
-        <Image source={{ uri: theme.logo }} style={{ width: 112, height: 28, marginTop: 16 }} />
+        <Image source={{ uri: theme.logo }} style={{ width: 112, height: 28, marginTop: 8 }} />
         <Text style={{ color: "#fff", fontWeight: "bold", textAlign: "right" }}>{this.state.debug}</Text>
         
         <FlatList
@@ -42,13 +55,14 @@ export default class HomeScreen extends React.Component {
           onScroll={this.handleScroll}
           onLayout={this.handleLayout}
           renderItem={({ item }) => (
-            <View style={{ flex: 1, flexDirection: "column", margin: 1 }}>
+            <View style={{ flex: 1, flexDirection: "column", margin: 5 }}>
               <TouchableOpacity key={item.id} style={{ flex: 1 }} >
                 <Image style={{ height: 128, width: 128 }} source={{ uri: item.src }} />
               </TouchableOpacity>
             </View>
           )}
-          numColumns={4}
+          key = {this.state.columns}
+          numColumns={this.state.columns}
           keyExtractor={(item, index) => index.toString()}
         />
       </View>