Using TypeScript 4, React 17 (current versions at the time I'm writing these lines).

Let say I have the following component.

This component is behind a React Navigation conditional stack navigator. This mean that if the user un-connect, the component will be automatically unmounted and the with the whole UI, showing the login screen instead.

This is managed by such code in the app's root navigator:

user ? (<RootStack.Screen name="Home" component={HomeScreen} />) : (<RootStack.Screen name="Login" component={LoginScreen} />)

Here is a component that print on the home screen.

I had some issues in another project and a friend of mine recommended to always put this un-mounting condition when a component un-mount with a risk of race condition.

I have some race conditions issues but adding un-mounting on all the components did not solved it so far.

Is my friend right that I shall continue to put these un-mounting or is it un-needed for such simple and synchronous cases as the following component?

interface Props {    prop1: number}const MyFunctionalComponent: FC<Props> = ({prop1 = 0}: Props) => {    const [stateVariable, setStateVariable] = useState<string>('initial value')    useEffect(() => {        let mounted = true        if (mounted) {          // We are synchronous, no await there.          const newStateVariable: string = stringify(prop1)          setStateVariable(newStateVariable)        }        return (): void => {          mounted = false        }    }, [prop1])    return <Text>{ stateVariable }</Text>}

What do you use and know about this ?

Thanks

First of all.. thank you for looking into my problem.

I have multiple react-native typescript projects and they are mostly similar.. so i wanted to create a shared project. Can anybody suggest a good approach for this.I have to share Components, redux and services and utils files.I have tried github and npm packages for sharing code by publishing packages.I want to know can we have a monorepo like structure.

Apps/    project1    project2    sharedproject

For eg: project 1 and 2 can use shared components and functions

I'm adding TypeScript to my React Native/React Navigation 5 Navigator, but having an issue with Adding EventStackParams to the createStackNavigator().

I've looked through the React Native 5 Docs, StackOverflow, and GitHub, but no luck. What am I doing wrong? Below is my error and the code

Error:

Type 'EventStackParams' does not satisfy the constraint 'Record<string, object | undefined>'.Index signature is missing in type 'EventStackParams'.ts(2344)

Navigation.tsx:

// Imports: TypeScript Typesimport { EventStackParams } from '../types/types';// React Navigation: Stack Navigatorsconst RootStack = createStackNavigator();const EventsStack = createStackNavigator<EventStackParams>();// Events Navigatorconst EventsNavigator = () => (<EventsStack.Navigator initialRouteName="Events"><EventsStack.Screen      name="Events"      component={Events}      options={{        title: '',        headerShown: false,      }}    /><EventsStack.Screen      name="EventDetails"      component={EventDetails}      options={{        title: '',        headerShown: true,        headerStyle: {          elevation: 0,          shadowOpacity: 0,          borderBottomWidth: 0,        },      }}    /></EventsStack.Navigator>);

EventDetails.tsx

// Imports: Dependenciesimport { RouteProp } from '@react-navigation/native';// Imports: TypeScript Typesimport { ReduxState, EventStackParams } from '../../types/types';// React Hooks: React Navigationconst route = useRoute<RouteProp<EventStackParams, 'EventDetails'>>();

Types.tsx:

// TypeScript Type: Eventexport interface Event {  eventTitle: string,  eventDescription: string | null,  eventStreet: string,  eventLocation: string,  eventLatitude: number,  eventLongitude: number,  eventDateStart: number,  eventDateEnd: number,  eventTimeStart: string,  eventTimeEnd: string,};// TypeScript Type: Event Stack Paramsexport interface EventStackParams {  Events: undefined,  EventDetails: {    item: Event,  },};

With TypeScript 3.9, React Native, React Navigation...

I got error:

interface StackParamListType 'StackParamList' does not satisfy the constraint 'Record<string, object | undefined>'.  Index signature is missing in type 'StackParamList'.ts(2344)

on:

const HomeStack = createStackNavigator<StackParamList>()

In:

const HomeStack = createStackNavigator<StackParamList>()export interface StackParamList {  Home: undefined  Post: { post: Post }  Category: { category: Category }  Login: undefined  ForgotPassword: undefined'My profile': undefined'My partner': undefined  Parameters: undefined  Likes: undefined  Onboarding: undefined}/** * Home "stack navigator" * @summary this is the navigator for everything located under "home" */export default function HomeStackScreen() {  return (<><StatusBar backgroundColor={colors.background} barStyle="dark-content" /><HomeStack.Navigator screenOptions={screenOptions}><HomeStack.Screen          name="Home"          component={HomeScreen}          options={{            headerTitle: (props) => <Logo {...props} />,          }}        /><HomeStack.Screen name="Login" component={LoginScreen} /><HomeStack.Screen name="Post" component={PostScreen} options={{ headerTransparent: true, title: '' }} /><HomeStack.Screen name="Category" component={CategoryScreen} options={({ route }) => ({ title: route.params.category.id })} /><HomeStack.Screen name="ForgotPassword" component={ForgotPasswordScreen} /><HomeStack.Screen name="My profile" component={UserProfileScreen} options={{ headerTransparent: true, title: '' }} /><HomeStack.Screen name="My partner" component={UserPartnerScreen} /><HomeStack.Screen name="Parameters" component={UserParamScreen} /><HomeStack.Screen name="Likes" component={UserLikesScreen} /><HomeStack.Screen name="Onboarding" component={Onboarding} options={{ headerShown: false }} /></HomeStack.Navigator></>  )}

I don't understand why the interface would not satisfy the type 'Record<string, object | undefined>'.

I don't understand what "Index signature is missing" mean.

Do you have an idea?

Thanks

I have this component:

class HeaderBar extends Component<Props> {    render() {        return (<View style={stylesHeaderBar.header}><View style={stylesHeaderBar.menuIconContainer}><Icon name='menu' onPress={() => this.props.navigation.openDrawer()} /></View><View style={stylesHeaderBar.titleAndLogoContainer}><Image style={stylesHeaderBar.image} source={require('../../assets/icon.png')} /><Text> Restaurantes </Text></View></View>        )    }}

And I want to call it from my main file like this:

<HeaderBar/>

But he forces me to pass him like this:

<HeaderBar navigation={}> </HeaderBar>

I'm new to React and I don't have much idea how it works, how can I fix it? I am using typscript.

I am converting an application from JS into TSX, but I encountered an error that I am not sure how to fix.

This is a function in my Screens.tsx file, and I have similar functions that are stacking other screens.

function ElementsStack(props: any) {  return (<Stack.Navigator mode="card" headerMode="screen"><Stack.Screen        name="Elements"        component={Elements}        options={{          header: ({ navigation, scene }) => (<Header title="Elements" navigation={navigation} scene={scene} />          ),          cardStyle: { backgroundColor: "#F8F9FE" },        }}      /></Stack.Navigator>  )}

The props that I am sending to the Header components (it's a .js file) are throwing me this error:

Type 'string' is not assignable to type 'never'.ts(2322)

Is there any way I can work around this error? Is that something that I can fix at the Header component level?

I would like to create a utility class for Realm for my application, keeping most of the complexity with Realm in this class. To make life easier I proposed when opening a Realm instance I open all schemas within the app. As shown below:

export default class RealmAccess {    private realm!: Realm;    private allSchemas = [OneSchema, TwoSchema, ThreeSchema ... ];    private async open(schemaList: ObjectSchema[] = this.allSchemas): Promise<void> {        this.realm = await open({ schema: schemaList });    }}

Would this be considered bad practice?

Would this affect app performance at all when fetching/saving data? As an example we can assume each schema has a minimum of 500 rows.

I can't seem to find anything in the docs about this.

Using React Native 0.63 and Typescript 4.

I have an app with categories. Each category has an image that is stored as an asset with the code.

I tried this:

myImage = require(`${myImageName}.jpg`)

But eslint tells me:

Calls to require() should use string literals (eslintimport/no-dynamic-require)

So instead I did this:

In images/index.ts:

import vibrators = require('./vibrators.jpg'),import dildos = require('./dildos.jpg'),import clitoris = require('./clitoris.jpg'),import plugs = require('./plugs.jpg'),import rings = require('./rings.jpg'),import kits = require('./kits.jpg'),import men = require('./men.jpg'),import women = require('./men.jpg'),import couple = require('./couple.jpg'),import bondage = require('./bondage.jpg'),import furniture = require('./funiture.jpg'),import lingerie = require('./lingerie.jpg'),import games = require('./games.jpg'),const categories = {vibrators, dildos, plugs, rings, kits, men, women, couple, bondage, furniture, lingerie, games}export { categories, ... }

(Sorry, I'm tired of changing all names each time I post something about this app... ^-^')

In my component that prints categories images:

import React, { FC } from 'react'import { TouchableOpacity, Image } from 'react-native'import { useNavigation } from '@react-navigation/native'import { categories } from '../assets/images'interface Props {  category: string}const CategoryImage: FC<Props> = ({ category }) => {  const navigation = useNavigation()  return (<TouchableOpacity style={styles.container} onPress={() => navigation.navigate(category)}><Image source={categories[category]} style={styles.image} /></TouchableOpacity>  )}export default CategoryImage

But there again, on:

import vibrators = require('./vibrators.jpg'),

I have:

Require statement not part of import statement. (eslint@typescript-eslint/no-var-requires)

I use route like:

<Stack.Screen component={VacancyChat} name='VacancyChat' options={({ route }: any) => ({   title: route?.params?.order.title, })}/> 

What type of route I should use here instead of any?

I'm using useState in my react-native app as such:

const [loginDetails, setLoginDetals] = useState({});

When I try to access a property of loginDetails, I get a ts(2339) error from eslint:

I don't really have any interfaces or classes set up for this, but it does get populated with those fields. They are just not explicitly defined.

My eslint and prettier configs are as follows:

eslint

{"extends": ["airbnb", "prettier"],"plugins": ["prettier"],"rules": {"prettier/prettier": ["error"],"no-console": "off","func-names": "off","no-underscore-dangle": "off","no-unused-vars": "warn"  },"overrides": [    {"files": ["*.ts", "*.tsx"],"extends": ["airbnb","prettier","airbnb-typescript","prettier/@typescript-eslint"      ],"plugins": ["prettier", "@typescript-eslint"],"parser": "@typescript-eslint/parser"    }  ]}

prettier

{"tabWidth": 4,"printWidth": 200,"singleQuote": true,"endOfLine": "auto","trailingComma": "all"}

This error does not cause any compile or runtime issues, but I'd still like to fix it.

What's the proper way to handle it?

I've been trying to implicitly infer the specific type of screens in the code down below, without hard coding the type in there.

The expected Result:

{    element: React.FC    name: 'Explore' | 'Hates' | 'Messages' | 'Profile'}[]

The actual Result:

{    element: React.FC    name: string}[]

these are the two ways I tried it and both didn't work:

interface IScreen<T> {    element: React.FC;    name: T}function test<T>(screen: React.FC, name: T): IScreen<T> {    const obj = {        element: screen,        name: name    };    return obj};const screens: IScreen[] = [    test(ExploreScreen, 'Explore'),    test(HatesScreen, 'Hates'),    test(MessagesScreen,'Messages'),    test(ProfileScreen,'Profile'),];

interface IScreen<T> {    element: React.FC;    name: T}const screens: IScreen[] = [    { element: ExploreScreen, name: 'Explore' },    { element: HatesScreen, name: 'Hates' },    { element: MessagesScreen, name: 'Messages' },    { element: ProfileScreen, name: 'Profile' },];

I'm trying to create a custom component that labels an icon and then some text next to it, I have it set up as such:

import React from 'react';import { View, Image } from 'react-native';import { FontAwesome5 } from '@expo/vector-icons';import { Text } from 'galio-framework';import PropTypes from 'prop-types';export default class IconLabel extends React.Component<any, any> {    static propTypes = {        text: PropTypes.string,        icon: PropTypes.string,        iconSize: PropTypes.number,        iconColor: PropTypes.string,    };render() {        return (<View style={{ flex: 1, flexDirection: 'row' }}><FontAwesome5 name={this.props.icon} size={this.props.iconSize} color={this.props.iconColor} />;<Text p bold style={{ paddingLeft: 10, textAlignVertical: 'center' }}>                    {this.props.text}</Text></View>        );    }}

When I try to use it in my screen, I do it like this:

<IconLabel icon="ad" iconSize={20} iconColor="white" text="test text" />

However, it just gives me this error:

What's the process to fixing this?

I'm having a weird issue when using styled-components along with VSCode. Below is basically what I get for any components coming from styled-components, they all return any.

I got it working before, but can't tell when and I can't see what's wrong in the setup to return any for all the components. I tried to move back to tslint config, removing/commenting out all rules inside the eslintrc files, but couldn't make it work either.

Supprisingly enough, I tried the starter kit I'm using for my project and the types there are working with the original setup.

I tried to use the same version of styled-components packages, but still couldn't make it work. Any help, or direction to look at this issue would be very welcomed!

.eslintrc.js

module.exports = {  env: {    browser: true,    es6: true,  },  extends: ['plugin:@typescript-eslint/recommended','plugin:@typescript-eslint/recommended-requiring-type-checking','plugin:react/recommended','prettier/@typescript-eslint',  ],  parser: '@typescript-eslint/parser',  parserOptions: {    project: './tsconfig.json',    sourceType: 'module',    ecmaFeatures: { jsx: true },  },  plugins: ['@typescript-eslint', 'react', 'react-native'],  rules: {    camelcase: 'off','react/display-name': 'off','react/prop-types': 'off','@typescript-eslint/ban-ts-ignore': 'off','@typescript-eslint/camelcase': 'off','@typescript-eslint/explicit-function-return-type': 'off','@typescript-eslint/interface-name-prefix': 'off','@typescript-eslint/no-explicit-any': 'off','@typescript-eslint/no-use-before-define': 'off','@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],'@typescript-eslint/no-non-null-assertion': 'off','@typescript-eslint/unbound-method': 'off','@typescript-eslint/no-unsafe-assignment': 'off','@typescript-eslint/no-unsafe-call': 'off','@typescript-eslint/no-unsafe-member-access': 'off','@typescript-eslint/no-unsafe-return': 'off','@typescript-eslint/no-misused-promises': ['error',      {        checksVoidReturn: false,      },    ],'@typescript-eslint/explicit-module-boundary-types': ['error', { allowArgumentsExplicitlyTypedAsAny: true }],  },  settings: {    react: {      pragma: 'React',      version: 'detect',    },  },  ignorePatterns: ['node_modules/**/*', 'docs/**/*', 'examples/**/*', 'lib/**/*'],};

tsconfig.json

{"compilerOptions": {"allowSyntheticDefaultImports": true,"baseUrl": "./src","experimentalDecorators": true,"inlineSources": true,"jsx": "react","lib": ["es2017", "dom"],"module": "commonjs","moduleResolution": "node","noEmit": true,"noUnusedLocals": true,"noUnusedParameters": true,"plugins": [      {"name": "typescript-styled-plugin","lint": {"validProperties": ["shadow-color","shadow-opacity","shadow-offset","shadow-radius","padding-horizontal","padding-vertical","margin-vertical","margin-horizontal","tint-color","aspect-ratio","elevation"          ]        }      }    ],"resolveJsonModule": true,"skipLibCheck": true,"sourceMap": true,"sourceRoot": "./src","strict": true,"strictPropertyInitialization": false,"suppressImplicitAnyIndexErrors": true,"target": "es2015"  },"include": [".eslintrc.js", "src/**/*.ts", "src/**/*.tsx"]}

"lint": "yarn format && yarn eslint && yarn stylelint","eslint": "tsc -p . --noEmit --skipLibCheck; eslint --fix 'src/**/*.{ts,tsx}'",..."@typescript-eslint/eslint-plugin": "3.8.0","@typescript-eslint/parser": "3.8.0","eslint": "7.6.0","eslint-config-prettier": "6.11.0","eslint-plugin-react": "7.20.5","eslint-plugin-react-native": "3.8.1",

styled.d.ts

import 'styled-components';declare module 'styled-components' {  // tslint:disable-next-line  export interface DefaultTheme {    darkMode: boolean;    background: string;    lightBackground: string;    grayBackground: string;    darkBackground: string;    heading: string;    subheading: string;    copy: string;    stroke: string;    underlay: string;    map: string;  }}

I had create a new react native project by init a tabs (TypeScript) .this example has 2 tabs , each tab content in a tsx file that just have a single

export default function 

and how can I use sates in that function .

and how can I use sates in that function .

I've a react-native app build with expo, the signin page works fine, however, when user attemp to signin and the app change the screen to the maintabbar, the app thors these errors:

1 - Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

2 - Invariant Violation: View config getter callback for component circle must be a function (received undefined). Make sure to start component names with a capital letter.

3 - Invariant Violation: View config getter callback for component path must be a function (received undefined). Make sure to start component names with a capital letter.

4 - Invariant Violation: View config getter callback for component polyline must be a function (received undefined). Make sure to start component names with a capital letter.

this is the signin page:

import React, { useEffect, useState } from 'react';import { useNavigation } from '@react-navigation/native';import { Image, ActivityIndicator, TextInput } from 'react-native';import { useForm } from 'react-hook-form';import * as Yup from 'yup';import { useUserAuth } from '../../../hooks/useUserAuth';import { ISession } from './SigIn.types';import {  Container,  InputArea,  CustomButton,  CustomButtonText,  SignMessageButton,  SignMessageButtonText,  SignMessageButtonTextBold,  InputSecondArea,  styles,} from './SigIn.styled';export const SignIn: React.FC = () => {  const navigation = useNavigation();  const { singIn } = useUserAuth();  const { register, setValue, handleSubmit, watch } = useForm();  const email = watch('email', '');  const password = watch('password', '');  const [loading, setLoading] = useState(false);  const handleMessageButtonClick = () => {    navigation.reset({      routes: [{ name: 'SignUp' }],    });  };  const onSubmit = async (data: ISession) => {    setLoading(true);    try {      const sessionSchema = Yup.object().shape({        email: Yup.string().required(),        password: Yup.string().required(),      });      await sessionSchema.validate(data);      const session: ISession = {        email: data.email,        password: data.password,      };      const response = await singIn(session);      if (response !== 201) throw response;      navigation.reset({        routes: [{ name: 'MainTabBar' }],      });    } catch (errStatus) {      switch (errStatus) {        case 400:          alert('Dados Incorretos');          break;        case 401:          alert('Nao autenticado');          break;        case 500:          alert('Erro no servidor');          break;      }    }    setLoading(false);  };  useEffect(() => {    register('email');    register('password');  }, [register]);  return (<Container><Image        style={styles.imagestyle}        source={require('../../../../assets/icons/logo.svg')}      /><InputArea><TextInput          placeholder='Email ou usuario'          value={email}          onChangeText={(t) => setValue('email', t)}        /><TextInput          placeholder='Senha'          value={password}          onChangeText={(t) => setValue('password', t)}          secureTextEntry={true}        /><CustomButton onPress={handleSubmit(onSubmit)}>          {loading ? (<ActivityIndicator color='white' />          ) : (<CustomButtonText>Entrar</CustomButtonText>          )}</CustomButton></InputArea><InputSecondArea><SignMessageButton onPress={handleMessageButtonClick}><SignMessageButtonText>            {''}            Ainda não é cadastrado?</SignMessageButtonText><SignMessageButtonTextBold>CADASTRAR</SignMessageButtonTextBold></SignMessageButton></InputSecondArea></Container>  );};

and this is the MainTabBar component:

import React from 'react';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { CustomTabBar } from '../../components/CustomTabBar/CustomTabBar';import { Home } from '../../screens/Home/Home';import { SearchAnimal } from '../../screens/Animal/SearchAnimal/SearchAnimal';import { Dashboard } from '../../screens/Dashboard/Dashboard';import { Config } from '../../screens/Config/Config';const TabBar = createBottomTabNavigator();export const MainTabBar: React.FC = () => (<TabBar.Navigator tabBar={(props) => <CustomTabBar {...props} />}><TabBar.Screen name='Home' component={Home} /><TabBar.Screen name='Search' component={SearchAnimal} /><TabBar.Screen name='List' component={Dashboard} /><TabBar.Screen name='Config' component={Config} /></TabBar.Navigator>);

I am using React Native Typescript. I want to use Hook. When I write the code in the 1st image, I get an error as in the 2nd image. When I don't type the hook in the 1st image, it's okay, but I have to. How can I solve the problem?

In the 3rd image my package.json file.

1. photohttps://prnt.sc/vois5x

2. photohttps://prnt.sc/voiodz

3. photohttps://prnt.sc/voison

So, essentially what I like to do is make apps which involve a lot of firebase queries. I code on visual studio using what I think is TypeScript? I have seen some reactjs resembling coding on html files so I don't really know. As I said, I am new here. I made an application working completely fine on my android but I quickly realised, it is only good for my device, other devices with different dimensions of displays don't really work with my app. So, here I have a finished app, which I want to export but it won't work with other displays or OS. How do I fix this? Can someone please help?The problem is that I have a finished app. Hopefully, with your help I may be better starting next time around. Any tips for next time when I start with a clean slate?

when I try to upload audio files in my react-native project, it seems no Filelist in react-native , so I can't upload file , any one could help? thx~

interface IAudioInputs {  readers_id: number;  level_type_id?: number;  books_id: number;  page_num_id: number;  recording_data: FileList | string  ;}

I am on GMT+3 and when I use @react-native-community/datetimepicker. It converts my date automatically to the GMT+0. You can check my code below.Do someone now why it is converting?Thank you!

DATE TIME PICKER

<DateTimePicker   testID="dateTimePicker"   value={data[name]} // value={new Date()}   mode={type} // mode="time"   is24Hour={true}   display="spinner"   onChange={handleChange}   minimumDate={type === "date" ? new Date() : undefined} />

HANDLE CHANGE FUNCTION

const handleChange = (event: any, selectedDate: Date) => {setShow(false)console.log(selectedDate) // returns the selected date - 3 hoursif (selectedDate) {  setDate(formatDate(selectedDate, type))  setData({ ...data, [name]: selectedDate })}

}

I am new to react and essentially I am using Expo to create an app. I chose the TypeScript setup with the tabs and navigator already implemented when I ran "expo init newApp". I just have a transition screen I want to display for a few seconds before navigating to the root of the app, which is just the component already given to me by Expo (from the template, it contains tabonescreen.tsx and tabtwoscreen.tsx).

However, I am not sure how to create a new stack navigator, and I believe it is overkill for this situation.

What should I do? How should I navigate to the root after I display my transition:

App.tsx

import React, { useState } from 'react';import useCachedResources from './hooks/useCachedResources';import TransitionScreen from './screens/TransitionScreen';// A root stack navigator is often used for displaying modals on top of all other content// Read more here: https://reactnavigation.org/docs/modalexport default function App() {  const isLoadingComplete = useCachedResources();  if (!isLoadingComplete) {    return null;  } else {    return (<TransitionScreen/>    );  }}

TransitionScreen.tsx

import React from 'react';import {StyleSheet, View, Image } from 'react-native';export default function TransitionScreen() {    return(<View style={styles.container}><Image          style={styles.calpalLogo}          source={require('../assets/images/calpal.png')}        />          {            setTimeout(() => {                //GO TO tabonescreen.tsx/root of the app            }, 5000)        }</View>    )  }  const styles = StyleSheet.create({    container: {      flex: 1,      backgroundColor: '#FAFAFA',      alignItems: 'center',      justifyContent: 'center',    },    calpalLogo: {      width:'100%',      height:'60%',    }  });