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

TypeScript: dealing with `this` component properties which are reffering neither to state, nor to props

$
0
0

Here are my interfaces:

export type alphaColorProcessing = (opacity: number) => string | string[];export interface welcomeMapping {  [key: string]: alphaColorProcessing | string;}export interface IPalette {  [key: string]: string | string[] | alphaColorProcessing | welcomeMapping;}export interface IThemeContext {  theme: string;  palette: IPalette;  setTheme?: (theme: string) => void;}export interface IThemeState extends IThemeContext {  isDark: Boolean;}export interface IAppState {  loading: boolean;  themeState: IThemeState;}export interface IAppProps {  setTheme?: (theme: string) => void;}

I am using these in App component:

enter image description here

But I have the problem: while declaring a method on this, in constructor, as I understand it has nothing to do with IAppState. So my question is, how can I declare/use an interface for the methods which are refferring neither to State, nor to Props? I need for it for the methods/properties that I'm setting on this of the component.

netInfoSubscription, setTheme - is what I am interested in.

here's the code:

export default class App extends React.PureComponent<{},IAppState>  {  showedForce = false;  showedBadIP = false;  constructor(props) {    super(props);    this.setTheme = (theme:string) => {      this.setState((state) => ({        themeState: {          ...state.themeState,          theme,          isDark: theme === 'dark',          palette: Palette,        },      }));    };    this.state = {      loading: true,      themeState: {        theme: 'light',        isDark: false,        palette: Palette,        setTheme: this.setTheme,      },    };  }  componentDidMount() {    NetInfo.configure({      reachabilityUrl: 'https://www.cisco.com/',    });    this.netInfoSubscription = NetInfo.addEventListener((state) => {      handleConnectionStatus(state.isConnected);    });  }  render() {    const { themeState, loading } = this.state;    if (loading) return null;    return (<Provider store={ Store }><AppearanceProvider><SafeAreaProvider><Root><ThemeContext.Provider value={ themeState }><Navigation /><FingerprintModal /></ThemeContext.Provider></Root></SafeAreaProvider></AppearanceProvider></Provider>    );  }}

Viewing all articles
Browse latest Browse all 6287

Trending Articles