@uiw/react-native/lib/Pagination/Page.js

UIW for React Native

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text, TouchableHighlight, TextInput } from 'react-native';
import { containerSize, contentSize } from './DirText';
import { useTheme } from '@shopify/restyle';
const Page = props => {
  const theme = useTheme();
  const styles = createStyles({
    boxColor: theme.colors.primary_background || '#3578e5'
  });
  const {
    size,
    currentColor,
    current,
    totalPage,
    renderPages,
    onCurrent,
    setCurrent,
    simple
  } = props;
  useEffect(() => {
    setJumpCurrent(String(current));
  }, [current]);
  const [jumpCurrent, setJumpCurrent] = useState('1');
  const textSize = size === 'small' ? 1 : 2;
  if (renderPages) {
    return <TouchableHighlight activeOpacity={1} underlayColor={theme.colors.gray50 || '#f1f1f1'} onPress={() => onCurrent?.(current)}>
        {renderPages(current, totalPage)}
      </TouchableHighlight>;
  }
  return <View style={[styles.containerStyle, {
    minWidth: containerSize[size],
    height: containerSize[size],
    borderWidth: 0,
    flexShrink: 0
  }]}>
      {simple === true ? <TextInput keyboardType="number-pad" onBlur={() => {
      let newJumpCurrent = Number(jumpCurrent);
      if (newJumpCurrent >= totalPage) {
        setCurrent(totalPage);
      } else {
        setCurrent(newJumpCurrent);
      }
    }} onFocus={() => {
      setJumpCurrent('');
    }} blurOnSubmit={true} onChangeText={text => {
      setJumpCurrent(text);
    }} value={jumpCurrent} style={[styles.inputStyle, {
      color: currentColor ?? (theme.colors.primary_background || '#3578e5'),
      fontSize: contentSize[size],
      lineHeight: contentSize[size] + textSize
    }]} /> : <Text style={{
      color: currentColor ?? (theme.colors.primary_background || '#3578e5'),
      fontSize: contentSize[size],
      lineHeight: contentSize[size] + textSize
    }}>
          {current}
        </Text>}
      <Text style={{
      color: currentColor ?? (theme.colors.primary_background || '#3578e5'),
      fontSize: contentSize[size] - 1,
      lineHeight: contentSize[size] - textSize
    }}>
        /
      </Text>
      <Text style={{
      color: theme.colors.gray500 || '#3d3d3d',
      fontSize: contentSize[size],
      lineHeight: contentSize[size] + textSize
    }}>
        {totalPage}
      </Text>
    </View>;
};
function createStyles({
  boxColor
}) {
  return StyleSheet.create({
    containerStyle: {
      borderStyle: 'solid',
      borderWidth: 1,
      borderRadius: 2,
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center'
    },
    inputStyle: {
      height: 27,
      width: 33,
      borderColor: boxColor,
      borderWidth: 0.5,
      textAlign: 'center',
      padding: 2,
      marginHorizontal: 3
    }
  });
}
export default Page;