I'm having an issue with the onSnapshot method. It won't await for the second onsnapshot call, so the returned value is not correct. The users fetched in the second onsnapshot call, will be showed later in the console log when the value already has returned.

If you prefer an other structure, I am open to any solutions and suggestions!!:)Thank you all.

Console logs: https://imgur.com/a/vhm61nu.png

export const FirebaseGetStrikeLists2 = async (houseId: string) => {    let strikes: StrikeListDocument[] = [];    firestore()        .collection(FirebaseConstraints.HouseCollection)        .doc(houseId)        .collection(FirebaseConstraints.StrikeSubCollection)        .onSnapshot(async x => {            x.forEach(async x => {                const strikeListDocument = x.data() as StrikeListDocument                strikeListDocument.users = []                strikeListDocument.id = x.id;                x.ref.collection(FirebaseConstraints.UserCollection).onSnapshot(                    async x => {                        let strikeListUsers: StrikeListDocumentUser[] = [];                        x.forEach(async y => {                            let userDocument = y.data() as StrikeListDocumentUser;                            strikeListUsers.push(userDocument)                        })                        await Promise.all(strikeListUsers)                        console.log('users found: ', strikeListUsers.length)                        strikeListDocument.users = strikeListUsers                    })                console.log('users set in array: ', strikeListDocument.users.length)                strikes.push(strikeListDocument)            })        })    return strikes;}

My firestore structure looks like this:/houses/{HouseID}/strikelists/{StrikeListID}/users/{UserID}

I am trying to change a button background color when clicked and toggle between list of buttons within the same button list. I ahve been trying this since yesterday and stuck at point where i am not able to proceed further.

More details - I have a page with questions and multiple option for the question and use should only select either of the answer YES/No/NA and that button background should be changed to different color, it works for a single question but for multiple questions i am not understanding which unique value to use to toggle the button color with in the same question.

I have created a snack for it here is an URL - https://snack.expo.io/@jerrypatels/bossy-bagel for some reason the snack is not working as expected on web but works well with mobile view, so request you to try the mobile version.

Now if i click first question YES it changes the color of all questions to YES.

Image how it is working

How i need it to look like

I am looking to see an example of button group something like in the example here https://react-native-elements.github.io/react-native-elements/docs/button_group.html

ButtonGroup created using only React Native component like TouchableOpacity and Text etc...

First of all, I apologize for my bad English.I am using the select component of the UI Kitten. Every item fails when I change it.

This is the mistake;

"Warning cannot update during an existing state react native"

I am sharing sample codes with you.

const data = ["test 1","test 2"];constructor(props) {  super(props);      this.state = {          selectedIndex: new IndexPath(0),     displayValue: null  };    }componentDidMount() {  this._handleSetSelectedIndex = this._handleSetSelectedIndex.bind(this);}_handleSetSelectedIndex(value) {  this.setState({selectedIndex: value});}

in Render function;

<Select  style={{ width: 300 }}  placeholder='Default'  value={data[this.state.selectedIndex.row]}  selectedIndex={this.state.selectedIndex}  onSelect={index => this._handleSetSelectedIndex(index)}>  {data.map((key, value) => {      return (<SelectItem key={value} title={key}/>    );  })}</Select>

After uninstalling the react-native-clii run this command to initiate a RN project with typescript template:

npx react-native init MyApp --template react-native-template-typescript

but i got this error:

warning jest > jest-cli > jest-config > jest-environment-jsdom > jsdom

left-pad@1.3.0: use String.prototype.padStart() error An unexpected error occurred:"https://registry.yarnpkg.com/react-native-template-react-native-template-typescript: Not found".info If you think this is a bug, please open .....
[1/2] Removing module react-native-template-react-native-template-typescript...
error This module isn't specified in a package.json file.
info Visit https://yarnpkg.com/en/docs/cli/remove for documentation about this command. warn Failed to clean up template temp files in node_modules/react-native-template-react-native-template-typescript. This is not a critical error, you can work on your app.
(node:8548) UnhandledPromiseRejectionWarning: Error: Command failed: yarn add react-native-template-react-native-template-typescript

I am using the Video Expo component and noticed that there is a prop playFromPositionAsync.

I saw this on Video.d.ts:

export default class Video extends React.Component<VideoProps, VideoState> implements Playback {  ...  playFromPositionAsync: (positionMillis: number, tolerances?: {        toleranceMillisBefore?: number;        toleranceMillisAfter?: number;  }) => Promise<AVPlaybackStatus>;}

I have this on my code:

import { Video } from 'expo-av';...return data.feed.map((item: DataType, idx: number) => (<Video        key={item.id}        useNativeControls={false}        isMuted={currentIndex !== idx}        source={{ uri: item.video_url }}        shouldPlay={currentIndex === idx}      />)

See this line abive: shouldPlay={currentIndex === idx}

I want to do similar with playFromPositionAsync

<Video playFromPositionAsync={currentIndex === idx && playFromPositionAsync(0)}

Well, that code above doesn't work.

I need to use that prop/function: playFromPositionAsync when currentIndex === idx, so how can I use it?

I saw an example like this: https://github.com/expo/playlist-example/blob/51718bc8bf398bdccda46748e777c294cd40db99/App.js#L404 but the example shows a class based component, and I am using functional/stateless components.

Any ideas?

My code looks like this. Previously, I was rendering and mapping some data using another component called UserList. However, now I have changed it to a FlatList

When I was using {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}, every time I clicked on the button, the handleSubmit function was called successfully.

However, now that I am using FlatList, nothing happens when I click on the button. The handle submit doesn't run and hence I don't see anything from the flatList. What am I doing wrong?

  return (<SafeAreaView><View><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text>              Cancel</Text></View><View><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.input}                      fieldType="input"                      icon="user"                      placeholderText="Email or Phone Number or Name"                    /><ErrorMessage                      name="input"                      render={(msg) => (<Text style={styles.errorText}>{msg}</Text>                      )}                    /></View><View style={styles.buttonContainer}><Button                      rounded                      style={styles.searchButton}                      onPress={handleSubmit}><Text style={styles.searchButtonText}>Search </Text></Button></View></View>              )}</Formik></View>          {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}          {userData !== null && <FlatList            data={userData.users}            horizontal={false}            renderItem={({ item }) => (<SingleUser                user={item}                onSendRequest={onSendRequest}              />            )}            keyExtractor={(item) => item.id.toString()}          />            }</View></View></SafeAreaView>  );};

i'm trying uploading multipart file to backend server using axios in react-native. I'm setting image using array, but i don't know how to transform object Object to object File. back-end server needs File type. How can i do??

expect log: [object File],

result log: [object Object]

My front code is here

//...//   interface ImageFile {   uri: string;   name: string;   type: string;}   const [images, setImages] = useState([] as ImageFile[]);//. using image picker.//   ImagePicker.showImagePicker(options, async (response) => {     if (response.didCancel) {       return;     }     else if (response.error) {       Alert.alert('에러: '+ response.error);     }     else {       //이미지가무사히선택된것       //기존에있던이미지에더해서배열을더해나감       // console.log(response.data);       setImages([...images, { uri: response.uri, name: response.fileName, type: response.type }]);     }     console.log(images);//post code//  async function toPost() {   let post: Post;   try {     post = await Post.create({ content: comment } as Post);   } catch (e) {     console.log(e);     console.log('포스트생성불가')     return;   }   try {     let a = 0     for (let image of images) {       console.log('image[0]: '+ JSON.stringify(image))       console.log('image[1]: '+ image.type)       console.log('test: '+ test)       await post.createMedia(test, 'IMAGE');       a++;     }   } catch (e) {     console.log(e.response.data);     console.log('이미지생성불가')     return;   }   try {     post.status = 'PUBLIC';     await post.save();   } catch (e) {     console.log(e);     console.log('포스트저장불가');     return;   }   console.log(`저장된글: ${post.content}, 이미지개수: ${post.medias.length}`) }

and my api Code

public async createMedia(file, type: PostMediaType) {    const formData = new FormData();    formData.append('file', { uri: file.uri, name: file.name, type: file.type } as File);    const postMedia = new PostMedia((      await getAxios().post(`/posts/${this.id}/${type}s`, formData, { headers: { 'Content-Type': 'multipart/form-data' } })).data);    if (!this.medias) this.medias = await this.getMedias();    else this.medias.push(postMedia);    return postMedia;  }

Previously, I was rendering and mapping some data using another component called UserList. However, now I have changed it to a FlatList

When I was using {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}, every time I clicked on the button, the handleSubmit function was called successfully.

However, now I am using FlatList. Nothing happens when I click on the button. The handle submit does not run and I don't see anything from the flatList. What am I doing wrong?

  return (<SafeAreaView><View><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text>              Cancel</Text></View><View><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.input}                      fieldType="input"                      icon="user"                      placeholderText="Email or Phone Number or Name"                    /><ErrorMessage                      name="input"                      render={(msg) => (<Text style={styles.errorText}>{msg}</Text>                      )}                    /></View><View style={styles.buttonContainer}><Button                      rounded                      style={styles.searchButton}                      onPress={handleSubmit}><Text style={styles.searchButtonText}>Search </Text></Button></View></View>              )}</Formik></View>          {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}          {userData !== null && <FlatList            data={userData.users}            horizontal={false}            renderItem={({ item }) => (<SingleUser                user={item}                onSendRequest={onSendRequest}              />            )}            keyExtractor={(item) => item.id.toString()}          />            }</View></View></SafeAreaView>  );};

UserList.tsx:

export const UserList: React.FunctionComponent<UserProps> = ({  data,  onSendRequest,}) => {  if (!data) return null;  return (<View style={styles.users}>      {data.users.nodes.map(        (item: { firstName: string; lastName: string; id: number }) => {          const userName = item.firstName.concat('').concat(item.lastName);          return (<View style={styles.item} key={item.id}><Thumbnail                style={styles.thumbnail}                source={{                  uri:'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png',                }}></Thumbnail><Text style={styles.userName}>{userName}</Text><View style={styles.addButtonContainer}><Button                  rounded                  style={styles.addButton}                  onPress={() => onSendRequest(Number(item.id))}><Icon name="plus" size={moderateScale(20)} color="black" /></Button></View></View>          );        },      )}</View>  );};

I am using the Video Expo component and noticed that there is a prop playFromPositionAsync.

I saw this on Video.d.ts:

export default class Video extends React.Component<VideoProps, VideoState> implements Playback {  ...  playFromPositionAsync: (positionMillis: number, tolerances?: {        toleranceMillisBefore?: number;        toleranceMillisAfter?: number;  }) => Promise<AVPlaybackStatus>;}

I have this on my code:

import { Video } from 'expo-av';...return data.feed.map((item: DataType, idx: number) => (<Video        key={item.id}        useNativeControls={false}        isMuted={currentIndex !== idx}        source={{ uri: item.video_url }}        shouldPlay={currentIndex === idx}      />)

See this line abive: shouldPlay={currentIndex === idx}

I want to do similar with playFromPositionAsync

<Video playFromPositionAsync={currentIndex === idx && playFromPositionAsync(0)}

Well, that code above doesn't work.

I need to use that prop/function: playFromPositionAsync when currentIndex === idx, so how can I use it?

I saw an example like this: https://github.com/expo/playlist-example/blob/51718bc8bf398bdccda46748e777c294cd40db99/App.js#L404 but the example shows a class based component, and I am using functional/stateless components.

Any ideas?

I have this object that I want to render when an error occurs while running a grapqhl query (on Apollo's onError):

export const ErrorContainer: React.FunctionComponent = () => {  console.log('container running')  return (<View style={styles.errorView}><Text style={styles.errorText}>Unable to Load Friends</Text></View>  );};

Now on my main screen, I tried this:

const { data, error } = useGetMyProfileQuery({  onCompleted: () => {    //setUserData(data)  },  onError: ErrorContainer  },});

I also tried this:

{error && <ErrorContainer />}

return (<SafeAreaView style={styles.safeView}><Container style={styles.container}><Text          style={styles.backText}          onPress={() => navigation.navigate('Home')}>          Zurück</Text><View style={styles.listHolder}>        {data && <FlatList            data={data.me.friends}            horizontal={false}            renderItem={({ item }) => (<Friend                friend={item}                //onDeleteFriend={onDeleteFriend}                originatorId={data.me.id}              />            )}            keyExtractor={(item) => item.id.toString()}            ListEmptyComponent={NoFriendsContainer}          />            }            {error && ErrorContainer}</View></Container></SafeAreaView>  );

but although I see the console logs, i dont see the actual content of the ErrorContainer. How else should I call the component?

TypeScript react native: how to make an HTTPS request

I'm using axios

I am using firestore for a while now, I want to implement a call to get data from a subcollection.

I had to create a asynchronous call and foreach() method did not await the call and continued, but it worked with the for() method. Can someone please explain to me why for() waits and foreach() doesn't?

Foreach() - doesn't work

export const FirebaseSearchUsers = async (search: string) => {  const end = search.replace(/.$/, c => String.fromCharCode(c.charCodeAt(0) + 1));  let users: UserDocument[] = [];  await firestore()    .collection(FirebaseConstraints.UserCollection)    .where('username', '>=', search)    .where('username', '<', end)    .limit(10)    .get()    .then(async x => {      x.forEach(async y => {        let userDocument: UserDocument = y.data() as UserDocument;        userDocument.houseInvites = [];        await y.ref          .collection(FirebaseConstraints.HouseInvitesCollection)          .get()          .then(x => x.forEach(x => userDocument.houseInvites.push(x.data() as HouseInviteDocument)));        users.push(userDocument);      });    });  return users;};

For() -works

export const FirebaseSearchUsers = async (search: string) => {  const end = search.replace(/.$/, c => String.fromCharCode(c.charCodeAt(0) + 1));  let users: UserDocument[] = [];    await firestore()    .collection(FirebaseConstraints.UserCollection)    .where('username', '>=', search)    .where('username', '<', end)    .limit(10)    .get()    .then(async x => {      for (let y of x.docs) {        let userDocument: UserDocument = y.data() as UserDocument;        userDocument.houseInvites = [];        await y.ref          .collection(FirebaseConstraints.HouseInvitesCollection)          .get()          .then(x => x.forEach(x => userDocument.houseInvites.push(x.data() as HouseInviteDocument)));        users.push(userDocument);      }    });  return users;};

I run a graphql query and use the results to render some items. This works fine. Now on another screen, I run another mutation using apollos refetch option, such that whenever that mutation is run, the first query will refetch data every where it is being used. The refetching part works fine and I have tested it on other screens.

However, since I am doing some mappings and use setStates, although I get the new data, it is not passed to the FlatList so the FlatList doesn't get updated. On another screen where I am not doing mappings, I am simply passing data into the FlatList and it works well but here, it doesn't.

So how can I fix this? I tried using useEffectbut I don't know what to write inside it.

export const WhitelistBar: React.FC = () => {  const [friendList, setFriendList] = useState<Friend[]>();  const [originatorId, setOriginatorId] = useState<number>();  useEffect(() => {    //setFriendList(DATA);    //console.log('friendlist', friendList);  }, [useGetMyProfileQuery]);  const _onCompleted = (data) => {    console.log('running', data);    let DATA = data.me.friends.nodes.map(      (item: {        id: number;        firstName: string;        rating: number;        vehicles: Vehicle[];        friends: UserConnection;      }) => ({        id: item.id,        imageUrl: defaultUrl,        name: item.firstName,        rating: item.rating,        vehicles: item.vehicles,        numberOfFriends: item.friends.totalCount,            }),    );    setFriendList(DATA);    console.log('daattaaa', DATA);    setOriginatorId(data.me.id)  };  const _onError = () => {    let DATA = [      {        id: 1,        imageUrl: defaultUrl,        name: 'Friend',      },      {        id: 2,        imageUrl: defaultUrl,        name: 'Friend',      },      {        id: 3,        imageUrl: defaultUrl,        name: 'Friend',      },    ];    setFriendList(DATA);    setOriginatorId(0);  };  const { data } = useGetMyProfileQuery({    onCompleted: _onCompleted,    onError: _onError,  });  return (<View style={scaledStyles.container}><View style={scaledStyles.whiteListBarTitle}><Text style={scaledStyles.whiteListBarText}>Meine Freunde</Text></View><View style={{ flexDirection: 'row' }}><FlatList          showsHorizontalScrollIndicator={false}          data={friendList}          horizontal={true}          renderItem={({ item }) => (<WhitelistItem              title={item.name}              face={item.imageUrl}              numberOfFriends={item.numberOfFriends}              vehicles={item.vehicles}            />          )}          keyExtractor={(item) => item.id.toString()}        /></View></View>  );};

I am trying to run this code on my snack expo:

https://snack.expo.io/@nhammad/graceful-pretzels

but it keeps giving me an error on the export that:

import Icon from 'react-native-vector-icons/FontAwesome';

Cannot find module 'react-native-vector-icons/FontAwesome'.

Same goes for react-native-size-matters. Why can't I use these in my online project? I also tried changing their versions in the package.json but that doesn't help.

I have confusion about React JavaScript , React Typescript and React Native.

I just have idea that we use React Native for mobile applications and and React (Javascript,Typescript) for web applications.

Can someone exactly draw the difference between them ?Which parent library/framework those use ?

Like Angular can we make components,services in them(React JavaScript , React Typescript and React Native).

And when we call simply say React what does it mean (Native , Typescript or Javascript) ?

I have a create-react-app with typescript where I need to work with a lot of data that is currently locally stored as a JSON file inside the app.

Is it better to work straight from that JSON file throughout the app or should I wrap classes around them (if so do i need to store them in an offline db or ?)

I'm still very new with this so forgive me if I made some confusing mistake.

Thanks in advance

I'm trying to pass down to my component a ref but I'm having some problems with typescript types.. If someone could help it will be much appreciated

./Privacy.tsx

const Privacy = () => {

const buttonRef = useRef();return <Button title="test" ref={(ref) => buttonRef = ref}/>

}

./Button.tsx

type Props = {title: string,ref?: What do i need to put here?}

const Button: React.FC = ({ title, ref }) => {

return <View ref={ref} />

}

I'm trying to make a React Native project run in the browser using react-native-web. For that to compile, I had to configure Webpack to use the directories on my project src with aliases, like so:

alias: Object.assign({'react-native$': 'react-native-web','@react-native-community/async-storage': 'react-native-web','react-dom$': 'react-dom/profiling','scheduler/tracing': 'scheduler/tracing-profiling','../components': path.resolve(__dirname, '../src/components/'),'../screens': path.resolve(__dirname, '../src/screens/'),'../utils': path.resolve(__dirname, '../src/utils/'),    // etc})

Without the aliases for the directories of my projects code there, some React Native related node modules raise Module not found errors, like this one:

ERROR in ../node_modules/react-native-screens/src/screens.web.jsModule not found: Error: Can't resolve '../components/purchasableCoursesList' in '/Users/sousa/cfisp_client/node_modules/react-native-screens/src' @ ../node_modules/react-native-screens/src/screens.web.js 30:49-96 @ ../node_modules/@react-navigation/stack/lib/module/views/Screens.js @ ../node_modules/@react-navigation/stack/lib/module/views/Stack/CardStack.js @ ../node_modules/@react-navigation/stack/lib/module/views/Stack/StackView.js @ ../node_modules/@react-navigation/stack/lib/module/index.js @ ../src/App.web.tsx @ ../index.web.ts

With the line '../components': path.resolve(__dirname, '../src/components/'), the error above disappears. However, some of the directories on my project have very generic names, like "utils". Apparently, Webpack is resolving every occurrence of '../utils' in node_modules with my utils directory, which is causing conflicts, like the one revealed by this error:

ERROR in ../node_modules/inline-style-prefixer/lib/plugins/transition.jsModule not found: Error: Can't resolve '../utils/capitalizeString' in '/Users/sousa/cfisp_client/node_modules/inline-style-prefixer/lib/plugins' @ ../node_modules/inline-style-prefixer/lib/plugins/transition.js 16:24-60 @ ../node_modules/react-native-web/dist/modules/prefixStyles/static.js @ ../node_modules/react-native-web/dist/modules/prefixStyles/index.js @ ../node_modules/react-native-web/dist/exports/StyleSheet/compile.js @ ../node_modules/react-native-web/dist/exports/StyleSheet/createStyleResolver.js @ ../node_modules/react-native-web/dist/exports/StyleSheet/styleResolver.js @ ../node_modules/react-native-web/dist/exports/StyleSheet/css.js @ ../node_modules/react-native-web/dist/exports/View/index.js @ ../node_modules/react-native-web/dist/index.js @ ../index.web.ts

The module inline-style-prefixer has a directory 'utils', and it knows where it is. Webpack is confusing it because our project has a directory of the same name for which we need an alias.

Our workaround, for now, is to rename our utils directory to MyProjectName_utils. The problem goes away but that is obviously not a good solution.

I feel like I'm using Webpack/react-native-web wrong here. Any thoughts will be much appreciated!

First, I run a graphql query and then use its results to render some items using the FlatList. This works fine.

On another screen, I run another mutation using apollos refetch option, such that whenever that mutation is successful, the first query will refetch data where ever it is used. The refetching part works fine and I have tested it on other screens. So automatically, the data in WhiteList is updated.

However the friendList is not updated so the FlatList doesn't get updated.

How can I fix this? useEffectcould have been an option but using the custom graphql hook inside it gives me invalid hook call error. What else can I do?

export const WhitelistBar: React.FC = () => {  const [friendList, setFriendList] = useState<Friend[]>();  const [originatorId, setOriginatorId] = useState<number>();  useEffect(() => {    //console.log('friendlist', friendList);  }, [useGetMyProfileQuery]);  const _onCompleted = (data) => {    console.log('running', data);    let DATA = data.me.friends.nodes.map(      (item: {        id: number;        firstName: string;        rating: number;        vehicles: Vehicle[];        friends: UserConnection;      }) => ({        id: item.id,        imageUrl: defaultUrl,        name: item.firstName,        rating: item.rating,        vehicles: item.vehicles,        numberOfFriends: item.friends.totalCount,            }),    );    setFriendList(DATA);    console.log('daattaaa', DATA);    setOriginatorId(data.me.id)  };  const _onError = () => {    let DATA = [      {        id: 1,        imageUrl: defaultUrl,        name: 'Friend',      },      {        id: 2,        imageUrl: defaultUrl,        name: 'Friend',      },      {        id: 3,        imageUrl: defaultUrl,        name: 'Friend',      },    ];    setFriendList(DATA);    setOriginatorId(0);  };  const { data } = useGetMyProfileQuery({    onCompleted: _onCompleted,    onError: _onError,  });  return (<View style={scaledStyles.container}><View style={scaledStyles.whiteListBarTitle}><Text style={scaledStyles.whiteListBarText}>Meine Freunde</Text></View><View style={{ flexDirection: 'row' }}><FlatList          showsHorizontalScrollIndicator={false}          data={friendList}          horizontal={true}          renderItem={({ item }) => (<WhitelistItem              title={item.name}              face={item.imageUrl}              numberOfFriends={item.numberOfFriends}              vehicles={item.vehicles}            />          )}          keyExtractor={(item) => item.id.toString()}        /></View></View>  );};