I am trying to get location from redux when needed. After redux save the location to the state i need to return a promise since i need that data in my screen.

here are my actions, reducers, store, and how i use them.

LocationRedux.tsx

import * as Type from './LocationReduxTypes';
const initialState: Type.LocationState = {
    location: undefined,
};
const LocationRedux = (
    state = initialState,
    action: Type.LocationActionTypes,
): Type.LocationState => {
    switch (action.type) {
        case Type.SET_LOCATION:
            return { ...state, location: action.location };
        default:
            return state;
    }
};

export { LocationRedux as default };

LocationReduxActions.tsx - here i need to return a promise that when i use this method, i need to know location is resolved.

import * as Type from './LocationReduxTypes';
import Store from '~/Redux/Store';

import { GeolocationResponse } from '@react-native-community/geolocation';

class LocationReduxActions {
    public static SetLocation(location: GeolocationResponse) {
        return new Promise((resolve, reject) => {
            resolve(
                Store.instance.dispatch({
                    type: Type.SET_LOCATION,
                    location,
                }),
            );
            reject(
                console.log('rejected'),
            );
        });

    }
}

export { LocationReduxActions as default };

LocationReduxType.tsx

import { MenuItemType } from '~/Helpers/Menu';
import { GeolocationResponse } from '@react-native-community/geolocation';

export const SET_LOCATION = 'SET_LOCATION';

interface SetLocationAction {
    type: typeof SET_LOCATION;
    location?: GeolocationResponse;
}

export interface LocationState {
    location?: GeolocationResponse;
}
export type LocationActionTypes = SetLocationAction;

and this is how i am trying to use this action.

    componentDidMount() {
        if (!this.props.location) {
            Geolocation.getCurrentPosition(location => {
                LocationReduxActions.SetLocation(location)
                .then(() => { // debugger never hit this then method.
                    this._load();
                });
            }, () => { // error handling.
                this._load();
            });
        } else { 
            this._load(); 
        }
    }

any help will be appreciated, thanks.

I am using React and Typescript and react-router - I want to use RouteComponentProps to bind this.props.history automatically. This is my code:

import * as React from "react";
import { connect } from "react-redux";
import {
    RouteComponentProps,
    withRouter,
} from "react-router-native";
import Example from "../../screens/Example";

interface Props {}

interface State {}

class ExampleContainer extends React.Component<RouteComponentProps & Props, State> {

    isValid(value): void {
      if (value!=="") {
        this.props.history.push('/tasks')
      }
    }

    render() {
        return (
            <Example callback={(value: string) => this.isValid(value)}  />
        );
    }
}

const mapDispatchToProps = (_) => ({});
const mapStateToProps = (_) => ({});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ExampleContainer));

However, I get a weird compiler error telling me that RouteComponentProps is never used, but at the same time it is not defined. Here the exact error message:

src/containers/ExampleContainer/index.tsx:4:2 - error TS6133: 'RouteComponentProps' is declared but its value is never read.

4  RouteComponentProps,
   ~~~~~~~~~~~~~~~~~~~

src/containers/ExampleContainer/index.tsx:13:48 - error TS2304: Cannot find name 'RouteComponentProps'.

13 class ExampleContainer extends React.Component<RouteComponentProps & Props, State> {
                                                  ~~~~~~~~~~~~~~~~~~~

How do I bind react-router props correctly? I believe I should at least get a TypeError of some sort if I am doing it wrong, but I can not comprehend this error... I appreciate any help pointing me to the source of the error. Thanks in advance!

Sorry if the heading is misleading. I can't seem to find a suitable title. I have a two classes.

****************Form.tsx

interface Props{}
interface State{}
class Form extends Component<Props, State>{
   protected submit(){
      // contains a code when form submits
   }
}



****************Login.tsx

class LoginForm extends Form{
   render(){
       return(
          <View>
            <Button onClick = {() => this.props.navigation.goBack()}
            <Button onClick= {() => this.submit()} />
          </View>

       );
   }
}

I wanna do this

<LoginForm navigation = {someObject} />

But I cannot do this because i cant seem to find a workaround. I just wanna know how to pass more props to LoginForm.

I've been trying to get react-navigation to play nice with typescript, but I'm having a hard time with all the warnings.

I tried looking into the types api but I can't really find what I'm supposed to do to make the warning go away.

const VenueDetails: NavigationScreenComponent<NavigationScreenProps> = ({
  navigation
}) => {
  const venueId: NavigationScreenProp<string> = navigation.getParam(
    'id',
    'NO-ID'
  )
return(...)
}

so getParam throws the following warning:

Argument of type '"id"' is not assignable to parameter of type '"navigation" | "screenProps" | "navigationOptions"'.ts(2345) And I have no idea what I'm doing wrong.

I have value X coming from the server. I would like to expose an interface similar to

interface Xclient {
    getX(): Promise<X>
}

that I will later use from my react function component.

I say similar because behind the scenes I want it to:

1. first return value from the storage (its react-native)
2. simultaneously dispatch network call for newer version of X and re-render the component once I have the response

so instead of Promise I probably need Observable. But then how to use it with react in general and react hooks in particular?

I'm coming from the backend background so there may be some more canonical approach that I dont know about. I really dont want to use redux if possible!

How do I correctly type the useRef for a React Native TextInput?
With the below code I get the following error.

Property 'isFocused' does not exist on type 'MutableRefObject<TextInput>'

import React, { useRef } from 'react';
import { TextInput } from 'react-native';

const TestScreen = () => {

  const searchInputRef = useRef<TextInput>();

  const updateSearchText = (searchText: string) => {
    console.log(searchTextRef.isFocused()); //  👈 Error here.
  };

  return (
    <TextInput
      ref={searchInputRef}
      placeholder="Search"
      onChangeText={(text: string) => updateSearchText(text)}
      autoCorrect={false}
      autoCapitalize="none"
      value={searchText}
    />
  )

}

I want the converter to show results at real time for each input text field . Strictly need to use the react hooks and typescript for my react-native app

    function GradConverter(){
  const [temp, updateTemp] = React.useState({ f: 0, c: 0 })

  const updateC = ev => updateTemp({
    c: ev.target.value,
    f: (+ev.target.value * 9 / 5 + 32).toFixed(2)
  })

  const updateF = ev => updateTemp({
    c: ((+ev.target.value - 32) * 5 / 9).toFixed(2),
    f: ev.target.value
  })

  return(
    <div id="container">
      <div id="box1">
        <h1>Celsius</h1>
        <input
            type = "number"
            value = {temp.c}
            onChange = {updateC} >
          </input>
      </div>
      <div id="box2">
          <h1>Fahrenheit</h1>
          <input
            type = "number" 
            value = {temp.f} 
            onChange = {updateF}>
          </input>
          </div>
    </div>
  )
}

I want to convert this particular example to react native app using typescript and react hooks

I tried using ToolbarAndroid component but I always get this error message

import { View, StyleSheet, Image, TouchableOpacity, ToolbarAndroid } from 'react-native';

public render() {
return (
  <View>
    <ToolbarAndroid 
      style={styles.toolbar}
      title="test"
    />
    <TouchableOpacity onPress={this.props.navigation.openDrawer}>
        <Icon name={'md-menu'} size={30} />
    </TouchableOpacity>
  </View>
);


const styles = StyleSheet.create({
toolbar: {
    backgroundColor: '#2196F3',
    height: 56,
}});

but It works fine if I remove the ToolbarAndroid component. I tried copy pasting other codes but got same error. I'm using "react-native": "0.61.5" version.

Here is my code

component.tsx

export function myComponent(navigation: Navigation) {

   // some logic...

   return (
     <TouchableWithoutFeedback 
        testID="notificationCard"
        onPress={() => navigation.navigate(NEW_ROUTES.profile, { id: rawId })}
              >
        <Card style={styles.stackedCard} ></Card>
    <TouchableWithoutFeedback />

  )
} 

Here I need to verify the navigate function that has been called or not, when tap on TouchableWithoutFeedback But I am not able to get the navigation

component.test.tsx

const { environment, getByTestId, navigationTestRenderer } = renderWithNavigation(myComponent);
  const notificationCards = getByTestId("notificationCards");
  const notificationCard = getAllByTestId(notificationCards, "notificationCard");
  fireEvent.press(notificationCard[0]);
  // no idea about next line, here I am getting some *NavigationContainer* don't know what to do with this
  expect(navigationTestRenderer).toHaveBeenCalled();

navigationTestRenderer :

{ [Function: NavigationContainer]
      router:
       { childRouters: { ROUTE: null },
         getComponentForState: [Function: getComponentForState],
         getComponentForRouteName: [Function: getComponentForRouteName],
         getActionCreators: [Function: getActionCreators],
         getStateForAction: [Function: getStateForAction],
         getPathAndParamsForState: [Function: getPathAndParamsForState],
         getActionForPathAndParams: [Function: getActionForPathAndParams],
         getScreenOptions: [Function] },
      navigationOptions: null,
      defaultProps: { theme: 'light' } }

expected result will be like below

  expect(navigation).toHaveBeenCalled() or expect(navigation).toHaveBeenCalledWith("home")

helper.tsx

import { render } from "@testing-library/react-native";

export function renderWithNavigation(
  screen: React.FC<{ readonly navigation: NavigationScreenProp<NavigationRoute> }>,
) {
  const AppNavigationStack = createStackNavigator(
    { ROUTE: { screen } },
    { initialRouteName: "ROUTE" },
  );

  const environment = createMockEnvironment();
  const App = createAppContainer(AppNavigationStack);

  return {
    ...render(
      <ReactRelayContext.Provider value={{ environment, variables: {} }}>
        <App detached />
      </ReactRelayContext.Provider>,
    ),
    environment,
    navigationTestRenderer: App,
  };
}

I'm trying to access a children component function from his parent using references.

I've my parent component :

const Parent: FC = (props) => {
    let childRef = useRef(null);

    const handle = () => {
        childRef.current.customFunction();
    }

    return (
        <Children props1="value" ref={childRef}/>
        <Button onPress={handle}/>
}

And my children component :

interface Props {
    props1: string
}

const Children: FC<Props> = forwardRef((props,ref) => {
    const customFunction = () => {
        console.log("Custom");    
    }

    return <View>props.children</View>
})

I have a typescript error when rendering my children component :

Property 'ref' does not exist on type 'intrinsicAttribute & props & {children?:ReactNode}

Note that I would like to keep any strict type.

We have a huge React Native(60.5) project with typescript that also includes React Native Web. Because of this reason, we also have lots of reusable components which we use them in screens.

Developers started to change components' logic with their needs. But those changes crash other parts of the app. So I want to;

1. Create new project as a component library whose name is CoreComponents
2. Move existing components from our to this CoreComponents library
3. Import this library in our app and use it(like npm package)

i.e.

import x from 'CoreComponents'; 

class App extends Component {
    render () {
        return (
            <x>Hello World!</x>
        )
    }
}

I researched it for 2 days but I couldn't find exact result.

Is it possible to make it?

Restful Info

url: https://www.youtube.com/get_video_info?video_id=${videoId}&el=embedded&ps=default&eurl=&gl=US&hl=en
method: 'GET',
headers: { 'Content-Type': 'text/plain' }

Replaced: ${videoId} = ABEVNHqmbJ4 or YzXi5HpgYGc

I didn't found any stream data on key url_encoded_fmt_stream_map

I am trying to create a class that will fetch / cache users from my Firestore database. For some reason, I can't seem to save or expose the previous promise that was created. Here is my class:

export class UserCache {
  private cacheTimeMilliseconds: number = 600000;
  private userCache: any = {};

  public getCacheUser(userid: string): Promise<User> {
    return new Promise((resolve, reject) => {
      let d = new Date();
      d.setTime(d.getTime() - this.cacheTimeMilliseconds);
      if (this.userCache[userid] && this.userCache[userid].complete && this.userCache[userid].lastAccess > d.getTime()) {
        console.log("User cached");
        resolve(this.userCache[userid].user);
      }

      console.log("Need to cache user");
      this.userCache[userid] = {
        complete: false
      };
      this.getSetUserFetchPromise(userid).then((data) => {
        let user: User = <User>{ id: data.id, ...data.data() };
        this.userCache[userid].user = user;
        this.userCache[userid].complete = true;
        this.userCache[userid].lastAccess = Date.now();
        resolve(user);
      });
    });
  }

  private getSetUserFetchPromise(userid: string): Promise<any> {
    console.log(this.userCache[userid]);
    if (this.userCache[userid] && this.userCache[userid].promise) {
      return this.userCache[userid].promise;
    } else {
      console.log("Creating new user fetch request.");
      this.userCache[userid].promise = firestore().collection('users').doc(userid).get();
      console.log(this.userCache[userid]);
      return this.userCache[userid].promise;
    }
  }
}

Logs: (there are only 2 unique users, so should only be creating 2 new requests)

In the logs I can see that the promise is getting set in getSetUserFetchPromise, but the next time the function is called, the property is no longer set. I suspect it is either a scope or concurrency issue, but I can't seem to get around it.

I am calling getCacheUser in a consuming class with let oCache = new UserCache() and oCache.getCacheUser('USERID')

Edit following Tuan's answer below

UserCacheProvider.ts

import firestore from '@react-native-firebase/firestore';
import { User } from '../static/models';

class UserCache {
  private cacheTimeMilliseconds: number = 600000;
  private userCache: any = {};

  public getCacheUser(userid: string): Promise<User> {
    return new Promise((resolve, reject) => {
      let d = new Date();
      d.setTime(d.getTime() - this.cacheTimeMilliseconds);
      if (this.userCache[userid] && this.userCache[userid].complete && this.userCache[userid].lastAccess > d.getTime()) {
        console.log("User cached");
        resolve(this.userCache[userid].user);
      }

      console.log("Need to cache user");
      this.userCache[userid] = {
        complete: false
      };
      this.getSetUserFetchPromise(userid).then((data) => {
        let user: User = <User>{ id: data.id, ...data.data() };
        this.userCache[userid].user = user;
        this.userCache[userid].complete = true;
        this.userCache[userid].lastAccess = Date.now();
        resolve(user);
      });
    });
  }

  private getSetUserFetchPromise(userid: string): Promise<any> {
    console.log(this.userCache[userid]);
    if (this.userCache[userid] && this.userCache[userid].promise) {
      return this.userCache[userid].promise;
    } else {
      console.log("Creating new user fetch request.");
      this.userCache[userid].promise = firestore().collection('users').doc(userid).get();
      console.log(this.userCache[userid]);
      return this.userCache[userid].promise;
    }
  }
}

const userCache = new UserCache();
export default userCache;

ChatProvider.ts (usage)

let promises = [];

          docs.forEach(doc => {
            let message: Message = <Message>{ id: doc.id, ...doc.data() };

            promises.push(UserCacheProvider.getCacheUser(message.senderid).then((oUser) => {
              let conv: GCMessage = {
                _id: message.id,
                text: message.messagecontent,
                createdAt: new Date(message.messagedate),
                user: <GCUser>{ _id: oUser.id, avatar: oUser.thumbnail, name: oUser.displayname }
              }

              if (message.type && message.type == 'info') {
                conv.system = true;
              }

              if (message.messageattachment && message.messageattachment != '') {
                conv.image = message.messageattachment;
              }

              return conv;
            }));
          });

          Promise.all(promises).then((values) => {
            resolve(values);
          });

I'm trying to test a typescript react-native class using jest but the test is not passing.

This is the class:

import * as React from "react";
import {
  Image,
  KeyboardAvoidingView,
  StyleSheet,
  View
} from "react-native";
import colors from "../config/colors";
import constants from "../config/constants";
import App from "../../App";

interface Props {
  ...
}

interface State {
...
}

class LoginScreen extends React.Component<Props, State> {
 .
 .
 .  
  render() {

    return (
      <KeyboardAvoidingView
        style={styles.container}   
        behavior={constants.IS_IOS ? "padding" : undefined}>
        .
        .
        .
      </KeyboardAvoidingView>
    );
  }
}

const styles = StyleSheet.create({  
  container: {
    flex: 1,
    backgroundColor: colors.WHITE,
    alignItems: "center",
    justifyContent: "space-between"
  }
});

export default LoginScreen

but I'm getting the error:

TypeError: Cannot read property 'container' of undefined

       98 |     return (
       99 |       <KeyboardAvoidingView
    > 100 |         style={styles.container}   
          |                       ^
      101 |         behavior={constants.IS_IOS ? "padding" : undefined}>

The test is this one:

/**
 * @format
 */

import 'react-native';
import React from 'react';
import LoginScreen from '../src/screens/LoginScreen';

// Note: test renderer must be required after react-native.
import * as renderer from 'react-test-renderer';

jest.mock('react-native', () => {
  return { 
    StyleSheet: {
      create: jest.fn()         
    },
    .
    .
    .
  }
});

const createTestProps = (props: Object) => ({
    .
    .
    ...props
  });
  let props = createTestProps({});
it('renders correctly', () => {
    const tree = renderer.create(<LoginScreen {...props}/>).toJSON();
    expect(tree).toMatchSnapshot();
});

As you can see the problem is here:

style={styles.container} 

the method create from the StyleSheet mock returns undefined so when container is called the error happens. How can I fix this?

I am wondering if there is a way to force RealmJS return undefined instead of null on optional fields?

I am asking this, because typescript's optional types is actually T | undefined, not T | null. I don't want to mix up undefined and null.

Thank you.

I am loading form controls dynamically by making 2 api calls. First api to get form control's list and second api to get data for the controls loaded previously. First half works fine and i am able to load controls dynamically,

schema:

[{ id: 1, input: 'TextBox'},
 { id: 2, input: 'TextArea'}]

code:

fields.map((type: any, i: any) => {
  switch (type.input) {
   case 'TextBox':
   return (<input type="text" id={type.id}> />)
   case 'TextArea':
   return (<textarea itemType="text" id={type.id}> />)}});

Above code works fine and I am able to create form controls.

Next part is binding value to the dynamic controls, I make another API call to get data and I should map id field and bind data

schema:

[{ id: 1, value: 'testTextBox'},
 { id: 2, value: 'testTextArea'}]

How can I bind data to the controls now? I have tried using state, but not able to achieve that. or i can update first schema and add value key to it after i get second api response something like below,

 fields = [{ id: 1, input: 'TextBox', value: 'testTextBox'},
     { id: 2, input: 'TextArea', value: 'testTextArea'}]

Please suggest how to loop and add value key to fields array?

noob here.

I have some ReactJs project which is run perfectly on every aspect. But recently I want to make it monorepo and I chose Expo for this job.

I can make most of code works except some custom scripts. It say SyntaxError: Cannot use import statement outside a module and the line of code that lead to this error was node_modules/expo/AppEntry.js which is in the main parameter in package.json.

This is the full log:

$ ts-node -r tsconfig-paths/register --project scripts/helpers/tsconfig.json scripts/customScript.ts
/home/username/Workspace/project/node_modules/expo/AppEntry.js:1
import 'expo/build/Expo.fx';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1050:16)
    at Module._compile (internal/modules/cjs/loader.js:1098:27)
    at Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
    at Object.require.extensions.<computed> [as .js] (/home/username/Workspace/project/node_modules/ts-node/src/index.ts:529:44)
    at Module.load (internal/modules/cjs/loader.js:983:32)
    at Function.Module._load (internal/modules/cjs/loader.js:891:14)
    at Module.require (internal/modules/cjs/loader.js:1023:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/home/username/Workspace/project/scripts/helpers/customScript.ts:2:1)
    at Module._compile (internal/modules/cjs/loader.js:1128:30)
error Command failed with exit code 1.

and this is the content of scripts/helpers/tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "target": "es5",
    "allowJs": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "isolatedModules": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noImplicitThis": false
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

This error not occur on every scripts, just some custom script commands.

I tried to search for solution for hours and tried a bunch of methods with no results. T__T

Note: all error disappear if I remove main field from package.json.

Edit: add note

I'm working on a two-package project using Typescript & React-Native:

PackageA(which is leaf package) contains a REST client and mocks

MyOwnLibrary
- src
  -tests
    _mocks_
      -restClientMock.ts
  -restClient.ts

Right now, I can import stuff using something like 'import { restClient } from 'MyOwnLibrary/lib/tests/_mocks'

But, I want to consume the mocks like import { restClient } from 'MyOwnLibrary/mocks'

Any ideas how to get this done?

I'm building a React Native app using TypeScript. I'm trying to use a SectionList. I followed the docs, and here is my code:

  renderSectionHeader = ({ section: { title } }: { section: { title: string } }) => (
    <ListItem title={title} />
  );

  render() {
    const { sections } = this.props;
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          keyExtractor={this.keyExtractor}
          sections={[
            {title: 'Title1', data: ['item1', 'item2']},
            {title: 'Title2', data: ['item3', 'item4']},
            {title: 'Title3', data: ['item5', 'item6']},
          ]}
          renderItem={this.renderItem}
          renderSectionHeader={this.renderSectionHeader}
        />
      </SafeAreaView>
    );
  }

But the line renderSectionHeader={this.renderSectionHeader} throws the following TSLint Error:

[ts]
Type '({ section: { title } }: { section: { title: string; }; }) => Element' is not assignable to type '(info: { section: SectionListData<any>; }) => ReactElement<any> | null'.
  Types of parameters '__0' and 'info' are incompatible.
    Type '{ section: SectionListData<any>; }' is not assignable to type '{ section: { title: string; }; }'.
      Types of property 'section' are incompatible.
        Type 'SectionListData<any>' is not assignable to type '{ title: string; }'.
          Property 'title' is missing in type 'SectionListData<any>'. [2322]

Are the types of SectionList broken? Or is the example wrong? Or am I doing something wrong?

I have the following two pieces of code:

CustomHeader.tsx

import { View, StyleSheet, Button } from 'react-native';
import { NavigationScreenProps } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';


export  const CustomHeader = ({ navigation }: NavigationScreenProps) => (
    <View style={[styles.container]}>
      <Icon
        name="md-menu"
        size={32}
        color="black"
        style={{ marginLeft: 10 }}
        onPress={() => navigation.openDrawer()}
      />
    </View>
  );

  const styles = StyleSheet.create({
    container: {
      borderBottomWidth: 2,
      height: 70,
      paddingTop: 20,
    },
  });

DetailScreen.tsx

import React from 'react';
import { Text, View, Button, Alert } from 'react-native';
import { NavigationScreenProps } from "react-navigation";
import { CustomHeader } from '../components/Header';

export class ChangeAccountDetailScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <CustomHeader navigation={this.props.navigation} />
        <Text style={{ fontSize: 20 }}>Profile Screen</Text>
      </View>
    );
  }
}

In detailscreen i get the following error:

Property 'navigation' does not exist on type 'Readonly<{}>& Readonly<{ children?: ReactNode; }>'.

I searched for the issue and i understand it has something the fact that i am not declaring a type in my CustomHeader. However i do not know how to solve this. I am kinda new to typescript. Could someone explain to me how to fix this type issue?