I am using a custom item which displays an underline on some Android phones. I want to get rid of that underline. I'm trying to use the underlineAndroidProperty and as soon as I save changes, the underline is gone. However, when I navigate to other screens and come back, the changes are no longer applied and the underline is still there. I tested this on multiple screens but somehow the underline exists always. How else can I get rid of the underline?

type SearchInputProps = {  iconName: string;  addressType: string;  textChangeHandler: (fieldName: string, text: string) => void;  handleFocus: (fieldName: string) => void;  userTypedAddress: string;  placeholder: string;};export const SearchInput: React.FunctionComponent<AddressSearchInputProps> = ({  addressType,  iconName,  textChangeHandler,  handleFocus,  userTypedAddress,  placeholder,}) => {  return (<Item rounded style={styles.searchField}><Icon name={iconName} color="#31C283" style={styles.searchIconStyles} /><Input underlineColorAndroid="transparent"        placeholder={placeholder}        onChangeText={(text) => {          textChangeHandler(addressType, text);        }}        autoFocus={true}        onFocus={() => {          handleFocus(addressType);        }}        style={styles.searchText}        value={userTypedAddress}      /></Item>  );};const styles = StyleSheet.create({  searchField: {    backgroundColor: 'white',    width: moderateScale(300, 0.3),    height: verticalScale(40),    marginVertical: moderateScale(3),    borderRadius: verticalScale(10),  },  searchIconStyles: {    fontSize: moderateScale(15),    paddingHorizontal: moderateScale(10, 0.2),    color: '#20CA86',  },  startingSearchIconStyles: {    fontSize: moderateScale(15),    paddingHorizontal: moderateScale(12, 0.5),    color: '#20CA86',  },  searchText: {    fontSize: moderateScale(14),  },});

I am using a Thumbnail. In the iconfinder image, the cross is transparent and takes the background color of the main container.

I want the cross to be white and the surrounding to be black.

export const Screen: React.FunctionComponent = () => {  return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.container}><View style={styles.iconsContainer}><TouchableOpacity          style={styles.cross}><Thumbnail            source={{              uri:'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',            }}          /></TouchableOpacity></View></View></SafeAreaView>  );};export const styles = StyleSheet.create({  safeAreaViewContainer: {    flex: 1,  },  container: {    backgroundColor: '#323443',    flex: 1,  },cross: {    paddingTop: moderateScale(30),    paddingLeft: moderateScale(20),    zIndex: 100,  },});

If I add a background color to cross or the TouchableOpacity, a block of white appears which goes beyond the thumbnail. How else can I achieve this?

If I add a style to the thumbnail itself:

  thumbnail:{    backgroundColor: 'white',  }

I get this, and this is not what I want. I don't want the border outline.

Thumbnail:https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png

I am using a simple input component which shows two underlines in an old Android phone.

<View style={styles.newNameFieldContainer}><Item style={styles.inputItem}><Input               placeholder="Bibliothek"              onChangeText={(text) => setLocationName(text)}              style={styles.inputField}              value={locationName}            /></Item></View>

  newNameFieldContainer: {    alignItems: 'center',    height: moderateScale(80),  },  inputItem: {    width: moderateScale(300, 0.3),    borderBottomColor: 'red'  },  inputField: {    fontSize: moderateScale(14),    //width: moderateScale(300, 0.3),    borderBottomColor: 'transparent',  },

The red line on the bottom is from the Item. while the other black line at top is from the Input. How can I fix this?

I'm a designer with little experience with Firebase, so forgive me if I'm not asking the right question. I recently migrated my React Native app from one Firebase account to another, and now data has stopped being pulled in to the app (but data is being received in Firebase).

The app essentially tracks a users habit (inputted from a user), and on the profile displays info from aggregated data that's a Collection from Firebase.

However, a function that should load the aggregated data within a view gives me an error saying that the data can't be found.

Here's the function that should be pulling the data from Firebase (as far as I can tell).

  // States  const [timeWindowType, setTimeWindowType] = React.useState<TimeWindowTypes>(    defaultWindowType,  );  const [overview, setOverview] = React.useState<OverviewStatisticsModel>(    OverviewStatisticsFactory.empty(defaultWindowType),  );  const [fetched, setFetched] = React.useState<Boolean>(false);  // Compount / Update  React.useEffect(() => {    if (fetched) return;    loadStats();  });  // Fetch  const loadStats = (type: TimeWindowTypes = TimeWindowTypes.weekly) => {    profileService      .getProfileSnapshot()      .then(({snap, ref}) => {        functions()          .httpsCallable('overviewStats')({            profileId: ref.id,          })          .then(async response => {            const {data} = response;            setOverview(data);            setFetched(true);          })          .catch(err => {            Alert.alert('No data has been found', err.message);          });      })      .catch(error => {});  };

I've noticed the .httpsCallable('overviewStats') in the function, but can't see the reference in Firebase. Could that be the cause?

I can share the other models "TimeWindowTypes" and "OverviewStatisticsModel" if it gives better insight into the problem.

Here's some images of the firebase firestore data.

Thanks in advance!

firebase

firebase

I have a custom icon component like this:

type BackArrowProps = {  arrowStyles?: StyleProp<ViewStyle>;  containerStyles?: StyleProp<ViewStyle>;  handleGoBack?: () => void;};export const BackArrow: React.FunctionComponent<BackArrowProps> = ({  arrowStyles,  containerStyles,  handleGoBack,}) => {  return (<View style={[styles.container, containerStyles]}><IconFA        name="arrow-left"        size={moderateScale(20)}        style={[styles.arrow, arrowStyles]}      /></View>  );};const styles = StyleSheet.create({  arrow: { color: 'white' },  container: {    width: moderateScale(300),    marginTop: moderateScale(20),    marginLeft: moderateScale(20),    marginBottom: moderateScale(20),  },});

On one place, I have used it like this and it works ok:

<BackArrow arrowStyles={styles.arrow}></BackArrow> arrow: {    paddingTop: 20,    color: 'black',  },

However, now I am trying to use it in another screen like this but I get an error on arrowStyles if I use it without paddingTop. Why is this so and how can I fix it?

<BackArrow arrowStyles={styles.arrow} containerStyles={styles.arrowContainer} ></BackArrow>  arrow: {    //paddingTop: 0,    color: 'black',  },

If I use it with padding then it works.

Error:

Type '{ color: string; }' is not assignable to type 'StyleProp<ViewStyle>'.  Type '{ color: string; }' is missing the following properties from type 'RecursiveArray<false | ViewStyle | RegisteredStyle<ViewStyle> | null | undefined>': length, pop, push, concat, and 26 more.ts(2322)

Since using typescript makes the code much bigger, does it make the production app bigger?

I have a screen that looks like this:

export const LocationScreen: React.FunctionComponent= () => {  useEffect(() => {    setLocationsFound(locations.addressesFoundList);  }, [locations.addressesFoundList]);  useEffect(() => {    setUserInputAddress('favouritePoint', '');    setLocationName('');    resetLocationsList();  }, [isFocused]); return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.container}><View style={styles.topTextContainer}><BackArrow handleGoBack={handleGoBack}></BackArrow><Text >Alle Lieblingsorts</Text></View><View style={styles.topMiddleContainer}><Text style={styles.topMiddleText}>Neuer Lieblingsort</Text></View><View style={styles.searchFieldContainer}><AddressSearchInput            addressType="favouritePoint"            placeholder="Ort eingeben"          /></View><View style={Platform.OS === 'ios' ? styles.dropdown: styles.androidDropdown}><LocationsFound              addressesFound={locations.addressesFoundList}              chooseLocation={chooseLocation}              parseGeoJsonData={parseGeoJsonData}            /></View></View></SafeAreaView>  );};  dropdown: {    position: 'absolute',    top: moderateScale(152),    zIndex: moderateScale(10),    backgroundColor: '#fff',    flex: 1,    height: '80%',  },

The LocationsFound component is a list like this:

export const LocationsFound: React.FunctionComponent<LocationsFoundProps> = ({  addressesFound,  chooseLocation,}) => {  const [keyboardHeight, setKeyboardHeight] = useState(0);useEffect(() => {  Keyboard.addListener("keyboardDidShow", _keyboardDidShow);  return () => {    Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);  };}, []);const _keyboardDidShow = (e: { endCoordinates: { height: React.SetStateAction<number>; }; }) => {  setKeyboardHeight(e.endCoordinates.height)};  const handleLocationSelection = (addressDetails: addressDetailsType) => {    Keyboard.dismiss();    const parsedaddressDetails = parseGeoJsonData(addressDetails);    chooseLocation(parsedaddressDetails);  };  return (<>      {addressesFound.length > 0 && (<View  style={{          ...styles.scrollViewWrapper,          paddingBottom: 1.3 * keyboardHeight,        }}><ScrollView           style={styles.searchResultsContainer}          keyboardShouldPersistTaps={'always'}          keyboardDismissMode={'on-drag'}>          {addressesFound.map((addressDetails: addressDetailsType) => {            return (<View                key={addressDetails.placeName}                style={styles.resultContainer}><Text>                  {addressDetails.placeName}</Text></View>            );          })}</ScrollView></View>      )}</>  );};const styles = StyleSheet.create({  scrollViewWrapper: {    width: '100%',    minHeight: '100%',  },  searchResultsContainer: {    width: moderateScale(400),    paddingHorizontal: moderateScale(50),    paddingRight: moderateScale(65),    marginTop: moderateScale(10),    flex: 1,  },  resultContainer: {    marginTop: moderateScale(10),    borderBottomWidth: 1,    borderBottomColor: 'grey',  },});

The first time when I visit my screen the length of the locationsList is wrong so I am unable to scroll through the list. However, when I navigate Back, and come again, the list is displayed properly and I can scroll through it too. Why doesnt it work on the first attempt and how can I fix it?

For the sake of handeling infinite scroll, I created a function that add conditions to the query according to the desired behavior:

  const queryDocs = async (behavior: string = 'start', limit: number = 25) => {    let augmentedQuery: Query<DocumentData> | CollectionReference<DocumentData> = query    try {      if (behavior === 'start' || behavior === 'limited') {        augmentedQuery = augmentedQuery.limit(limit)      }      if (behavior === 'next'&& lastItem) {        augmentedQuery = augmentedQuery.limit(limit).startAfter(lastItem)      }      const snapshot = await augmentedQuery.get()      if (behavior === 'start' || behavior === 'next') {        setLastItem(snapshot.docs[snapshot.docs.length - 1])      }      return snapshot    } catch (error) {      throw functionError(error, 'queryDocs', [behavior, limit], 'useCollection')    }  }

I get the following error:

on queryData("start",1) in module useCollection: Attempted to assign to readonly property.

Can we take take a previous query and add a .where or .limit?

Is there a solution to handle conditional queries?

Thanks

Edit: As Doug stated in the discussion, it is perfectly possible to chain queries like this. The error comes from another source. This code was into a shared package that was recompiled from TypeScript to ES6 and then used in React Native. After merging all the code into the React Native directory the error changed. I had a request to create a composite index with the link to do so, what is quite straightforward.

I can't decide if I should stick to React Native Text components or Native base text components n my project. Is there an advantage of one over the other?

Are there more use cases of one than the other?

I'm currently working on an app using react native and redux. Now I want to add tracking of the events that are happening and I've made an async function trackUserEvent(category:string, action:string, data:any) for tracking that I want to be called every-time a user-interaction happens (eg button press, new screen, select/unselect etc). Is there a way of implementing this for all components at once instead of having to add it manually at every place in the project code?

I have settled a monorepo with Lerna and Yarn Workspaces with this structure:

project| - packages    | - ReactNativeApp    | - NextJsApp    | - FirebaseCloudFunctions    | - Common         | - src > source TypeScript        | - lib > compiled TypeScript > published to npm for reuse by cloud functions in Firebase    | - AppsCommon        | - src > source TypeScript        | - lib > compiled TypeScript

I have several issues. One being React Native not resolving symlinks, the other being errors messages from Firebase altered when transmited fom React Native Firebase to AppsCommon to ReactNativeApp, while it does not happen if I copy AppsCommon source TypeScript in ReactNativeApp.

I think I need to get ride of Yarn Workspaces because symlinks are not managed well by React Native, making it extremly complicated to manage. As far as I understand it can be achieved by this?

// replaceimport { function } from '@project/appsCommon'// by:import { function } from '../../appsCommons'

I also tried to replace lib by src in the package.json and tsconfig.json, in order to make it an uncompiled TypeScript package, but it did not resolve.

Then, with Lerna, I tried to import directly the src folder of the other packages. What could go wrong ?

import { function } from '../../../common/src'

Maybe in React Native something like:

FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':app:mergeDexDebug'.> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade> java.nio.file.NoSuchFileException: C:\code\Experimental\monorepo\packages\mobile\android\common\build\intermediates\external_file_lib_dex_archives\debug\out

Yeah... There is no android files in Common, this is normal because they are in ReactNativeApp... Why are you searching it here React Native ???

Is there a method to create uncompiled TypeScript packages? Or a simple method to handle this use case?

I am using Native Base Text in 2 different components. In this one by default, the Text is shown in uppercase, unless I add uppercase={false}.

export const ActionButton: React.FunctionComponent<ActionButtonProps> = ({  style,  disabled,  buttonText,  onPress,}) => {  return (<Button rounded onPress={onPress} disabled={disabled} style={[styles.button, style]}><Text uppercase={false} style={styles.text}>{buttonText}</Text></Button>  );};const styles = StyleSheet.create({  button: {    width: moderateScale(160),    height: moderateScale(50),    backgroundColor: '#31C283',    justifyContent: 'center',  },  text: { color: 'white', fontSize: moderateScale(13, 0.7), fontWeight:'600' },});

However, in the following component, text is lowercase, even without using uppercase=false. Why is it different in the two components? What am I doing wrong?

export const TripOptionsSelector: React.FunctionComponent = () => {  const navigation = useNavigation();  return (<View style={styles.offerContainer}><Text style={styles.offerText}>Jetzt</Text><Text style={styles.offerText}>1 Person</Text><Text style={styles.offerText} onPress={()=>navigation.navigate('TripFilter')}>Filter</Text></View>  );};const styles = StyleSheet.create({  offerContainer: {    flexDirection: 'row',  },  offerText: {    color: 'white',    marginRight: moderateScale(20),    paddingHorizontal: 10,    fontSize: moderateScale(14),    borderColor: 'white',    borderWidth: 1,    borderRadius: 10,    alignItems: 'center',    justifyContent: 'center',  },});

Codesandbox: https://snack.expo.io/@nhammad/trusting-hummus

I have a Formik form where I take user input input & run a query after submitting. When the query returns some data, I render a list accordingly.

When I see the list, the keyboard is not hidden automatically.

I added Keyboard.dismiss() to my handleSubmit. However, this causes the formik error to show up immediately after the form is submitted and data is returned/rendered. For instance, the error suggests that the input field should not be empty. The error should only show up when we are trying to resubmit the form without an input. Right now, only the list should be rendered. Why is the keyboard interfering in this?

export const AddFriendScreen: React.FunctionComponent = () => {  const initialValues: FormValues = {    input: '',  };  const [showFlatList, setShowFlatList] = useState<UsersLazyQueryHookResult>('',  );  const [loadUsers, { data }] = useUsersLazyQuery({    onCompleted: () => {      setShowFlatList(data);      Keyboard.dismiss();    },  });  const handleSubmitForm = (    values: FormValues,    helpers: FormikHelpers<FormValues>,  ) => {    loadUsers({      variables: {        where: {          OR: [            { phoneNumber: newPhoneNumber },],        },      },    });    helpers.resetForm(); };  return (<SafeAreaView style={styles.safeAreaViewContainer}><View style={styles.searchTopContainer}><View style={styles.formContainer}><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="E-Mail oder Telefonnummer oder Name"                  /><ErrorMessage                    name="input"                    render={(msg) => <ErrorText errorMessage={msg} />}                  /></View><View style={styles.buttonContainer}><ActionButton buttonText="Suchen" onPress={handleSubmit} /></View></View>            )}</Formik></View><View style={styles.listHolder}>          {data && showFlatList !== null && (<UsersFoundList              data={data}/>          )}</View></View></SafeAreaView>  );};

Snack Expo:

https://snack.expo.io/@nhammad/jealous-beef-jerky

Problem

I'm trying to use patch-package to patch a react-native package react-native-tab-view, however when I edit the TSX files included in the node_module for react-native-tab-view and apply my patch, the changes are not reflected in my app.

Structure of node_modules/react-native-tab-view

Below is a screenshot of the package structure.Package Structure

They also uses @react-native-community/bob to build the package prior to publishing so it generates a lib folder with a module folder and commonjs folder containing JS files.

My current stats

My patch is being created, however the files in /lib/module don't change and the changes are also not reflected in my app when running on the simulator

I'm trying to apply a patch using patch-package after editing the TSX files in /src as opposed to the JS files in module /lib/module as it is much simpler to implement.

Environmentreact-native 0.63.0patch-package 6.2.0react-native-tab-view 2.15.1react-native-gesture-handler 1.5.6react-native-reanimated 1.7.0

QuestionAm I missing a build or compile step to get react-native-tab-view to generate new JS files from the TSX files I created my patch for?

Any help would be greatly appreciated!

im working on a project that i used the mongodb, so i started the database and used the docker, every configuration are ok, but whe i put the command "yarn typeorm migration:run" it get done, but dont create the tables with all the migrations in my project, anyone can help me with this?

my ormconfig looks like thisenter image description here

that's how the console become when i use the commenter image description here

TL; DR

I need to use an High Order Component that can infer type for FlatList.

e.g.

<CustomFlatList<MyObject> // props/>

explanations:

I decided to create a component with custom injected Props into any FlatLists of my app.

I thought an High Order Component was best suited to the situation.

interface InjectedProps {  customProps: any;}export const withCustomProps = <T extends object>(Component: React.ComponentType<T>): React.FC<T & InjectedProps> => ({   customProps,   ...props }: InjectedProps) => {   // a bit of more logic   return <Component {...(props as T)} />; };export const CustomFlatList = withCustomProps(FlatList);

But, not really: everything works fine, excepted with typescript. When I try to strongly type my FlatList in order to infer the other props methods (such as renderItem) I`ve got an error:

<CustomFlatList // works// props/>Expected 0 type arguments, but got 1.ts<CustomFlatList<MyObject> // error// props/>

For now, I have no choice but to use any for the rendering method definition.

renderItem={ ({ item }: { item: any }) => {//whatever} }

I also tried to mimic the syntax of FlatList -- using two nested generic types (T and ItemT)

// React definition of FlatListexport class FlatList<ItemT = any> extends React.Component<FlatListProps<ItemT>>

// My buggy codeexport const withCustomProps = <T extends object, ItemT>(Component: React.ComponentType<T<ItemT>>): React.FC<T & InjectedProps> => ({  customProps,  ...props}: InjectedProps) => {  return <Component {...(props as T)} />;};export const CustomFlatList = withCustomProps(FlatList);

But I've got yet another typescript error:

Type 'T' is not generic.

What can I do better?

For a project (react-nativeredux app) we would like to add tracking of user interactions. For example, tracking every toggle/button press. To do this, we have an async function that talks to an endpoint to log the information. I was wondering if there is a way of doing this in a generic way without implementing too much code. Our current solution is redux specific and thus we miss out on events that do not trigger a redux action (eg a button that doesn't do anything). Is there a way (without redux) to track user actions at component level, without having to manually call the function in the every components code?

A suggestion we got is to create a parent component (eq parent button for all buttons), that has built-in the tracking functionality. Is this something that could work, how would the implementation of this look?

In my Formik form, when I click on the search button, a list of items is rendered (UsersFoundList). This list is outside the form and each item in the list has a button of its own.

When I click on any of those buttons from the list for the first time, they don't work. Instead, the handleBlur of my form is triggered and since the input field is empty, an error messages starts showing under the input field. So, the button doesn't do what it's supposed to do in the first attempt. I tested the handleBlur by writing a console log into it.

This error should only show up when I am trying to submit the form again. Not when I click on anything else.

const [showFlatList, setShowFlatList] = useState(false);    const handleSubmitForm = (    values: FormValues,    helpers: FormikHelpers<FormValues>,  ) => {    console.log('hello', values.input)    setShowFlatList(true);    helpers.resetForm();  };  return (<View style={styles.container}><View ><Formik            initialValues={initialValues}            onSubmit={handleSubmitForm}            validationSchema={addRelationValidationSchema}>            {({ 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="E-Mail oder Telefonnummer oder Name"                  /><ErrorMessage                    name="input"                    render={(msg) => <ErrorText errorMessage={msg} />}                  /></View><View style={styles.buttonContainer}><NewButton buttonText="Suchen" onPress={handleSubmit} /></View></View>            )}</Formik></View><View style={styles.listHolder}>          {showFlatList && (<UsersFoundList/>          )}</View></View>  );

If you run the codesandbox on a phone, you can see the problem:

https://snack.expo.io/@nhammad/jealous-beef-jerky

I need to stop the handleBlur from doing anything. If I click on the a button from the list, it should work on the very first attempt instead of triggering the handleBlur. The problem still exists even if I add validateOnBlur=false. In this case, the error message doesn't show up but the button still doesn't work on the first attempt.

The button that I click has a separate function. and this button is outside the form so it should do what it's originally supposed to do instead of doing anything in the onBlur(in the sandbox: it's just printing).

I have a typescript function that is responsible for fetching data from the NASA api using the React Native fetch function and returning a custom object that has type Item[]. The issue is that the returned object from this function is always [].The responseData.collection.items worked when originally setting a state variable of type Item[] to it so it is not a mapping issue.

However, I would like this to be a separate typescript function outside of any React components so I cannot use state.

What is the correct way of accessing the fetched JSON response data in typescript without using React Native state?

import { Item } from "../types/data"export function fetchData(searchTerm: string): Item[] {let result: Item[] = []fetch(`https://images-api.nasa.gov/search? q=${searchTerm}&media_type=image`)            .then(response => response.json())            .then((responseData) => {              result = responseData.collection.items            })            .catch((error) => {              console.error(error);            })            return result }

Getting some data from a hardware device via bluetooth in every 10 milliseconds. Performing some heavy task like merging data, parsing, building list and setting into state to show data into table and graph.

The issue is UI is freezing while receiving data from bluetooth. Not able to perform touch in UI but data is rendering in UI.

BluetoothService.getInstance().monitorRecord((record: Record) => {// This is a callback calling in every 10 milliseconds            //setting record into state, setting record into state is taking 100+ milliseconds            setRecord(record);            // Preparing suitable data fro graph this is taking 2 milliseconds            prepareDataFroGraph(record);            //building list of record this will taking 2 milliseconds            recordData(record);        }, TransactionId.MONITOR_RECORD)