React-Nav-Melon/components/molecules/SearchTextInput.js

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { TextInput } from 'react-native-paper'
import colors from '../../theme/colors'
import fonts from '../../theme/fonts'

const SearchTextInput = ({placeholder}) => {
  return (
    <View style={styles.container}>
      <TextInput
        editable
        mode='outlined'
        placeholder={placeholder ?? 'Which article you would like to see'}
        placeholderTextColor={colors.lightGray}
        dense
        style={{
          fontFamily: fonts.type.medium,
          fontSize: fonts.getSize(11),
          paddingVertical: 2,
          paddingHorizontal: 16,

        }}
        outlineStyle={{
          borderRadius: 24

        }}
        contentStyle={{
          fontFamily: fonts.type.regular,
          fontSize: fonts.getSize(14),
          color: colors.gray
        }}
        left={() => <IonIcon name='search-outline' size={24} color={colors.black} />}
        right={() => <List.Icon icon={"search"} color={colors.black} />}

        activeOutlineColor={colors.lightGray}
        activeUnderlineColor={colors.lightGray}
        outlineColor={colors.lightGray}
        cursorColor={colors.gray}
        onChangeText={(text) => {
          if (text.length > 0) {
            setSearching(true)
          } else {
            setSearching(false)
          }
        }}
        onSubmitEditing={null}
      // onChangeText={text => onChangeText(text)}
      />
    </View>

  )
}

export default SearchTextInput

const styles = StyleSheet.create({
  container:{
    paddingVertical: fonts.getSize(8)
  }
})