Something went wrong. Try again.
Utilities and UI components for cross-platform React Native apps
Something went wrong. Try again.
1.7 kB · 64 lines
TSX
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465// Copyright (c) 2025 Joseph Hale//// This Source Code Form is subject to the terms of the Mozilla Public// License, v. 2.0. If a copy of the MPL was not distributed with this// file, You can obtain one at https://mozilla.org/MPL/2.0/.
import { TextInput as NativeTextInput, StyleSheet, View } from 'react-native';
import Color from 'color';import { useMaterialTheme } from '../theme/material/useMaterialTheme';
export interface TextInputProps { value: string; onChangeText: (text: string) => void; placeholder?: string; before?: React.ReactNode; after?: React.ReactNode;}
export default function TextInput(props: TextInputProps) { const { theme } = useMaterialTheme(); return ( <View style={[ styles.container, { backgroundColor: theme.colors.secondaryContainer, borderColor: theme.colors.primary, }, ]} > {props.before} <NativeTextInput style={[styles.input, { color: theme.colors.onSecondaryContainer }]} placeholder={`${props.placeholder}...`} placeholderTextColor={Color(theme.colors.onSecondaryContainer) .fade(0.5) .string()} value={props.value} onChangeText={props.onChangeText} autoCapitalize="none" autoCorrect={false} underlineColorAndroid={'transparent'} /> {props.after} </View> );}
const styles = StyleSheet.create({ container: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderRadius: 8, gap: 8, paddingHorizontal: 8, borderBottomWidth: 1, }, input: { borderRadius: 8, flex: 1, },});