Skip to content

Instantly share code, notes, and snippets.

@rskull rskull/InputAccessary.tsx
Last active Oct 31, 2018

Embed
What would you like to do?
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,
}
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',
}
})
@rskull

This comment has been minimized.

Copy link
Owner Author

commented Oct 31, 2018

2018-10-31 23-00-48 2018-10-31 23_01_13

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.