Tukangs - Home (Menu)

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      position: 1,
      interval: null,
      dataSource: [
        `http://lorempixel.com/output/nature-q-c-640-480-1.jpg`,
        `http://lorempixel.com/output/nature-q-c-640-480-2.jpg`,
        `http://lorempixel.com/output/nature-q-c-640-480-3.jpg`,
        `http://lorempixel.com/output/nature-q-c-640-480-5.jpg`,
        `http://lorempixel.com/output/nature-q-c-640-480-6.jpg`,
        `http://lorempixel.com/output/nature-q-c-640-480-7.jpg`,
      ],
    };
  }

  componentWillMount() {
    this.setState({interval: setInterval(() => {
      this.setState({position: this.state.position === 6 ? 0 : this.state.position + 1});
    }, 2000)});
  }

  componentWillUnmount() {
    clearInterval(this.state.interval);
  }

  render() {
    return (
      <View style={styles.container}>
        <Slideshow
          images={this.state.dataSource}
          position={this.state.position}
          onPositionChanged={position => this.setState({position})}
        />
        <View style={styles.content}>
          <TouchableOpacity onPress={onButtonPress}>
            <Card containerStyle={styles.card} title="Air Conditioner">
              <Image
                source={{ uri: 'http://spellfujiya.com/wp-content/uploads/2016/10/Ac.png' }}
                resizeMode="contain"
                style={styles.image}
              />
            </Card>
          </TouchableOpacity>
          <TouchableOpacity onPress={onButtonPress}>
            <Card containerStyle={styles.card} title="Roofing">
              <Image
                source={{ uri: 'https://cdn3.iconfinder.com/data/icons/handyman-1/305/service-serviceman-handyman-004-512.png' }}
                resizeMode="contain"
                style={styles.image}
              />
            </Card>
          </TouchableOpacity>
          <TouchableOpacity onPress={onButtonPress}>
            <Card containerStyle={styles.card} title="Plumbing">
              <Image
                source={{ uri: 'http://charlotte.trenchlesstechnologies.net/wp-content/uploads/2014/12/wrench-icon-300x300.png' }}
                resizeMode="contain"
                style={styles.image}
              />
            </Card>
          </TouchableOpacity>
          <TouchableOpacity onPress={onButtonPress}>
            <Card containerStyle={styles.card} title="Electricity">
              <Image
                source={{ uri: 'https://cdn3.iconfinder.com/data/icons/wsd-power/512/power-09-512.png' }}
                resizeMode="contain"
                style={styles.image}
              />
            </Card>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

export default Home;

deskripsi :
kode ini untuk menampilakn menu - menu