I've created a custom text input component for my react native app. It has no issues in the android build. But In IOS, the custom component draws a border around its view.
This is how it looks in ios. You can see a border around it.
I want it took to look like this in IOS without a square border
This is my custom component (MyInput.js)
import React, {useState, useRef, useEffect} from 'react';import { Animated, Text, ActivityIndicator, TouchableOpacity, Platform,} from 'react-native';import PropTypes from 'prop-types';import Icon from 'react-native-vector-icons/Feather';const {View, TextInput, StyleSheet} = require('react-native');const MyInput = (props) => { const [hide, makeHide] = useState(false); const [phAanimatedValue] = useState(new Animated.Value(0)); const [labelAanimatedValue] = useState(new Animated.Value(0)); const [overflow, setOverflow] = useState('hidden'); useEffect(() => { if (props.value.length > 0) { animatePlaceHolder(1, true); } }, [props.value]); const movePlaceHolderLeft = phAanimatedValue.interpolate({ inputRange: [0, 1], outputRange: [0, -10], }); const moveLabelRight = labelAanimatedValue.interpolate({ inputRange: [0, 1], outputRange: [-10, 0], }); const animatePlaceHolder = (v, hide) => { Animated.timing(phAanimatedValue, { toValue: v, duration: 50, useNativeDriver: true, }).start(() => { makeHide(hide); animateLabel(v); }); }; const animateLabel = (v) => { setOverflow('visible'); Animated.timing(labelAanimatedValue, { toValue: v, duration: 50, useNativeDriver: true, }).start(); }; return (<View style={[ styles.input, { overflow: overflow, marginTop: props.marginTop, marginBottom: props.marginBottom, marginStart: props.marginStart, marginEnd: props.marginEnd, borderColor:props.error?"#ff0033":"#e5deda", }, ]}><TextInput secureTextEntry={props.secureTextEntry} autoCapitalize={props.autoCapitalize} maxLength={props.maxLength} onSubmitEditing={props.onSubmitEditing} returnKeyType={props.returnKeyType} textContentType={props.textContentType} blurOnSubmit={props.blurOnSubmit} keyboardType={props.keyboardType} editable={props.editable} onFocus={() => { animatePlaceHolder(1, true); }} ref={props.cref} value={props.value} onChangeText={(v) => props.onChangeText(v)} style={{paddingStart: 25,marginRight:50}} onBlur={() => { if (props.value.length > 0) { makeHide(true); } else { animatePlaceHolder(0, false); } }} /> {!hide ? (<Animated.Text onPress={() => props.cref.current.focus()} style={{ position: 'absolute', transform: [{translateX: movePlaceHolderLeft}], height: '100%', fontFamily: 'Muli-Regular', width: '100%', marginStart: 20, paddingVertical: Platform.OS === 'ios' ? 15 : 0, color: props.error ? '#ff0033' : '#a6a6a6', textAlignVertical: 'center', }}> {props.mandatory ? props.label +' *' : props.label}</Animated.Text> ) : (<Animated.Text onPress={() => props.cref.current.focus()} style={{ position: 'absolute', transform: [{translateX: moveLabelRight}], marginTop: -10, backgroundColor: 'white', color: props.error ? '#ff0033' : '#a6a6a6', marginStart: 20, fontFamily: 'Muli-Regular', paddingHorizontal: 5, textAlignVertical: 'top', }}> {props.mandatory ? props.label +' *' : props.label}</Animated.Text> )} {props.progress && (<View style={{ position: 'absolute', right: 0, paddingEnd: 20, paddingTop:15, alignItems: 'center', justifyContent: 'center', flex:1 }}><ActivityIndicator size={'small'} color="#0db14b" /></View> )} {props.passwordToggle && (<View style={{ position: 'absolute', right: 0, paddingEnd: 20, paddingTop:15, alignItems: 'center', justifyContent: 'center', flex:1 }}> <TouchableOpacity onPress={() => props.switchToggle(!props.secureTextEntry)}><Icon name={!props.secureTextEntry ? 'eye' : 'eye-off'} size={15} color={!props.secureTextEntry ? '#0db14b' : '#746b65'} /></TouchableOpacity></View> )}</View> );};MyInput.propTypes = { value: PropTypes.string, label: PropTypes.string, mandatory: PropTypes.bool, marginTop: PropTypes.number, marginBottom: PropTypes.number, marginStart: PropTypes.number, marginEnd: PropTypes.number, passwordToggle: PropTypes.bool, switchToggle: PropTypes.func, onChangeText: PropTypes.func, progress: PropTypes.bool, error: PropTypes.bool, editable: PropTypes.bool, textContentType:PropTypes.string, cref: PropTypes.any, keyboardType: PropTypes.string, onSubmitEditing: PropTypes.func, blurOnSubmit: PropTypes.bool, returnKeyType: PropTypes.string, maxLength: PropTypes.number, secureTextEntry: PropTypes.bool, autoCapitalize: PropTypes.string,};MyInput.defaultProps = { value: '', label: '', textContentType:'none', secureTextEntry: false, onSubmitEditing: () => {}, switchToggle: () => {}, marginTop: 0, mandatory: false, marginBottom: 0, passwordToggle: false, progress: false, marginStart: 0, editable: true, marginEnd: 0, cref: null, returnKeyType: 'done', keyboardType: 'default', blurOnSubmit: true, error: false, maxLength: 1000, autoCapitalize: 'none',};const styles = StyleSheet.create({ input: { borderWidth: 2, backgroundColor: 'white', fontSize: 14, color: '#353839', lineHeight: 18, paddingVertical: Platform.OS === 'ios' ? 15 : 0, fontFamily: 'Muli-Regular', fontWeight: '600', borderRadius: 100, },});export default MyInput;Is there any solution for this or is this a bug?