Meme Feed App (Reddit Image Feed in React Native)

App.js

import React from 'react';
import { StyleSheet, Text, View, StatusBar, Dimensions } from 'react-native'
import { Font, AppLoading } from 'expo'
import {
  Image,
  ListView,
  Divider,
  Screen,
  NavigationBar,
  ImageBackground,
  Spinner,
  Button,
  Icon,
  Title,
  Lightbox
} from '@shoutem/ui'

var w = Dimensions.get('screen').width
var h = Dimensions.get('screen').height

var subreddits = [
  'indianpeoplefacebook',
  'im14andthisisdeep',
  'coaxedintoasnafu',
  'wholesomememes',
  'OnlyWholesomeMemes',
  'youdontsurf',
  'BlackPeopleTwitter',
  'WhitePeopleTwitter',
  'BikiniBottomTwitter',
  'bonehurtingjuice',
  'starterpacks',
  'trippinthroughtime',
  'dankchristianmemes',
  'HistoryMemes',
  'musicmemes',
  'shittyadviceanimals',
  'AdviceAnimals',
  'DeepFriedMemes',
  'The_Donald',
  'Tinder',
  'prequelmemes',
  'sequelmemes'
]

export default class App extends React.Component {
  state = {
    fontsAreLoaded: false,
    pictures: []
  }
  async componentWillMount() {
    await Font.loadAsync({
      'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf'),
      'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf'),
      'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf'),
      'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf'),
      'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf'),
      'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf'),
      'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf'),
      'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf'),
      'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf'),
      'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf'),
      'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
    })

    this.setState({ fontsAreLoaded: true })
  }
  componentDidMount() {
    this.getPictures.bind(this)()
  }
  async getPictures() {
    this.setState({ pictures: [] })
    let latest = (await Promise.all(subreddits
      .map(async sub => {
        let s = await fetch(`https://www.reddit.com/r/${sub}/.json`)
        let data = await s.json()
        let urls = data['data']['children'].map(child => child['data']['url'])
        let pics = urls.filter(url => /(jpg|jpeg|png)$/.test(url))
        return pics
      })
    ))
      .reduce((_, pics) => _.concat(pics))
      .sort(() => Math.random() - 0.5)
    console.log(latest)
    this.setState({ pictures: latest })
  }
  render() {
    console.log(this.state.fontsAreLoaded)
    return this.state.fontsAreLoaded ? (
      <Screen style={{ width: w }}>
        <StatusBar barStyle="default" hidden={true} />
        <View style={{ height: 70, width: w, backgroundColor: 'black' }}>
          <NavigationBar
            styleName="clear"
            rightComponent={
              <Button onPress={this.getPictures.bind(this)}>
                <Icon style={{ color: 'white' }} name="refresh" />
              </Button>
            }
            centerComponent={<Title>MEME FEED</Title>}
          />
        </View>
        {this.state.pictures.length > 0 ?
          <ListView data={this.state.pictures} renderRow={(picture) => console.log(picture) ||
            <Lightbox renderContent={() => <Image source={{uri: picture}} style={{flex: 1, width: w}} resizeMode={"contain"} />}>
              <Image source={{ uri: picture }} resizeMode={"cover"} style={{width: w, height: w}} />
            </Lightbox>
          } />
          : <Spinner style={{ marginTop: 90 }} />
        }
      </Screen>
    ) : <AppLoading />
  }
}