ReminderDetailScreen.js

import React from 'react';
import { View, ScrollView, Image, Text } from 'react-native';

export default class ReminderDetailScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      reminder: {},
    };
  }

  static navigationOptions = {
    title: 'Detail Reminder',
    headerStyle: {
      backgroundColor: '#00B3A8',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };

  render() {
    return (
      <ScrollView contentContainerStyle={{ flexGrow: 1 }}>
        <View style={{ flex: 1 }}>
          <Image
            source={require('../assets/img/clock_schedule.png')}
            style={{ width: '100%', height: 150 }}
            resizeMode={'contain'}
          />
          <View style={{ marginTop: 16 }} />
          <View style={{ padding: 16 }}>
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
              {'Nama Reminder'}
            </Text>
            <Text>{'Makan'}</Text>
            <View
              style={{
                borderBottomWidth: 1,
                marginVertical: 4,
                borderColor: '#999999',
              }}
            />
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
              {'Tanggal Reminder'}
            </Text>
            <Text>{'19/12/2019'}</Text>
            <View
              style={{
                borderBottomWidth: 1,
                marginVertical: 4,
                borderColor: '#999999',
              }}
            />
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
              {'Waktu Reminder'}
            </Text>
            <Text>{'12.00'}</Text>
            <View
              style={{
                borderBottomWidth: 1,
                marginVertical: 4,
                borderColor: '#999999',
              }}
            />
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
              {'Prioritas Reminder'}
            </Text>
            <Text>{'Penting'}</Text>
            <View
              style={{
                borderBottomWidth: 1,
                marginVertical: 4,
                borderColor: '#999999',
              }}
            />
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
              {'Tag Reminder'}
            </Text>
            <Text>{'Makan'}</Text>
            <View
              style={{
                borderBottomWidth: 1,
                marginVertical: 4,
                borderColor: '#999999',
              }}
            />
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
              {'Frekuensi Reminder'}
            </Text>
            <Text>{'Tiap Hari'}</Text>
            <View
              style={{
                borderBottomWidth: 1,
                marginVertical: 4,
                borderColor: '#999999',
              }}
            />
            <Text style={{ fontWeight: 'bold', fontSize: 16 }}>
              {'Catatan Reminder'}
            </Text>
            <Text>{'Jangan Lupa Makan'}</Text>
            <View
              style={{
                borderBottomWidth: 1,
                marginVertical: 4,
                borderColor: '#999999',
              }}
            />
          </View>
        </View>
      </ScrollView>
    );
  }
}