InputAccessary.tsx

import React from 'react';
import { View, ViewProps, TouchableOpacity, Text, Keyboard } from 'react-native'
import { InputAccessoryView} from './InputAccessoryView'
import styled from 'styled-components'

const Inner = styled(View)`
  align-items: flex-end;
  padding: 12px 16px;
  background: #f2f2f2;
`;

const TextButton = styled(TouchableOpacity)`
  font-weight: bold;
  color: #15a2ff;
`;

interface Props extends ViewProps {
  visible?: boolean;
  onClosed?: () => void
}

export const InputAccessory = ({ visible, onClosed, ...rest }: Props) => {
  if (visible === false) {
    return null
  }

  return (
    <InputAccessoryView {...rest}>
      <Inner>
        <TextButton
          onPress={() => {
            if (onClosed) {
              onClosed()
            }
            Keyboard.dismiss()
          }}
        >
          <Text>完了<Text>
        </TextButton>
      </Inner> 
    </InputAccessoryView>
  )
}

Accessory.defaultProps = {
  visible: true,
  onClosed: undefined,
}

InputAccessoryView.tsx

import React from 'react';
import { View, ViewProps, StyleSheet } from 'react-native'
import KeyboardSpacer from 'react-native-keyboard-spacer';

interface Props extends ViewProps {
  children: React.ReactNode;
}

export const InputAccessoryView = ({ children, ...rest }: Props) => (
  <View {...rest} pointerEvents="box-none" style={styles.wrap}>
    {children}
    <KeyboardSpacer />
  </View>
)

const styles = StyleSheet.create({
  wrap: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'flex-end',
  }
})