Code Sample: Mobile App

This is my partial code of writing a react native mobile application when interning at Snack Video Technologies Inc. (with permission of posting my own code).

Although it was a short intern, I experienced a lot with mobile application design and development. This small demonstration application was fully tested on IOS devices and Android devices.

import React, { Component } from "react";
import { StyleSheet, Text, View, FlatList } from "react-native";
import CategoryBlock from "../CategoryBlock";

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.state = { categoryText: "" };
    const base = " ";
    const categoryUrl = base + " ";
    fetch(categoryUrl, {
      method: "POST",
      headers: {
        "Application-Id": " "
      }
    })
      .then(response => response.json())
      .then(responseJson => {
        const categories = responseJson.result;
        this.setState({
          categories: categories
        });
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.categories}
          keyExtractor={item => item.category.name}
          renderItem={({ item }) => <CategoryBlock category={item} />}
          showsVerticalScrollIndicator={false}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    backgroundColor: "#FFFFFF"
  }
});

import React, { Component } from "react";
import {
  Text,
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  TouchableWithoutFeedback
} from "react-native";
import { withNavigation } from "react-navigation";

class VideoCard extends Component {
  constructor(props) {
    super(props);
    const video = this.props.video;
    const url = this.props.video.file.url;
  }

  render() {
    const theUrl = this.props.video.file.url;

    return (
      <View style={{ flex: 1, width: 155 }}>
        <TouchableWithoutFeedback
          onPress={() =>
            this.props.navigation.navigate("Videopg", {
              theUrl: theUrl
            })
          }
        >
          <Image
            style={{ width: 155, height: 155 }}
            source={{
              uri: this.props.video.thumbnail.url
            }}
          />
        </TouchableWithoutFeedback>

        <View style={styles.titleContainer}>
          <View style={styles.titleCardView}>
            <TouchableOpacity
              style={styles.titleTextView}
              onPress={() =>
                this.props.navigation.navigate("Videopg", {
                  theUrl: theUrl
                })
              }
            >
              <Text style={styles.titleText}>{this.props.video.title}</Text>
            </TouchableOpacity>
            <View style={styles.titlePicView}>
              <Image
                source={{
                  uri: this.props.video.thumbnail.url
                }}
                style={{ width: 30, height: 30, borderRadius: 15 }}
              />
            </View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  titleContainer: {
    backgroundColor: "#F3F3F3",
    height: 60,
    borderBottomLeftRadius: 7,
    borderBottomRightRadius: 7
  },
  titleCardView: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center"
  },
  titleTextView: {
    flex: 3,
    marginLeft: 5,
    marginRight: 2
  },
  titlePicView: {
    flex: 1
  },
  titleText: {
    color: "#333333",
    fontSize: 12
  }
});
export default withNavigation(VideoCard);