Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to get params and type definition for custom React/React-Native components

$
0
0

I built a custom React Native Input Component which shows a dark border at the bottom when focused but when I am using this component then I am not getting props suggestion provided by VS Code Intellisense.

function TextInputComponent(props) {  const [controlledValue, setControlledValue] = useState('');  const [focused, setFocused] = useState(false);  const {    placeholder,    onChangeText,    autoCapitalize,    ref,    secureTextEntry,    value,    defaultValue,    controlled,    editable,    ...rest  } = props;  return (<TextInput      ref={ref}      value={controlled ? controlledValue : value}      defaultValue={defaultValue}      secureTextEntry={secureTextEntry}      placeholder={placeholder}      placeholderTextColor={globalColors.semiGray}      autoCapitalize={autoCapitalize}      editable={editable}      mode="outlined"      onFocus={() => {        setFocused(true);      }}      onBlur={() => {        setFocused(false);      }}      style={[        styles.textInput,        focused ? {borderColor: globalColors.blue} : {},      ]}      onChangeText={text => {        if (controlled) {          console.log(text.toLowerCase());          setControlledValue(text.toLowerCase());          onChangeText(text);        } else {          onChangeText(text);        }      }}      {...rest}    />  );}const styles = StyleSheet.create({  textInput: {    ...elementStyles.input,  },});

Is there any way I can get prop and type definitions without using TypeScript?

/** *  * @param {{header: string, subheader: string, imageAlt: string, contentList: Array, orderLink: Object, contentLink: Object}} props  */

I have seen @params way of definition but I just want to extend the default TextInput Definition not to write all the type definitions again for my custom component.


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>