CODEWITHSUNDEEP
reactjsreact-nativevisual-studio-code
Sick Ranchez
Sick Ranchez

Reputation: 228

React Native VS Code Intellisense for custom components

I am having some trouble understanding how to make custom components. I make a simple Text component for myself to get rid of setting fontsize and fontfamily every single time I use a Text.

import React, { Component } from 'react';

import { Colors } from "../assets/Colors"
import { Text as RNText } from 'react-native';

class Text extends Component {
    render() {
        return (
            <RNText
                {...this.props}
                style={[{
                    fontFamily: 'Roboto-Medium',
                    fontSize: 16,
                    color: Colors.text
                }, this.props.style]}>
                {this.props.children}
            </RNText>
        )
    }
}

export default Text;

The problem here is when I type my own component "<Text style={{marginV" intelliSense doesn't pop autocomplete this to marginVertical. Also when I type "<Text onPre" intelliSense also doesn't pop autocomplete this to onPress. I am really excited about making beautiful components but this is so frustrating to use without intellisense. I already tried setting proptypes but it didn't work. Is there any quick solution for this?

Upvotes: 0

Views: 765

Answers (1)

Muhammad Numan
Muhammad Numan

Reputation: 25343

you need to define props type bypass Props in-class component like this extends Component<Props> {

import React, { Component } from 'react';

import { Colors } from "../assets/Colors"
import { Text as RNText, StyleProp, ViewStyle } from 'react-native';

type Props = {
    style: StyleProp<ViewStyle>
}

class Text extends Component<Props> {
    render() {
        return (
            <RNText
                {...this.props}
                style={[{
                    fontFamily: 'Roboto-Medium',
                    fontSize: 16,
                    color: Colors.text
                }, this.props.style]}>
                {this.props.children}
            </RNText>
        )
    }
}

export default Text;

Upvotes: 1

Related Questions