@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 { containerStyle, containerSize, contentSize } from './DirText';
const Page = props => {
  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="#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 ?? '#46a6ff',
      fontSize: contentSize[size],
      lineHeight: contentSize[size] + textSize
    }]} /> : <Text style={{
      color: currentColor ?? '#46a6ff',
      fontSize: contentSize[size],
      lineHeight: contentSize[size] + textSize
    }}>
          {current}
        </Text>}
      <Text style={{
      color: currentColor ?? '#46a6ff',
      fontSize: contentSize[size] - 1,
      lineHeight: contentSize[size] - textSize
    }}>
        /
      </Text>
      <Text style={{
      color: '#3d3d3d',
      fontSize: contentSize[size],
      lineHeight: contentSize[size] + textSize
    }}>
        {totalPage}
      </Text>
    </View>;
};
export const inputStyle = {
  height: 27,
  width: 33,
  borderColor: 'gray',
  borderWidth: 0.5,
  textAlign: 'center',
  padding: 2,
  marginHorizontal: 3
};
const styles = StyleSheet.create({
  containerStyle,
  inputStyle
});
export default Page;