I'm trying to extend default theme, extending colors works like a charm, but if I try to extend Text component with more text styles, this doesnt work, I don't understand what I'm doing wrongm. This is my react-native-elements.d.ts file:
react-native-elements.d.ts
import 'react-native-elements';
import { ColorValue, StyleProp, TextStyle } from 'react-native';
type ColorSwatch = {
otherColor: string;
};
declare module 'react-native-elements' {
export interface Colors extends ColorSwatch {}
export interface TextProps {
h5Style: StyleProp<TextStyle>;
}
export interface FullTheme {
colors: RecursivePartial<Colors>;
Text: Partial<TextProps>;
}
}
I'm trying to implement the theme like this:
import { FullTheme } from 'react-native-elements';
export const theme: FullTheme = {
Text: {
h5Style: {
fontFamily: '',
},
}
}
This is the TS error in console:
Object literal may only specify known properties, but 'h5Style' does not exist in type 'Partial<TextProps>'. Did you mean to write 'h1Style'?
Looks like h5Style doesn't exist on the TextProps interface.
Related
My react code:
import React from 'react';
import withStyles from "react-jss";
const styles = {
box: {
border: "2px solid #000"
}
};
interface ComponentProps {}
class Welcome extends React.Component<ComponentProps> {
render() {
const {classes, children} = this.props;
return(<div className={classes.box}></div>);
}
}
export default withStyles(styles)(Welcome);
In this const {classes, children} = this.props; is showing this error at classes:
Property 'classes' does not exist on type 'Readonly<ComponentProps> & Readonly<{ children?: ReactNode; }>'.ts(2339)
Only way to get rid of this error seems to be doing this;
interface ComponentProps {
classes:any
}
But using any is semantically wrong. What type should I give to classes, or is this not how jss is used in typescript-react?
(JSS how to use with TS: github.com/cssinjs/jss/blob/master/docs/react-jss-ts.md (only functional component))
It looks like you are using withStyles, which comes from material ui. Material UI has CSSProperties, which is what you need.
import { CSSProperties } from "#material-ui/styles";
interface ComponentProps {
classes: CSSProperties;
}
For a non-MUI solution, check out CSSType:
import CSS from "csstype";
interface ComponentProps {
classes: { [key: string]: CSS };
}
I'm trying to pass style as props to my custom TextInput component.I found this snippet to type button and label style in props :
import {
StyleProp,
Text,
TextStyle,
View,
ViewStyle
} from 'react-native';
interface IProps {
label: string;
buttonStyle?: StyleProp<ViewStyle>;
labelStyle?: StyleProp<TextStyle>;
}
// rest
but I did not find anything for TextInput nor any documentation about StyleProp
So what is the proper way to pass style to TextInput?
I was checking TextInputProps interface and I found TextStyle is also used for TextInput :
style?: StyleProp<TextStyle>;
so it can be used in these ways :
import {StyleSheet, TextInput, TextInputProps , StyleProp ,
TextStyle } from 'react-native';
type Props = {
style?: StyleProp<TextStyle>,
// or
style?: Pick<TextInputProps, "style">
};
const Input: React.FC<Props> = ({style: propStyles}) =>
<TextInput
style={ [styles.input, propStyles] }
/>
const styles = StyleSheet.create({
input: {...},
});
I have got a problem and I didn't understand the reason why it said that.
The problem:
TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'typeof
I have had a variable as string. We can call it componentName. I imported some components like this: "import * as _icons from "./icons";" And I want to invite a component like this "_icons[this.props.name!]". But my ide warning to me as the error sentence
import {SvgIconNamespace} from "../namespaces";
import * as _icons from "./icons";
import {AbstractIconComponent} from "./icons";
import React from "react";
import {View} from "react-native";
export class Icon extends AbstractIconComponent<SvgIconNamespace.SvgIconPropsInterface, SvgIconNamespace.SvgIconStateInterface> {
render(): React.ReactNode {
let iconElement = React.createElement(
_icons[this.props.name!], // Error sentence in this line!
{ size: this.props.size!, fill: this.props.fill!},
)
return(
<View>
{ iconElement }
</View>
);
}
constructor(props: SvgIconNamespace.SvgIconPropsInterface) {
super(props)
}
}
props.name: string = 'PlusSquareIcon'
Typescript is expecting the specific names you gave your icon exports (for example "PlusSquareIcon") and not just any string (the type of the Icon name prop) - this is why you are getting this error.
One way you can get around this, if you would like to keep typing props.name just as any string, is to cast _icons to an index-signature interface like this:
import {SvgIconNamespace} from "../namespaces";
import * as _icons from "./icons";
import {AbstractIconComponent} from "./icons";
import React from "react";
import {View} from "react-native";
interface ImportedIcons {
[key: string]: React.FC<{size: number, fill: string}>
}
export class Icon extends AbstractIconComponent<SvgIconNamespace.SvgIconPropsInterface, SvgIconNamespace.SvgIconStateInterface> {
render(): React.ReactNode {
let iconElement = React.createElement(
(_icons as ImportedIcons)[this.props.name!], // Error sentence in this line!
{ size: this.props.size!, fill: this.props.fill!},
)
return(
<View>
{ iconElement }
</View>
);
}
constructor(props: SvgIconNamespace.SvgIconPropsInterface) {
super(props)
}
}
I have an interface like this:
x.ts:
namespace Basex {
export interface AddressDto {
AddressDetail?: string;
AddressName?: string;
AddressType?: number;
City?: string;
CityCode?: number;
CountryCode?: number;
DexjustizCode?: string;
District?: string;
HouseNumber?: number;
HouseNumberDetail?: string;
Id?: number;
IsMainAddress?: boolean;
LastAddressInterval?: string;
Street?: string;
Text?: string;
Town?: string;
ValidationLevel?: number;
ValidityEndDate?: Date;
ValidityStartDate?: Date;
}
}
// I use this object on my screen in this way;
const {Basex} = require('../../src/model/dto/x');
I can access AddressDto like this Basex.AddressDto
But I could not achieve access to this namespace from another dependency project. I have tried using the above method to export in the dependency project's index.ts.But it could not be. Shortly How can access this namespace's interfaces from another dependency?
You have to export the interface. please refer here
i think your answer is here.
maybe you can import it but in a weired way.
but first you should put that namespace in a separated file, then import it as the following:
/// <reference path="PATH_TO_NAMESPACE.TS" />
i know it seems comment but you know that's ts :)
You can also import your interface module on required location and from there you can pass it as a prop and I think this will be a convenient way
Ex:
button.props.ts
import { ViewStyle, TextStyle, TouchableOpacityProps } from "react-native"
import { ButtonPresetNames } from "./button.presets"
export interface ButtonProps extends TouchableOpacityProps {
/**
* Text which is looked up via i18n.
*/
tx?: string
/**
* The text to display if not using `tx` or nested components.
*/
text?: string
/**
* An optional style override useful for padding & margin.
*/
style?: ViewStyle | ViewStyle[]
/**
* An optional style override useful for the button text.
*/
textStyle?: TextStyle | TextStyle[]
/**
* One of the different types of text presets.
*/
preset?: ButtonPresetNames
/**
* One of the different types of text presets.
*/
children?: React.ReactNode
}
inside button.tsx pass it as a prop
import * as React from "react"
import { TouchableOpacity } from "react-native"
import { Text } from "../text"
import { viewPresets, textPresets } from "./button.presets"
import { ButtonProps } from "./button.props"
import { mergeAll, flatten } from "ramda"
/**
* For your text displaying needs.
*
* This component is a HOC over the built-in React Native one.
*/
export function Button(props: ButtonProps) {
// grab the props
const { preset = "primary", tx, text, style: styleOverride, textStyle: textStyleOverride, children, ...rest } = props
const viewStyle = mergeAll(flatten([viewPresets[preset] || viewPresets.primary, styleOverride]))
const textStyle = mergeAll(flatten([textPresets[preset] || textPresets.primary, textStyleOverride]))
const content = children || <Text tx={tx} text={text} style={textStyle} />
return (
<TouchableOpacity style={viewStyle} {...rest}>
{content}
</TouchableOpacity>
)
}
And inside index.ts just simply export button.tsx
export * from "./button"
I'm trying to import a style variable from another file but it tells me that it's undefined
My directory:
Components
Login
LoginForm.js
appstyle.js
appstyle.js
export default AppStyles = {
colour: {
custom: 'rgb(86,200,95)'
}
}
Login.js
import React, { Component } from 'react';
import AppStyles from '../appstyle';
class LoginForm extends Component {
render() {
const header = {
color: AppStyles.color.custom
}
return (<div ><p style={header}> test </p></div>)
}
error:
./src/components/appstyle.js
Line 1: 'AppStyles' is not defined no-undef
Search for the keywords to learn more about each error.
What is wrong? I honestly cant see what i did that's making it not recognize it.
Your export statement is wrong, if you want to name something you need to declare a variable:
Or you can also NOT name it, as it is a default export, and name the import only in your Login file.
export default {
[...]
}
export default AppStyles = {
colour: {
custom: 'rgb(86,200,95)'
}
}
AppStlyes Is not defined. You have no variable declaration.
Instead it should look like this.
const AppStyles = {
colour: {
custom: 'rgb(86,200,95)'
}
};
export default AppStyles;
Rewrite appstyle.js:
const AppStyles = ...;
export default AppStyles;
Spelling error:
AppStyles sets a property colour:
export default {
colour: {
custom: 'rgb(86,200,95)'
}
}
And you are looking for a property named color:
AppStyles.color.custom
EDIT:
You also need to directly export the object. The way you are attempting to export is causing the undefined issue.