I am getting error in React native:

"Import type should be used only in TypeScript files".

I installed a library called viewPager but it is showing 9 errors mentioning:

"Should be used only in TypeScript files".

Could you please tell how to fix this TypeScript errors.

Thanks

I have a working function that looks like this:

  const handleClickOnFavouriteLocation = (item: any) => {    console.log('MY COORD', item.coordinates);    if(data){      console.log('DATA COORD', data.personalFavouritePlaces.nodes[0].center.coordinates);    }    const addressDetails = {      coordinates: item.coordinates,    };    chooseLocation(addressDetails);  };

Currently, the item here is hard-coded and it works. However, I am trying to replace the hardcoded item with items returned via grapqhl. However, I get an error in the coordinates field because of a difference in shapes.

For example, If I check item.coordinates on the log, I see this. The length is 2:

MY COORD (2) [8.217462, 53.13975](2) [8.217462, 53.13975]0: 8.2174621: 53.13975length: 2__proto__: Array(0)

However, when I check an example of the coordinates returned from graphql, I see this:

DATA COORD [Array(2)]DATA COORD [Array(2)]0: (2) [8.183364, 53.157753]length: 1__proto__: Array(0)

The length here is 1. Even though both of them seem to be the same thing. How can I change the grahql returned data (coordinates field) such that it can be used exactly like the hard-coded one?

I have a working function that looks like this:

  const handleClickOnFavouriteLocation = (item: any) => {    console.log('MY COORD', item.coordinates);    if(data){      console.log('DATA COORD', data.personalFavouritePlaces.nodes[0].center.coordinates);    }    const addressDetails = {      placeName: item.street,      coordinates: item.coordinates,    };    Keyboard.dismiss();    chooseLocation(addressDetails);  };

Currently, the item here is hard-coded and it works. However, I am trying to replace the hardcoded item with items returned via grapqhl. However, I get an error in the coordinates field.

For example, If I check item.coordinates on the log, I see this. The length is 2:

MY COORD (2) [8.217462, 53.13975](2) [8.217462, 53.13975]0: 8.2174621: 53.13975length: 2__proto__: Array(0)

However, when I check an example of the coordinates returned from graphql, I see this:

DATA COORD [Array(2)]DATA COORD [Array(2)]0: (2) [8.183364, 53.157753]length: 1__proto__: Array(0)

The length here is 1. Even though both of them seem to be the same thing. How can I change the grahql returned data (coordinates field) such that it can be used exactly like the hard-coded one?

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've recently implemented dark mode into my app, but having an issue with an error when building the npm package with npm build. The code works, but is there a way or a reason to remove this error?

React Native Docs: Appearance

Error

src/ContactActionSheet.tsx:3:10 - error TS2305: Module '"react-native"' has no exported member 'Appearance'.3 import { Appearance, Dimensions, StyleSheet, Text, View, Linking, TouchableOpacity } from 'react-native';

JSX

// Imports: Dependenciesimport { Appearance, Dimensions, StyleSheet, Text, View, Linking, TouchableOpacity } from 'react-native';// Dark Modeconst colorScheme = Appearance.getColorScheme();

I have this component which performs a post request and maps json data that I get in return. On this response I do setState and map the data in the callback. I do this because of setState's async nature.

I want to be able to use val and key outside of it's scope in render() but I'm not sure how to achieve this.

LoadCard:

class LoadCard extends Component {  constructor(props) {    super(props);    this.state = {      req: [],    }  }  componentDidMount() {    axios.post(hostname, {      request: "?request=getObjects"    })      .then(response => {        this.setState({          req: JSON.parse(response.data)        },          () => this.state.req.objects.map((val, key) => {            // after mapping what to do here?          })        );      })      .catch(error => {        console.log("Error: Card/componentDidMount: "+ error);      });  }  render() {    return (<Card key={key} title={val.name} /> /* use val and key here */    );  }}

In the component's render I want to be able to use val and key as a prop for Card component.

Card:

class Card extends Component {  render() {    return (<View key={this.props.key}><Text>{this.props.title}</Text></View>    );  }}

Edit to fit comment question:

The response data I get returned looks like this:

{"objects": [        {"zone_id_1": 151,"zone_id_2": null,"blocked": "Y","type_id": 1,"name": "Alarm chauffeurs@ON=100","output_value": 0,"object_id": 1,"input_value": 100,"last_changed": "2019-04-04T11:36:53","continuously_high_enabled": "N"        },        {"zone_id_1": 150,"zone_id_2": null,"blocked": "N","type_id": 1,"name": "Alarm office@ON=0","output_value": 0,"object_id": 2,"input_value": 0,"last_changed": "2019-03-26T15:52:01","continuously_high_enabled": "N"        },    ]}

I have component whose Props interface extends ViewProps from React Native, i.e:

export interface Props extends ViewProps {  // Custom props}

Naturally, this extends the style prop. There is one caveat, I am using Animated.View and have style like this:

style={{  opacity: animationCharacter.interpolate({    inputRange: [0, 1],    outputRange: [0, 1]  }),  transform: [    {      scale: animationCharacter.interpolate({        inputRange: [0, 1],        outputRange: [1.2, 1]      })    }  ]}}

I think the interpolate call is incompatible with style typings from ViewProps, but there is no AnimatedViewProps I can extend.

Is there a solution here or will I have to set style: any?

I am rendering an item in a list like this:

  return (<View style={styles.item}><View style={styles.nameAddressContainer}><Text style={styles.customisedName}>{place.customisedName}</Text><Text style={styles.address}>{place.placeName}</Text></View><View style={styles.deleteButtonContainer}><Button          rounded          style={styles.deleteButton}          onPress={() => onDeletePlace(place.id)}><Icon name="trash-o" size={moderateScale(15)} color="black" /></Button></View></View>  );export const styles = StyleSheet.create({  item: {    backgroundColor: '#d7fce4',    borderRadius: moderateScale(20),    marginVertical: moderateScale(8),    marginHorizontal: 16,    height: moderateScale(60),    justifyContent: 'space-between',    flexDirection: 'row',  },  customisedName: {    paddingTop: moderateScale(10),  },  deleteButton: {    backgroundColor: 'white',    width: moderateScale(35),    height: moderateScale(35),    justifyContent: 'center',  },  deleteButtonContainer: {    paddingTop: 7,    paddingRight: 7,    position: 'relative',  },  nameAddressContainer: {    flexDirection: 'column',    paddingLeft: moderateScale(10),  },  address: {    fontSize: moderateScale(9),  },});

When the placeName text is too long, it pushes the button towards the right. The button moves out of the main green view. How can I stop this from happening? Is it possible to fix the button's position while the placeName text hides or moves to the next line?

position: fix is invalid for React Native stylesheets. I have also tried using zIndex but that didn't work either.

Hey all I'm trying to dynamically set a style interface to a type like this:

type IListStyles = {    [LIST_TYPE.ADD_ACTIONABLE]: IListItemAddActionableStyle;    [LIST_TYPE.SUPERVALUE]: IListItemSupervalueStyle;}enum LIST_TYPE {  ADD_ACTIONABLE = "ADD_ACTIONABLE",  SUPERVALUE = "SUPERVALUE",}export interface IListItem<T extends LIST_TYPE> {  style?: IListStyles[T];  type: T;

Buuut I'm getting that T can't be used to index IListStyles has anyone done something like this before?

In order to avoid '../../../../' style relative imports in a TypeScript based React Native app, I would like to configure the app so that I can use absolute imports instead.

It is important that the configuration also supports Jest unit tests.

I created the app using npx react-native init MyTestApp --template typescript

React Native version: 0.60.5

What is the exact configuration I would need to achieve this?

When I enter the screen, there's no error displayed on the input field. In my Formik form, I take an input and run a graphql mutation on it. Once it's done, I reset the form. However, after resetting, I start seeing a Formik Error because the field is .required() and currently it's empty.

This error should only be shown when I am trying to submit the form without an input. It shouldn't show after I have submitted it successfully.

  const handleSubmitForm = (    values: FormValues,    helpers: FormikHelpers<FormValues>,  ) => {    editLocationName({      variables: {      favouritePlaceId: route.params.id,      input: {customisedName: values.locationName}      },    });    helpers.resetForm();    helpers.setErrors({});  };.....<Formik            initialValues={initialValues}            onSubmit={handleSubmitForm}            validationSchema={validationSchema}>            {({ handleChange, handleBlur, handleSubmit, values }) => (<View style={styles.searchFieldContainer}><View style={styles.form}><FieldInput                    handleChange={handleChange}                    handleBlur={handleBlur}                    value={values.locationName}                    fieldType="locationName"                    placeholderText="Neuer Name"                  /><ErrorMessage                    name="locationName"                    render={(msg) => <ErrorText errorMessage={msg} />}                  /></View><View style={styles.buttonContainer}><ActionButton buttonText="Save" onPress={handleSubmit} /></View></View>            )}</Formik>

Validation Schema:

const favouriteLocationNameValidationSchema = yup.object().shape({  locationName: yup  .string()  .label('locationName')  .required('Required Field')  .max(70, 'Too Long!')  .min(3, 'Too Short!'),});

How can I erase/reset the error along with the form?

setErrors is not making any difference here.

I'm trying to create a stateless React component with optional props and defaultProps in Typescript (for a React Native project). This is trivial with vanilla JS, but I'm stumped as to how to achieve it in TypeScript.

With the following code:

import React, { Component } from 'react';import { Text } from 'react-native';interface TestProps {    title?: string,    name?: string}const defaultProps: TestProps = {    title: 'Mr',    name: 'McGee'}const Test = (props = defaultProps) => (<Text>        {props.title} {props.name}</Text>);export default Test;

Calling <Test title="Sir" name="Lancelot" /> renders "Sir Lancelot" as expected, but <Test /> results in nothing, when it should output "Mr McGee".

Any help is greatly appreciated.

I've created a React Native functional component with both light and dark theme styles.

const lightThemeOverrides = StyleSheet.create({ <light_override_styles_here> });const styles = StyleSheet.create({ <styles_here> });

I'm trying to use them in my code with the help of a function:

const themedStyles = (key: string) => {  if (props.theme === 'light') {    return { ...styles[key], ...lightThemeOverrides[key] };  } else {    return styles[key];  }  };

I use this function in my JSX like so: <View style={themedStyles('popup')}>

But my ts linter is complaining, that Element implicitly has an 'any' type because type '{ popup: { backgroundColor: string; }; text: { color: string; }; }' has no index signature.

Any idea how to fix this?All tips will be highly appreciated.

I implemented ImageBackground for my React Native app and when I run the emulator it doesn't allow the buttons to be pressed. The Buttons were tested beforehand and do function normally.I feel like it is to do with the ordering of components but have been unsuccessful when reordering them.

export function TitleScreen({navigation: navigation}) {    return (<ImageBackground source={require('../assets/space_background_reduced_v1.png')} style={globalStyles.background}><Image source = {require('../assets/logo.png')} style={globalStyles.logo}/><View style={globalStyles.Buttons}><Button title={"Random Race"} onPress={() => navigation.navigate('RandomRaceOptionsScreen')}/><Button title={"Create"} onPress={() => navigation.navigate('CreateMenu')}/><Button title={"Race Lore"} onPress={() => navigation.navigate('RaceLoreListScreen')}/></View></ImageBackground>    );}

Styles:

export const globalStyles = StyleSheet.create({    Buttons: {        zIndex:5,        width: 120,        marginLeft: "33%",        marginTop:90    },``

Should one exclude ios and android directories in tsconfig.js in a react-native project?

{  ..........."exclude": ["node_modules","babel.config.js","metro.config.js","jest.config.js""android""ios"  ]}

I am trying to use perf_hooks from the nodeJS Performance API in my React Native project. Below is my code

import {performance} from 'perf_hooks';export const measure = (  target: Object,  propertyKey: string,  descriptor: PropertyDescriptor) => {  const originalMethod = descriptor.value;  descriptor.value = function (...args) {    const start = performance.now();    const result = originalMethod.apply(this, args);    const finish = performance.now();    console.log(`Execution time: ${finish - start} milliseconds`);    return result;  };  return descriptor;};

I keep getting the same error.error: bundling failed: Error: Unable to resolve module perf_hooks from src/utils/metrics.ts: perf_hooks could not be found within the project.

Performance API is available from node version 8.x and my node -v response is 10.16.1.

I see that there is perf_hooks present in my node_modules as well under the @types/node/perf_hooks folder.

I am using SafeAreaView on multiple screens and it works fine everywhere except on one screen. Here, it shows up at the bottom but not at the top. At the top, the backgroundColor from the containerTopcovers up the entire area.

Note that the red color is only added to highlight the safeAreaView.

export const Screen: React.FunctionComponent = () => {  return (<SafeAreaView style={styles.safeContainer}><View style={styles.container}><View style={styles.containerTop}><BackArrow /><JourneyLocationsTextContainer /><View style={styles.containerOptionsSelector}><TripOptionsSelector /></View></View><View style={styles.containerMap}><MapContainer /><ButtonsContainer /></View></View></SafeAreaView>  );};const styles = StyleSheet.create({  safeContainer: { flex: 1, backgroundColor: 'red' },  container: { backgroundColor: 'white', flex: 1 },  containerTop: { flex: 1, backgroundColor: '#323443' },  containerOptionsSelector: {    marginTop: moderateScale(20),    marginLeft: moderateScale(20),  },  containerMap: { flex: 2 },});

Navigation:

<NavigationStack.Screen        name="Screen"        component={Screen}        options={{          headerShown: false,          gestureEnabled: false,          cardStyleInterpolator:            CardStyleInterpolators.forFadeFromBottomAndroid,        }}      />

How can I fix this?

If I change the background color of the container, which is currently white, I don't see any change on the screen. Seems like it's not showing that view at all. Its topped by the containerTop.

I have redux + API which getting data from the server then convert it to state object for react-native-tab-view from redux:

//types import { NavigationState } from 'react-native-tab-view';export enum STANDINGS_TAB {  CHANGE_INDEX = 'STANDINGS_TAB_CHANGE_INDEX',}export type StandingsRoute = {  key: string;  title: string;  league: EsportLeague;};export type StandingsState = NavigationState<StandingsRoute>;interface changeStandingsTabViewIndex {  type: typeof STANDINGS_TAB.CHANGE_INDEX;  index: number;}...

In my tab screen I showing a screen with activity indicator before data is loaded and ready to render for tab view:

//types class StandingsTabView extends React.Component<  StandingsTabProps,  StandingsState> {  _renderTabBar = (...);  _renderLabel = (...);  getSceneMap = () => {    let sceneMap = {};    this.props.standingsState.routes.map((route, index) => {      sceneMap[route.league.tournaments[0].league.name] = () => {        return <LeagueTabScreen tournament={route.league.tournaments[0]} />; // some component for tab scene      };    });    return sceneMap;  };  _renderScene = SceneMap(this.getSceneMap());  render() {    if (this.props.standingsState.routes.length == 0 && this.props.pending)      return (<View          style={{            flex: 1,            backgroundColor: '#07232B',            alignContent: 'center',            justifyContent: 'center',          }}><ActivityIndicator            size="large"            color={'#6AFCFA'}            style={{ padding: 5 }}          /></View>      );    return (<TabView        navigationState={this.props.standingsState}        renderScene={this._renderScene}        renderTabBar={this._renderTabBar}        onIndexChange={this.props.changeStandingsTabIndex}        initialLayout={{ width: Dimensions.get('window').width }}      />    );  }}const mapStateToProps = (state: RootState) => ({  pending: state.standingsPending.pending,  standingsState: state.standingsState,  error: state.standingsError.error,});export default connect(mapStateToProps, { changeStandingsTabIndex })(  StandingsTabView);

But I got this error after load ends and ready in redux:

But if I wait for some time and when all data is loaded before I open screen so there is no activity indicator and data and everything looks fine and exactly as I wanted.Someone told me to change class component to the functional component, I never worked with functional components. And after I changed my code to this:

const StandingsTabView = () => {  const dispatch = useDispatch();  const { pending, standingsState, error } = useSelector(    (state: RootState) => ({      pending: state.standingsPending.pending,      standingsState: state.standingsState,      error: state.standingsError.error,    }),    shallowEqual  );  const changeIndex = useCallback(    (index: number) => dispatch(changeStandingsTabIndex(index)),    [dispatch]  );  const renderTabBar = ...  const renderLabel = ...  const getSceneMap = () => {    let sceneMap = {};    standingsState.routes.map((route, index) => {      sceneMap[route.league.tournaments[0].league.name] = () => {        return <LeagueTabScreen tournament={route.league.tournaments[0]} />; // some component for tab scene      };    });    return sceneMap;  };  const renderScene = SceneMap(getSceneMap());  if (standingsState.routes.length == 0 && pending)    return (<View        style={{          flex: 1,          backgroundColor: '#07232B',          alignContent: 'center',          justifyContent: 'center',        }}><ActivityIndicator          size="large"          color={'#6AFCFA'}          style={{ padding: 5 }}        /></View>    );  return (<TabView      navigationState={standingsState}      renderScene={renderScene}      renderTabBar={renderTabBar}      onIndexChange={changeIndex}      initialLayout={{ width: Dimensions.get('window').width }}    />  );};export default StandingsTabView;

Now all loading fine even if data not ready yet and I showing activity indicator instead. But tabs are so laggy now its impossible to tap on them. It's like x 10 slower animations I cannot even see how scenes are changing.

Laggy example: https://streamable.com/g9inf0

Can someone explain to me why I did rid of that error by changing from class to functional component but now all so laggy, and how to fix it?

I'm trying to use deep links in react native project with react navigation but I got some weirds scenarios in both platforms(ios & android).

My codeNavigationContainer

const linking = {        prefixes: ['https://latineo.com', 'latineo://'],        config: {            Home: {                path: 'homestack',                initialRouteName: 'Explore',                screens: {                    Explore: 'explore',                    Posts: 'posts',                    Favorites: 'favorites',                    Settings: 'settings',                },            },            ExploreOptions: {                path: 'explorestack',                initialRouteName: 'Restaurants',                screens: {                    Restaurants: 'rts',                    ShowRestaurants: 'restaurants',                    ShowRestaurant: 'restaurant/:id',                },            }        },    };<NavigationContainer            theme={navigatorTheme}            ref={(nav: any) => {                navigator = nav;                NavigationService.setNavigator(navigator);            }}            linking={linking}            fallback={<LoadingIndicator                size='giant'></LoadingIndicator>}            onStateChange={(nav) => {                console.log("AppNavigator -> nav", nav)            }}>            {isAuth && <HomeNavigator />}            {!isAuth && didTryAutoLogin && didOnboard && didPermission && <AuthNavigator />}            {!isAuth && didTryAutoLogin && !didOnboard && <OnboardScreen />}            {!isAuth && didTryAutoLogin && didOnboard && !didPermission && <LocationPermissionScreen />}            {!isAuth && !didTryAutoLogin && <IsAuthScreen />}</NavigationContainer>

HomeNavigator

const Stack = createStackNavigator<HomeParamList>();export const HomeNavigator = (): React.ReactElement => {    return (<Stack.Navigator            initialRouteName={'Home'}            headerMode='none'><Stack.Screen name='Home' component={HomeTabsNavigator} /><Stack.Screen name='ExploreOptions' component={LayoutsNavigator} /><Stack.Screen name='CreateOptions' component={PostNavigator} /><Stack.Screen name='FavoritesOptions' component={FavoritesNavigator} /><Stack.Screen name='SettingsOptions' component={SettingsNavigator} /></Stack.Navigator>    );};export const HomeTabsNavigator = (): React.ReactElement => {    return (<BottomTab.Navigator            screenOptions={TabBarVisibleOnRootScreenOptions}            initialRouteName={'Explore'}            tabBar={props => <HomeBottom {...props} />}><BottomTab.Screen name='Explore' component={LayoutsScreen} /><BottomTab.Screen name='Post' component={PostsScreen} /><BottomTab.Screen name='Favorites' component={LayoutsScreen} /><BottomTab.Screen name='Settings' component={SettingsContainer} /></BottomTab.Navigator>    );};

Scenario 1

When I try (App in background) with xcrun simctl openurl booted latineo://homestack/explore or latineo://homestack/settings, explorestack/restaurant/:id, etc it works fine, but when the app is closed(killed) it always open homestack/explore.

Scenario 2When I try with explorestack/restaurant/:id it works but when I press a button that navigation.back() it back to a blank screen (If I use gestures from this white screen I can back to my home screen).

Something similar happen when I try with explorestack/restaurants when I use back button it navigate to same screen but without header.

I've a problem that don't render my react native app. I'm developing it with expo using TypeScript. There is no description about where the error in my code.

I get this error when I start it on my Android smartphone.

Here is the error screenshot:Expo Error

"Cannot add a child that doesn't have a YogaNode to parent without a measure function! (Trying to add a '[RCTTextInlineImage 37]' to a '[RCTView 39]')"

And here is the package.json:

{"main": "node_modules/expo/AppEntry.js","scripts": {"start": "expo start","android": "expo start --android","ios": "expo start --ios","web": "expo start --web","eject": "expo eject"  },"dependencies": {"@expo/vector-icons": "^10.0.0","@react-native-community/masked-view": "0.1.10","@react-navigation/bottom-tabs": "^5.8.0","@react-navigation/drawer": "^5.9.0","@react-navigation/material-bottom-tabs": "^5.2.16","@react-navigation/native": "^5.7.3","@react-navigation/stack": "^5.9.0","axios": "^0.19.2","color": "^3.1.2","expo": "~38.0.8","expo-status-bar": "^1.0.2","react": "~16.11.0","react-dom": "~16.11.0","react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz","react-native-animated-splash-screen": "^2.0.5","react-native-appearance": "^0.3.4","react-native-flash-message": "^0.1.16","react-native-gesture-handler": "~1.6.0","react-native-paper": "^4.0.1","react-native-reanimated": "~1.9.0","react-native-safe-area-context": "~3.0.7","react-native-screens": "~2.9.0","react-native-tab-view": "^2.15.1","react-native-vector-icons": "^7.0.0","react-native-web": "~0.11.7"  },"devDependencies": {"@babel/core": "^7.8.6","@callstack/eslint-config": "9.1.0","@types/color": "^3.0.1","@types/react": "~16.9.41","@types/react-native": "~0.62.13","@typescript-eslint/eslint-plugin": "2.25.0","@typescript-eslint/parser": "2.25.0","babel-preset-expo": "^8.2.3","eslint": "6.8.0","typescript": "~3.9.5"  },"private": true}

I did research and I found a few issue that its title is starting with this title but its rest is not same as my issue. What sould I do?

Thanks already.