#StackBounty: #javascript #ios #react-native #push-notification #react-native-push-notification React Native – Clear previous push noti…

Bounty: 50

I’m using react-native-push-notification for scheduling and generating local push notifications in React Native and I’m trying to clear previously received notification on receiving any scheduled notification or auto remove currently received notification after sometime but I can’t find any way to achieve it on iOS. One way is to use timeoutAfter property provided by the library which is for android only. For iOS, other way is to use PushNotificationIOS.removeAllDeliveredNotifications() if I can call any method on receiving local notification but onNotification() doesn’t trigger on receiving local notification. It only triggers when receiving or tapping remote notification or tapping local notification. Is there any other way or any other library to achieve this? This is my code for scheduling local notifications:

PushNotification.localNotificationSchedule({
    channelId: 'channelId',
    id,
    message: '...',
    timeoutAfter: 10000,
    soundName: 'default',
});

notification config:

PushNotification.configure({
    onRegister: function (token) {
        console.log('TOKEN:', token);
    },
    onNotification: function (notification) {
        console.log('NOTIFICATION:', notification);
    },
    onAction: function (notification) {
        console.log('ACTION:', notification.action);
        console.log('NOTIFICATION:', notification);
        // process the action
    },
    onRegistrationError: function (err) {
        console.error(err.message, err);
    },
    permissions: {
        alert: true,
        badge: true,
        sound: true,
    },
    popInitialNotification: true,
    requestPermissions: Platform.OS === OS.IOS,
});


Get this bounty!!!

#StackBounty: #php #react-native #http-headers #x-sendfile Why am I receiving an HTTP 412 status error in React Native on subsequent do…

Bounty: 500

I have created a React Native App that allows me to download Zip packages to my app. In most cases it has worked, I can download the zip package, delete a zip package, and re-download it again. However, with one of my zip files I am encountering the following issue:

  1. I download and install the zip package
  2. I delete the zip package
  3. I try to download it again, but this time I get a 412 error.

No matter how many times I try to download it again it will not let me. To overcome this issue I then do the following:

  1. Replace the zip file on the server with one of the other zip files
  2. It now downloads just fine
  3. I delete the package from app
  4. I replace the zip file on the server with the original one
  5. I can now download the zip package just fine

This works one time, but if I delete it and try to install it again, then again it will not let me.

I have also tried the other way around in which case I replace one of the other zip files with the problem zip file. Again, it lets me download it once, but then if I want to download it subsequent times it does not let me.

Why am I having this problem with this zip file? The zip files were made all the same way and there seems to be no issues with it the first time it is downloaded.

At first I was thinking it was a caching issue, but then why would the issue only be with this one specific file?

The zip file was programmably created through PHP. However, I also manually created it from the command prompt and the issue still exists.

My code:

let response = await RNFetchBlob.config({
  path: temp_file,
})
  .fetch(
    "POST",
    "https://example.com/apptools/getZipPack.php",
    {
      "Accept": "application/json",
      "Content-Type": "application/json",
    },
    JSON.stringify({
      passcode: passcode,
      group_id: group_id,
      file: group.zp,
    })
  )
  .progress((received, total) => {
    console.log("progress", received / total);
    this.setState({
      progress_num: (received / total) * 100,
    });
  });

The response I receive back:

{"array": [Function anonymous], "base64": [Function anonymous],
"blob": [Function anonymous], "data":
"/Users/MyUserName/Library/Developer/CoreSimulator/Devices/940349C9-94F7-4EC7-95AC-31034876935D/data/Containers/Data/Application/C79E45D8-4D56-4BF9-9C2B-8846C58DE4F9/Documents/temp/45.zip",
"flush": [Function anonymous], "info": [Function anonymous], "json":
[Function anonymous], "path": [Function anonymous], "readFile":
[Function anonymous], "readStream": [Function anonymous], "respInfo":
{"headers": {"Connection": "Keep-Alive", "Content-Disposition":
"attachment; filename="45_1.0.8_105.zip"", "Content-Length": "0",
"Content-Type": "application/octet-stream", "Date": "Thu, 17 Sep 2020
19:28:09 GMT", "Etag": ""75cf8-5af85fff34576"", "Keep-Alive":
"timeout=3, max=100", "Last-Modified": "Thu, 17 Sep 2020 17:49:03
GMT", "Server": "Apache/2.4.25 (Debian)"}, "redirects":
["https://example.com/apptools/getZipPack.php"], "respType": "blob",
"rnfbEncode": "path", "state": "2", "status": 412, "taskId":
"k4zitpcob29hhrzk245n5n", "timeout": false}, "session": [Function
anonymous], "taskId": "k4zitpcob29hhrzk245n5n", "text": [Function
anonymous], "type": "path"}

Notice that the Content Length is 0 and the Status is 412.

A zip file is placed in the directory that I created for it, but it has a size of 0 bytes.

The pertinent part in the backend script (PHP) is :

header("X-Sendfile: $full_path");
header("Content-type: application/octet-stream");
header('Content-Disposition: attachment; filename="' . basename($file) . '"');

The PHP script can indeed find the file in the filesystem. However, I am not sure whether it is the server or the app that seems to be at fault. My guess is that it is with the app. My first assumption was that it had something to do with caching, but then why is it only affecting this one file and not any other files?

Why am I experiencing this problem and how can I fix it?


Get this bounty!!!

#StackBounty: #react-native #react-native-ios react native ios – no such file or directory: /xxx/appName/ios/RnDiffApp/

Bounty: 50

I have been building a react native app using android only.
Ive now managed to get hold of a mac so i can start testing app on ios.
I uploaded project to github from my windows computer….then downloaded to my mac.

Im trying to build app using Xcode….however Im getting the 2 errors below:

No such file or directory: /xxx/myAppName/ios/RnDiffApp/main.m
No such file or directory: /xxx/myAppName/ios/RnDiffApp/AppDelegate.m

Interesting thing is that I see no folder called RnDiffApp in path /xxx/myAppName/ios/…..however I do the see the 2 files mentioned at the following paths:

/xxx/myAppName/ios/myAppName/main.m
/xxx/myAppName/ios/myAppName/AppDelegate.m

…so in summary, the 2 "missing" files are indeed present….however they are in the folder path /xxx/myAppName/ios/myAppName/….instead of path /xxx/myAppName/ios/RnDiffApp/, which apparently is where build tool is looking for them

Although interestingly, the folder path structure looks different in Finder (see below)….to what is does in Xcode Project navigator (further below). App is called xs

enter image description here

enter image description here

Can anyone help?


Get this bounty!!!

#StackBounty: #react-native #react-navigation-v5 How to add components above createMaterialTopTabNavigator?

Bounty: 50

Following is my createMaterialTopTabNavigator

<Tab.Navigator
      lazy={true}
      tabBarOptions={{
        activeTintColor: "#9e39ff",
        inactiveTintColor: "#4b5358",
        showLabel: true,
        showIcon: true,
        tabStyle: {
          flexDirection: "row",
        },
      }}
    >
      <Tab.Screen
        name={CHAT_MATCH_SCREEN}
        component={ChatMatchScreen}
        options={{
          tabBarIcon: ({ focused }) => (
            <Image
              source={focused ? MATCHES_SELECTED_ICON : MATCHES_UNSELECTED_ICON}
            />
          ),
        }}
      />....

Now I need to add some Text,Button above createMaterialTopTabNavigator and after that show the createMaterialTopTabNavigator.

I tried adding createMaterialTopTabNavigator component in my own screen but it is not visible. I also tried adding the components above Tab.Navigator but they won’t work


Get this bounty!!!

#StackBounty: #android #xml #react-native #react-native-android #splash-screen Android unique splash screen : how to make it fill screen?

Bounty: 100

I have a unique splash screen, called splash.png and sized 1280×1280, 150dpi
I use react-native-bootsplash in my React Native project, but I don’t think it really matters.

My question is simple : how can I make my splash screen, in portrait mode, be full height, not less, not more, and keep its aspect ratio so that the picture fills the screen.
Like a background-size: cover in css.
Or like an easy <Image resizeMode="cover" style={{ height: '100%' }} /> in React Native.

So I have :

android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>

    <!-- BootTheme should inherit from AppTheme -->
    <style name="BootTheme" parent="AppTheme">
        <!-- set the generated bootsplash.xml drawable as activity background -->
        <item name="android:windowBackground">@drawable/bootsplash</item>
        <item name="android:windowNoTitle">true</item>
    </style>

</resources>

android/app/src/main/res/drawable/bootsplash.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
    <item>
      <!-- your logo, centered horizontally and vertically -->
      <bitmap
        android:layout_height="fill_parent"
        android:src="@drawable/splash"
        android:scaleType="centerInside"
        android:gravity="center" />
    </item>
</layer-list>

And my splash.png in android/app/src/main/res/drawable/splash.png

I tried a lot of things, a lot of combinations of android:layout_height, android:scaleType and all, and I always end-up with a splash image’s height overflowing the screen height.

[EDIT]
Here is the splash original image, with the size reduced enough to have a small size for stackoverflow

splash original image

and here is what it give on screen…

stretched screen image


Get this bounty!!!

#StackBounty: #react-native #firebase-storage #react-native-firebase React Native Firebase Storage – getting error when trying to save …

Bounty: 50

I am trying to save a local image from the phone to firebase storage but am getting the following error.

Permission Denial: reading com.google.android.apps.photos.contentprovider/........uid=XXXXX requires the provider be exported, or grantUriPermission()

See below code.
await imageRef.putFile(localUri, {contentType: 'image/jpg'}); is where the issue is occuring

const uploadImageAndGetUrl = async (localUri, firebasePath) => {
  try {
    const imageRef = storage().ref(firebasePath);
    await imageRef.putFile(localUri, {contentType: 'image/jpg'});
    const url = await imageRef.getDownloadURL();
    return url;
  } catch (err) {
    Alert.alert('Profile.js.....Error getting image url from FB', err);
  }
};

Manifest is as follows:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name = "android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 


Get this bounty!!!

#StackBounty: #javascript #reactjs #react-native #graphql #formik Button Disables After Running Query Once

Bounty: 50

I have a screen where the user inputs a phone number. I run a graphql query loadUsers according to the input and then display the search results via the showUsersfunction. It works fine on the first time. I get the results. However, after that, when the results are conditionally rendered, the search button becomes disabled. So if I want to type in a different phone number and hit the search button again, I can’t do this. Unless I exit the screen and then come back. How can I fix this?

Here’s what my code looks like:

export const AddContactTry: React.FunctionComponent = () => {
  const initialValues: FormValues = {
    phoneNumber: '',
  };

  const [isSubmitted, setIsSubmitted] = useState(false);
  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');
  const navigation = useNavigation();
  const validationSchema = phoneNumberValidationSchema;

  const [
    createUserRelationMutation,
    {
      data: addingContactData,
      loading: addingContactLoading,
      error: addingContactError,
      called: isMutationCalled,
    },
  ] = useCreateUserRelationMutation({
    onCompleted: () => {
      Alert.alert('Contact Added');
    },
  });

  const showUsers = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        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={() => {
                          addContact(Number(item.id));
                          setIsSubmitted(false);
                          setUserData(null);
                        }}>
                        <Icon
                          name="plus"
                          size={moderateScale(20)}
                          color="black"
                        />
                      </Button>
                    </View>
                  </View>
                );
              },
            )}
          </View>
        );
      }
    },
    [createUserRelationMutation, userData],
  );

  const addContact = React.useCallback(
    (id: Number) => {
      console.log('Whats the Id', id);
      createUserRelationMutation({
        variables: {
          input: { relatedUserId: id, type: RelationType.Contact, userId: 30 },
        },
      });
    },
    [createUserRelationMutation],
  );

  const getContactId = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        if (data.users.nodes.length == 0) {
          Alert.alert('No User Found');
        } else {
          setUserData(data);
        }
      }
    },
    [addContact],
  );

  const [loadUsers] = useUsersLazyQuery({
    onCompleted: getContactId,
    onError: _onLoadUserError,
  });

  const handleSubmitForm = React.useCallback(
    (values: FormValues, helpers: FormikHelpers<FormValues>) => {
      setIsSubmitted(true);
      const plusSign = '+';
      const newPhoneNumber = plusSign.concat(values.phoneNumber);
      loadUsers({
        variables: {
          where: { phoneNumber: newPhoneNumber },
        },
      });
      values.phoneNumber = '';
    },
    [loadUsers],
  );

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.searchTopContainer}>
          <View style={styles.searchTopTextContainer}>
          </View>
          <View>
            <Formik
              initialValues={initialValues}
              onSubmit={handleSubmitForm}
              validationSchema={validationSchema}
              >
              {({ handleChange, handleBlur, handleSubmit, values, isValid, dirty }) => (
                <View style={styles.searchFieldContainer}>
                  <View style={styles.form}>
                    <FieldInput style={styles.fieldInput}
                      handleChange={handleChange}
                      handleBlur={handleBlur}
                      value={values.phoneNumber}
                      fieldType="phoneNumber"
                      icon="phone"
                      placeholderText="49152901820"
                    />
                    <ErrorMessage
                      name="phoneNumber"
                      render={(msg) => (
                        <Text style={styles.errorText}>{msg}</Text>
                      )}
                    />
                  </View>
                  <View style={styles.buttonContainer}>
                  <Text>Abbrechen</Text>
                </Button>
                <Button
                  block
                  success
                  disabled={!isValid || !dirty}
                  onPress={handleSubmit}
                  style={styles.button}>
                  <Text>Speichern</Text>
                </Button>
                  </View>
                </View>
              )}
            </Formik>
          </View>
          {isSubmitted && showUsers(userData)}
        </View>
      </View>
    </SafeAreaView>
  );
};

Edit:

As suggested in comments, I tried using useFormik instead of but couldn’t make that work.

export const AddContactTry: React.FunctionComponent = () => {
  const { values, handleChange, handleSubmit, dirty, handleBlur, isValid}= useFormik({
    initialValues: {
      phoneNumber: '',
    },
    onSubmit: values => {
      handleSubmitForm(values);
    },
  });

  const [isSubmitted, setIsSubmitted] = useState(false);
  const [userData, setUserData] = useState<UsersLazyQueryHookResult>('');
  const navigation = useNavigation();
  const validationSchema = phoneNumberValidationSchema;

  const [
    createUserRelationMutation,
    {
      data: addingContactData,
      loading: addingContactLoading,
      error: addingContactError,
      called: isMutationCalled,
    },
  ] = useCreateUserRelationMutation({
    onCompleted: () => {
      Alert.alert('Contact Added');
    },
  });

  const showUsers = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        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={() => {
                          addContact(Number(item.id));
                          setIsSubmitted(false);
                          setUserData(null);
                        }}>
                        <Icon
                          name="plus"
                          size={moderateScale(20)}
                          color="black"
                        />
                      </Button>
                    </View>
                  </View>
                );
              },
            )}
          </View>
        );
      }
    },
    [createUserRelationMutation, userData],
  );

  const addContact = React.useCallback(
    (id: Number) => {
      console.log('Whats the Id', id);
      createUserRelationMutation({
        variables: {
          input: { relatedUserId: id, type: RelationType.Contact, userId: 30 },
        },
      });
    },
    [createUserRelationMutation],
  );

  const getContactId = React.useCallback(
    (data: UsersLazyQueryHookResult) => {
      if (data) {
        if (data.users.nodes.length == 0) {
          Alert.alert('No User Found');
        } else {
          setUserData(data);
        }
      }
    },
    [addContact],
  );

  const [loadUsers] = useUsersLazyQuery({
    onCompleted: getContactId,
    onError: _onLoadUserError,
  });

  const handleSubmitForm = React.useCallback(
    (values: FormValues) => {
      setIsSubmitted(true);
      const plusSign = '+';
      const newPhoneNumber = plusSign.concat(values.phoneNumber);
      console.log('Submitted');
      loadUsers({
        variables: {
          where: { phoneNumber: newPhoneNumber },
        },
      });
      values.phoneNumber = '';
    },
    [loadUsers],
  );

return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.searchTopContainer}>
          <View style={styles.searchTopTextContainer}>
          </View>
          <View>
                <View style={styles.searchFieldContainer}>
                  <View style={styles.form}>
                    {/* <FieldInput style={styles.fieldInput}
                      handleChange={handleChange}
                      handleBlur={Formik.handleBlur}
                      value={Formik.values.phoneNumber}
                      fieldType="phoneNumber"
                      icon="phone"
                      placeholderText="49152901820"
                    /> */}
                     <Input style={styles.fieldInput}
                      onChangeText={handleChange('phoneNumber') as (text: string) => void}
                      onBlur={handleBlur('phoneNumber') as (event: any) => void}
                      value={values.phoneNumber}
                      //name="phoneNumber"
                      //fieldType="phoneNumber"
                      //icon="phone"
                      placeholder="49152901820"
                    />
                    <ErrorMessage
                      name="phoneNumber"
                      render={(msg) => (
                        <Text style={styles.errorText}>{msg}</Text>
                      )}
                    />
                  </View>
                  <View style={styles.buttonContainer}>
                <Button
                  block
                  success
                  disabled={!isValid || !dirty}
                  onPress={handleSubmit}
                  style={styles.button}>
                  <Text>Speichern</Text>
                </Button>
                  </View>
                </View>
          </View>
          {isSubmitted && showUsers(userData)}
        </View>
      </View>
    </SafeAreaView>
  );
};


Get this bounty!!!

#StackBounty: #reactjs #react-native #animation #react-native-animatable react-native make status bar 'barStyle' animatable

Bounty: 50

I’m trying to make status bar’s barStyle animated so that when I scroll I could change the barStyle type from ‘dark-content’ to ‘light-content’.

First, I made my statusBar animated:

const AnimatedStatusBar = Animated.createAnimatedComponent(StatusBar);

Second, set Animated Value:

scroll = new Animated.Value(0);

  tabY = this.nScroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT],
    outputRange: [0, 0, 1]
  });
  headerBg = this.scroll.interpolate({
    inputRange: [0, SCROLL_HEIGHT, SCROLL_HEIGHT],
    outputRange: ["black", 'white'],
    extrapolate: "clamp"
  });

Finally, change the barStyle if this.HeaderBg has changed:

<AnimatedStatusBar barStyle={this.headerBg === 'transparent'? 'dark-content' : 'light-content'} translucent={true} /> 

I feel like my code should work but it is not working as I expected.

Any idea how I could change the type of the statusBar’s barStyle when animated has changed?

By the way I am not using hooks. I want to know how to do it with class components.


Get this bounty!!!

#StackBounty: #android #react-native Android java.lang.UnsatisfiedLinkError: couldn't find DSO to load

Bounty: 300

I just set up a brand new react-native project (0.62). Running a fresh debug build works just fine.

I set up signing following the documentation: https://reactnative.dev/docs/signed-apk-android, and ensured that I’m using the following ABIs: "armeabi-v7a", "x86", "arm64-v8a", "x86_64".

To test out a release build, I run the following: npx react-native run-android --variant release

Problem

After running the above command, the app attempts to start and crashes immediately with the following stack trace:

    --------- beginning of crash
2020-05-01 09:34:26.707 19961-19976/? E/AndroidRuntime: FATAL EXCEPTION: create_react_context
    Process: <BUNDLE_ID>, PID: 19961
    java.lang.UnsatisfiedLinkError: couldn't find DSO to load: libhermes.so
        at com.facebook.soloader.SoLoader.doLoadLibraryBySoName(SoLoader.java:789)
        at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:639)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:577)
        at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:525)

Sure enough, when I unpackage the APK there is no libhermes.so in /lib/x86_64 (I am testing at the moment on pixel 2 API 28).

I’m not sure why hermes wasn’t enabled to start out with, but just to be sure I set the following in my build.grade:

project.ext.react = [
    enableHermes: true,  // clean and rebuild if changing
]

Now after cleaning and building I do see libhermes.so. Unfortunately, I am still seeing the same exact issue. But I can see that the file exists.

At this point, I’m pretty stuck. I’ve followed a number of threads reporting the same issue (for example, this). It sounds like an underlying issue with soloader has been fixed and is being used with the latest version of react native. Although I’m using the latest version of RN, I’m still seeing this issue.

Question

Not being terribly familiar with Android development, what steps might I take to investigate this issue further?


Get this bounty!!!