ChargEco/Strides-APP/app/pages/alert/ViewUtil.js

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

export const PagerView = ({index=0,total=0}) => (
  <View style={styles.pagerView}>
    <View style={styles.pagerContent}>
      <Text style={styles.pagerText} numberOfLines={1}>{index}</Text>
      <Text style={styles.pagerText} numberOfLines={1}>{"/"}</Text>
      <Text style={styles.pagerText} numberOfLines={1}>{total}</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  pagerView: {
    left: 0,
    right: 0,
    bottom: 8,
    alignItems: 'center',
    position: 'absolute',
  },
  pagerContent: {
    paddingTop: 2,
    paddingLeft: 8,
    paddingRight: 8,
    paddingBottom: 2,
    borderRadius: 30,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,.4)'
  },
  pagerText: {
    color: textLight,
    fontSize: 12,
    padding: 1
  }
})