1280103995

1280103995

Member Since 5 years ago

Experience Points
1
follower
Lessons Completed
0
follow
Lessons Completed
119
stars
Best Reply Awards
9
repos

31 contributions in the last year

Pinned
⚡ 仿饿了么项目,react-navigation,mobx,redux
⚡ A ReclerView that supports pull-down refresh and pull-up loading can be used normally with RecyclerView. Support for adding a head view, an empty view, and a tail view.
⚡ 原生Android和iOS与 React Native 混编;Android MVP优化版应用
⚡ React Native Wrapper around Zendesk Chat v2
Activity
Nov
29
1 day ago
Activity icon
issue

1280103995 issue comment react-navigation/react-navigation

1280103995
1280103995

Unable to close transparentModal on cardOverlay press

Current behavior

Hello there, huge thanks for this library.

I've encountered an odd behaviour while using transparentModal and cardOverlay. What I'm trying to achieve is pretty simple – close modal by tapping on custom overlay, here is the code from repo that I've created to demonstrate the issue:

import * as React from 'react';
import {View, Text, Button, StyleSheet, Pressable} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen({navigation: {navigate}}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
      <Button title="Open Modal" onPress={() => navigate('Modal')} />
    </View>
  );
}

function ModalScreen() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
      }}>
      <Text>Modal Screen</Text>
    </View>
  );
}

function ModalOverlay({navigation: {goBack}}) {
  return (
    <Pressable
      // onPress will never be called 😢 
      onPress={goBack}
      style={[
        StyleSheet.absoluteFillObject,
        {backgroundColor: 'rgba(0,0,0,0.7)'},
      ]}
    />
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Group
          screenOptions={{
            presentation: 'transparentModal',
            cardOverlay: () => <ModalOverlay />,
            cardOverlayEnabled: true,
            cardStyle: {
              width: 500,
              position: 'absolute',
              top: 40,
              right: 40,
              bottom: 40,
              borderRadius: 6,
            },
          }}>
          <Stack.Screen name="Modal" component={ModalScreen} />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Here is the screen recording:

https://user-images.githubusercontent.com/85477836/141097460-6bcdd1da-dab6-41ad-ae90-c85ab103d858.mov

Expected behavior

I would expect the onPress handler to be working, so that if I tap it – the modal would close. I know that there is gestureEnabled and gestureDirection that allows to swipe-close the modal, but I'm looking for the press/tap functionality. Thanks in advance!

Reproduction

https://github.com/alex-solovev-spaceiq/react-navigation-card-overlay-issue

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native ^6.0.6
@react-navigation/stack ^6.0.11
react-native-safe-area-context ^3.3.2
react-native-screens ^3.9.0
react-native-gesture-handler ^1.10.3"
react-native 0.66.2
node 16.5.0
yarn 1.22.15
1280103995
1280103995

I don’t have any better suggestions, and I don’t know very much about transparentModal. Maybe you can consult the author.

Nov
26
4 days ago
Activity icon
issue

1280103995 issue comment wgltony/react-native-braintree-dropin-ui

1280103995
1280103995

Xcode 12.5 Support

Is there a working fork or method to be able to build in Xcode 12.5 at all?

Build error: ios/Pods/BraintreeDropIn/BraintreeDropIn/BTDropInController.m:423:67: 'topLayoutGuide' is deprecated: first deprecated in iOS 11.0 - Use view.safeAreaLayoutGuide.topAnchor instead of topLayoutGuide.bottomAnchor

1280103995
1280103995

如果有人仍然有这个问题,只需将下一行添加到您的 Podfile

pod 'BraintreeDropIn', :inhibit_warnings => true

Great! I will try it.

I am using this now and it works fine.

installer.pods_project.targets.each do |target|
     target.build_configurations.each do |config|
          if target.name == "BraintreeDropIn"
              config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
          end
    end
end
Activity icon
issue

1280103995 issue comment react-navigation/react-navigation

1280103995
1280103995

Unable to close transparentModal on cardOverlay press

Current behavior

Hello there, huge thanks for this library.

I've encountered an odd behaviour while using transparentModal and cardOverlay. What I'm trying to achieve is pretty simple – close modal by tapping on custom overlay, here is the code from repo that I've created to demonstrate the issue:

import * as React from 'react';
import {View, Text, Button, StyleSheet, Pressable} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen({navigation: {navigate}}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
      <Button title="Open Modal" onPress={() => navigate('Modal')} />
    </View>
  );
}

function ModalScreen() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
      }}>
      <Text>Modal Screen</Text>
    </View>
  );
}

function ModalOverlay({navigation: {goBack}}) {
  return (
    <Pressable
      // onPress will never be called 😢 
      onPress={goBack}
      style={[
        StyleSheet.absoluteFillObject,
        {backgroundColor: 'rgba(0,0,0,0.7)'},
      ]}
    />
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Group
          screenOptions={{
            presentation: 'transparentModal',
            cardOverlay: () => <ModalOverlay />,
            cardOverlayEnabled: true,
            cardStyle: {
              width: 500,
              position: 'absolute',
              top: 40,
              right: 40,
              bottom: 40,
              borderRadius: 6,
            },
          }}>
          <Stack.Screen name="Modal" component={ModalScreen} />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Here is the screen recording:

https://user-images.githubusercontent.com/85477836/141097460-6bcdd1da-dab6-41ad-ae90-c85ab103d858.mov

Expected behavior

I would expect the onPress handler to be working, so that if I tap it – the modal would close. I know that there is gestureEnabled and gestureDirection that allows to swipe-close the modal, but I'm looking for the press/tap functionality. Thanks in advance!

Reproduction

https://github.com/alex-solovev-spaceiq/react-navigation-card-overlay-issue

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native ^6.0.6
@react-navigation/stack ^6.0.11
react-native-safe-area-context ^3.3.2
react-native-screens ^3.9.0
react-native-gesture-handler ^1.10.3"
react-native 0.66.2
node 16.5.0
yarn 1.22.15
1280103995
1280103995

@1280103995关于如何处理此限制的任何建议?

You can take a look at this: https://github.com/colorfy-software/react-native-modalfy

Activity icon
issue

1280103995 issue comment Iterable/react-native-sdk

1280103995
1280103995

V1.1.3 bugs

Today, I tried the new version to see if some of the previous bugs have been completely fixed, and then I encountered some problems.

On iOS, the build failed, this is the log: 2021-10-29  11 06 53 The solution is to use the old version of Iterable-iOS-AppExtensions. (Note: My Xcode version is 12.5)

target 'XXXXXX' do
  pod 'Iterable-iOS-AppExtensions', '6.3.3'
end

On iOS: The content of rich push is not displayed, which is probably the reason for using the old version of Iterable-iOS-AppExtensions.

Both platforms: 1. Inapp messages cannot be received on both platforms (the old version also has the same problem, it seems to be a server problem). 2. The action to open the notification is set to Open URL: https://www.iterable.com. But only started the app.


There is one on both platforms. That is, the SDK can accurately jump to the corresponding page when processing deep links. However, there may be a delay when the navigator processes the default path. Therefore, the deep link page is displayed first, and then the home page is displayed.

Process: Receive push message --> Click on the message --> Open the app and jump to the deep link page --> Jump to the homepage

The solution I thought of is: change the urlHandler method to an asynchronous call, so that the user can figure out when to return the result.

For example:

  1. Change the function of Iterable.js on line 370 to be asynchronously called. After the change, the implementation of 1 second delay for Android at line 337 is unnecessary.
async function callUrlHandler(url, context) {
    if ((await Iterable.savedConfig.urlHandler(url, context)) == false) {
        Linking.canOpenURL(url)
            .then(canOpen => {
            if (canOpen) {
                Linking.openURL(url);
            }
        })
            .catch(reason => { console.log("could not open url: " + reason); });
    }
}
  1. User realization
config.urlHandler = async(url, context) => {
       const complete = this.appStartupComplete || await this.checkAppStartupComplete();

       //do somethings
       if (complete && url.match(/product\/([^\/]+)/i)) {
          this.navigate(match[1]);
          return true; // handled
       }

       return false;
};
1280103995
1280103995
1 20 56

Hi, @grifotv, i tried again, but the same error still occurs.

Nov
24
6 days ago
Nov
23
1 week ago
Activity icon
issue

1280103995 issue react-navigation/react-navigation

1280103995
1280103995

Navigate to a new screen, the modal background color is changed

Current behavior

Navigate to a new screen, the modal background color is changed

Expected behavior

The background color of the current screen should not be affected by the new screen.

Reproduction

https://github.com/1280103995/react-navigation-modal/tree/main

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0"
  }
Activity icon
issue

1280103995 issue comment react-navigation/react-navigation

1280103995
1280103995

Navigate to a new screen, the modal background color is changed

Current behavior

Navigate to a new screen, the modal background color is changed

Expected behavior

The background color of the current screen should not be affected by the new screen.

Reproduction

https://github.com/1280103995/react-navigation-modal/tree/main

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0"
  }
1280103995
1280103995

Temporary solution: set the next screen to presentation:'transparentModal'.

But in doing so, the UI interaction effect is not very natural.

Nov
22
1 week ago
Activity icon
issue

1280103995 issue comment react-navigation/react-navigation

1280103995
1280103995

Navigate to a new screen, the modal background color is changed

Current behavior

Navigate to a new screen, the modal background color is changed

Expected behavior

The background color of the current screen should not be affected by the new screen.

Reproduction

https://github.com/1280103995/react-navigation-modal/tree/main

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0"
  }
Activity icon
issue

1280103995 issue react-navigation/react-navigation

1280103995
1280103995

Navigate to a new screen, the modal background color is changed

Current behavior

Navigate to a new screen, the modal background color is changed

Expected behavior

The background color of the current screen should not be affected by the new screen.

Reproduction

https://github.com/1280103995/react-navigation-modal/tree/main

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"dependencies": {
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.3",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.9.0"
  }
Nov
18
1 week ago
Activity icon
fork

1280103995 forked rilyu/teaset

⚡ A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.
1280103995 MIT License Updated
fork time in 1 week ago
Nov
17
1 week ago
Activity icon
fork

1280103995 forked mohebifar/react-native-copilot

⚡ Step-by-step walkthrough for your react native app
1280103995 MIT License Updated
fork time in 1 week ago
Nov
16
2 weeks ago
Activity icon
issue

1280103995 issue comment react-navigation/react-navigation

1280103995
1280103995

Unable to close transparentModal on cardOverlay press

Current behavior

Hello there, huge thanks for this library.

I've encountered an odd behaviour while using transparentModal and cardOverlay. What I'm trying to achieve is pretty simple – close modal by tapping on custom overlay, here is the code from repo that I've created to demonstrate the issue:

import * as React from 'react';
import {View, Text, Button, StyleSheet, Pressable} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen({navigation: {navigate}}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home Screen</Text>
      <Button title="Open Modal" onPress={() => navigate('Modal')} />
    </View>
  );
}

function ModalScreen() {
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'white',
      }}>
      <Text>Modal Screen</Text>
    </View>
  );
}

function ModalOverlay({navigation: {goBack}}) {
  return (
    <Pressable
      // onPress will never be called 😢 
      onPress={goBack}
      style={[
        StyleSheet.absoluteFillObject,
        {backgroundColor: 'rgba(0,0,0,0.7)'},
      ]}
    />
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Group
          screenOptions={{
            presentation: 'transparentModal',
            cardOverlay: () => <ModalOverlay />,
            cardOverlayEnabled: true,
            cardStyle: {
              width: 500,
              position: 'absolute',
              top: 40,
              right: 40,
              bottom: 40,
              borderRadius: 6,
            },
          }}>
          <Stack.Screen name="Modal" component={ModalScreen} />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Here is the screen recording:

https://user-images.githubusercontent.com/85477836/141097460-6bcdd1da-dab6-41ad-ae90-c85ab103d858.mov

Expected behavior

I would expect the onPress handler to be working, so that if I tap it – the modal would close. I know that there is gestureEnabled and gestureDirection that allows to swipe-close the modal, but I'm looking for the press/tap functionality. Thanks in advance!

Reproduction

https://github.com/alex-solovev-spaceiq/react-navigation-card-overlay-issue

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native ^6.0.6
@react-navigation/stack ^6.0.11
react-native-safe-area-context ^3.3.2
react-native-screens ^3.9.0
react-native-gesture-handler ^1.10.3"
react-native 0.66.2
node 16.5.0
yarn 1.22.15
Nov
15
2 weeks ago
Activity icon
fork

1280103995 forked wgltony/react-native-braintree-dropin-ui

⚡ React Native integration of Braintree Drop-in for IOS & ANDROID (Apple Pay, Google Pay, Paypal, Venmo, Credit Card)
1280103995 MIT License Updated
fork time in 2 weeks ago
Nov
10
2 weeks ago
Activity icon
issue

1280103995 issue braintree/braintree-ios-drop-in

1280103995
1280103995

BUILD FAILED

Although this is an ReactNative project, this seems to be a problem with the native code.

I created a v0.66.2 RN project, added react-native-braintree-dropin-ui": "^1.1.3", and ran pod install, and then ran yarn ios, an error occurred.

But it runs successfully in xcode. ................................................................................... 4e3b-781c-4b07-9102-997523b96c89

My Xcode version: 12.5 Device: iMac mini 2018

Activity icon
issue

1280103995 issue react-navigation/react-navigation

1280103995
1280103995

When using gestures to return, the previous page will cover the current page

Current behavior

https://user-images.githubusercontent.com/17424486/137289661-39c07149-54c7-4900-8f94-d9a510a44c6f.mp4

This is the sample code:

import React from 'react';
import {Button, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Group
        screenOptions={{
          // headerShown: false,
          gestureEnabled: true,
          gestureDirection: 'horizontal',
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Group>
      <Stack.Group
        screenOptions={{
          headerShown: false,
          presentation: 'modal',
          cardStyle: {backgroundColor: 'transparent'},
          cardOverlayEnabled: true,
        }}>
        <Stack.Screen name="Modal" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
};

const HomeScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>This is HomeScreen</Text>
      <Button
        title={'Next Screen'}
        onPress={() => navigation.navigate('Profile')}
      />
      {/*<Button*/}
      {/*  title={'Open Modal'}*/}
      {/*  onPress={() => navigation.navigate('Modal')}*/}
      {/*/>*/}
    </View>
  );
};

const ProfileScreen = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>This is ProfileScreen</Text>
    </View>
  );
};

const ModalScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text
        style={{
          width: '86%',
          height: 200,
          textAlign: 'center',
          backgroundColor: 'blue',
        }}>
        This is ModalScreen
      </Text>
      <Button title={'close'} onPress={navigation.goBack} />
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default App;

Expected behavior

The previous page should be slowly pulled out behind the current page

Reproduction

The sample code is above

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.8.0"
  }
Activity icon
issue

1280103995 issue comment react-navigation/react-navigation

1280103995
1280103995

When using gestures to return, the previous page will cover the current page

Current behavior

https://user-images.githubusercontent.com/17424486/137289661-39c07149-54c7-4900-8f94-d9a510a44c6f.mp4

This is the sample code:

import React from 'react';
import {Button, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Group
        screenOptions={{
          // headerShown: false,
          gestureEnabled: true,
          gestureDirection: 'horizontal',
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Group>
      <Stack.Group
        screenOptions={{
          headerShown: false,
          presentation: 'modal',
          cardStyle: {backgroundColor: 'transparent'},
          cardOverlayEnabled: true,
        }}>
        <Stack.Screen name="Modal" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
};

const HomeScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>This is HomeScreen</Text>
      <Button
        title={'Next Screen'}
        onPress={() => navigation.navigate('Profile')}
      />
      {/*<Button*/}
      {/*  title={'Open Modal'}*/}
      {/*  onPress={() => navigation.navigate('Modal')}*/}
      {/*/>*/}
    </View>
  );
};

const ProfileScreen = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>This is ProfileScreen</Text>
    </View>
  );
};

const ModalScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text
        style={{
          width: '86%',
          height: 200,
          textAlign: 'center',
          backgroundColor: 'blue',
        }}>
        This is ModalScreen
      </Text>
      <Button title={'close'} onPress={navigation.goBack} />
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default App;

Expected behavior

The previous page should be slowly pulled out behind the current page

Reproduction

The sample code is above

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.8.0"
  }
1280103995
1280103995

Using react-native-screens: 3.9.0 works fine.

Nov
1
4 weeks ago
Activity icon
issue

1280103995 issue comment Iterable/react-native-sdk

1280103995
1280103995

V1.1.3 bugs

Today, I tried the new version to see if some of the previous bugs have been completely fixed, and then I encountered some problems.

On iOS, the build failed, this is the log: 2021-10-29  11 06 53 The solution is to use the old version of Iterable-iOS-AppExtensions. (Note: My Xcode version is 12.5)

target 'XXXXXX' do
  pod 'Iterable-iOS-AppExtensions', '6.3.3'
end

On iOS: The content of rich push is not displayed, which is probably the reason for using the old version of Iterable-iOS-AppExtensions.

Both platforms: 1. Inapp messages cannot be received on both platforms (the old version also has the same problem, it seems to be a server problem). 2. The action to open the notification is set to Open URL: https://www.iterable.com. But only started the app.


There is one on both platforms. That is, the SDK can accurately jump to the corresponding page when processing deep links. However, there may be a delay when the navigator processes the default path. Therefore, the deep link page is displayed first, and then the home page is displayed.

Process: Receive push message --> Click on the message --> Open the app and jump to the deep link page --> Jump to the homepage

The solution I thought of is: change the urlHandler method to an asynchronous call, so that the user can figure out when to return the result.

For example:

  1. Change the function of Iterable.js on line 370 to be asynchronously called. After the change, the implementation of 1 second delay for Android at line 337 is unnecessary.
async function callUrlHandler(url, context) {
    if ((await Iterable.savedConfig.urlHandler(url, context)) == false) {
        Linking.canOpenURL(url)
            .then(canOpen => {
            if (canOpen) {
                Linking.openURL(url);
            }
        })
            .catch(reason => { console.log("could not open url: " + reason); });
    }
}
  1. User realization
config.urlHandler = async(url, context) => {
       const complete = this.appStartupComplete || await this.checkAppStartupComplete();

       //do somethings
       if (complete && url.match(/product\/([^\/]+)/i)) {
          this.navigate(match[1]);
          return true; // handled
       }

       return false;
};
1280103995
1280103995

I retested version 1.1.3 and updated the problem description.

Activity icon
issue

1280103995 issue comment Iterable/react-native-sdk

1280103995
1280103995

V1.1.3 bugs

Today, I tried the new version to see if some of the previous bugs have been completely fixed, and then I encountered some problems.

On iOS, the build failed, this is the log: 2021-10-29  11 06 53 The solution is to use the old version of Iterable-iOS-AppExtensions. (Note: My Xcode version is 12.5)

target 'XXXXXX' do
  pod 'Iterable-iOS-AppExtensions', '6.3.3'
end

On iOS: The content of rich push is not displayed, which is probably the reason for using the old version of Iterable-iOS-AppExtensions.

Both platforms:

  1. Inapp messages cannot be received on both platforms (the old version also has the same problem, it seems to be a server problem).
  2. The action to open the notification is set to Open URL: https://www.iterable.com. But only started the app.

There is a small problem on Android. That is, the SDK can accurately jump to the corresponding page when processing deep links. However, there may be a delay when the navigator processes the default path. As a result, the deep link page is displayed first, and then the home page is displayed.

Process: Receive push message --> Click on the message --> Open the app and jump to the deep link page --> Jump to the homepage

The solution I thought of is: change the urlHandler method to an asynchronous call, so that the user can figure out when to return the result.

for example:

config.urlHandler = async(url, context) => {
       const complete = this.appStartupComplete || await this.checkAppStartupComplete();
      //do somethings
       return false;
};
1280103995
1280103995

Hi @1280103995, thanks for trying out the new version and giving us feedback.

The solution is to use the old version of extension. (Note: My Xcode version is 12.5)

Will check on this one. 👍

in-app messages cannot be received on both platforms (the old version also has the same problem, it seems to be a server problem).

In Apps never had a problem in my tests; even in previous versions. Can you specify what device model and Android/iOS versions you are using? Also, is the Firebase and APNS settings configured properly? And also, is/are there other libraries relying on Firebase?

The solution I thought of is: change the urlHandler method to an asynchronous call, so that the user can figure out when to return the result.

That is a great idea. 👍

I went back to the 1.1.0 version (this is the version my app is using, and it is already in production), but found that the in-app messages are also not being received.

The physical devices are: Samsung Galaxy A51 (Android 11), iPhone Xr (iOS 15.0.2, the same problem on iOS14). 062d4257-78d9-48b7-832f-74266fa1f289

The configurations of Firebase and APNS are correct, and both can receive remote pushes, but on iOS, there is no "view" and "custom button" in the notification options, so you can't view rich push content.

I don't know what caused it, and it is still under investigation.

Oct
29
1 month ago
Activity icon
issue

1280103995 issue comment Iterable/react-native-sdk

1280103995
1280103995

V1.1.3 bugs

Today, I tried the new version to see if some of the previous bugs have been completely fixed, and then I encountered some problems.

On iOS, the build failed, this is the log: 2021-10-29  11 06 53 The solution is to use the old version of Iterable-iOS-AppExtensions. (Note: My Xcode version is 12.5)

target 'XXXXXX' do
  pod 'Iterable-iOS-AppExtensions', '6.3.3'
end

On iOS: The content of rich push is not displayed, which is probably the reason for using the old version of Iterable-iOS-AppExtensions.

Both platforms:

  1. Inapp messages cannot be received on both platforms (the old version also has the same problem, it seems to be a server problem).
  2. The action to open the notification is set to Open URL: https://www.iterable.com. But only started the app.

There is a small problem on Android. That is, the SDK can accurately jump to the corresponding page when processing deep links. However, there may be a delay when the navigator processes the default path. As a result, the deep link page is displayed first, and then the home page is displayed.

Process: Receive push message --> Click on the message --> Open the app and jump to the deep link page --> Jump to the homepage

The solution I thought of is: change the urlHandler method to an asynchronous call, so that the user can figure out when to return the result.

for example:

config.urlHandler = async(url, context) => {
       const complete = this.appStartupComplete || await this.checkAppStartupComplete();
      //do somethings
       return false;
};
1280103995
1280103995

I will go back to the old version, these tests took me a long time.

Activity icon
issue

1280103995 issue Iterable/react-native-sdk

1280103995
1280103995

V1.1.3 bugs

Today, I tried the new version to see if some of the previous bugs have been completely fixed, and then I encountered some problems.

On iOS, the build failed, this is the log: 2021-10-29  11 06 53

On Android, can’t receive the in-app messages.

There is another problem, I think it should exist on both platforms. That is, when iterable processes deep links, it jumps to the corresponding page accurately. However, there may be a delay when the navigator processes the default path. As a result, the deep links page is displayed first, and then the home page is displayed.

Process: Receive push message --> Click on the message --> Open the app and jump to the deep link page --> Jump to the homepage

The solution I thought of is: change the urlHandler method to an asynchronous call, so that the user can figure out when to return the result.

for example:

config.urlHandler = async(url, context) => {
       const complete = this.appStartupComplete || await this.checkAppStartupComplete();
      //do somethings
       return false;
};
Oct
20
1 month ago
Activity icon
issue

1280103995 issue comment wgltony/react-native-braintree-dropin-ui

1280103995
1280103995

Xcode 12.5 Support

Is there a working fork or method to be able to build in Xcode 12.5 at all?

Build error: ios/Pods/BraintreeDropIn/BraintreeDropIn/BTDropInController.m:423:67: 'topLayoutGuide' is deprecated: first deprecated in iOS 11.0 - Use view.safeAreaLayoutGuide.topAnchor instead of topLayoutGuide.bottomAnchor

1280103995
1280103995

@1280103995 Sure. This is what my pod_install statement looks like, at the bottom of ios/Podfile:

post_install do |installer|

  flipper_post_install(installer)

  installer.pods_project.targets.each do |target|
    targets_to_ignore = %w(React yoga)
    if targets_to_ignore.include? target.name
        target.remove_from_project
    end
    target.build_configurations.each do |config|
        if target.name == "BraintreeDropIn"
            #  Do nothing because BraintreeDropIn has a bug and requires lower target OS.
            #  This condition should be removed after a future update that fixes this.
        else
            #  This removes any Pod specific deployment target to ensure the project target is used.
            config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
        end
    end
  end

end

The relevant part is in the target.build_configurations.each loop:

  • if target.name is "BraintreeDropIn", do nothing (keep the Pod's target setting)
  • else delete the IPHONEOS_DEPLOYMENT_TARGET setting to make sure all Pods use the project target

Note that your Podfile might have some different logic so you might have to do this differently. Hope this helps!

Hello, @LaVielle ! I tried it again today and it worked. I did this: delete the Pods folder and Podfile.lock file in the ios folder, and execute pod install. Then execute Clean build folder in Xcode and rebuild. :)

Oct
18
1 month ago
Activity icon
issue

1280103995 issue comment wgltony/react-native-braintree-dropin-ui

1280103995
1280103995

Xcode 12.5 Support

Is there a working fork or method to be able to build in Xcode 12.5 at all?

Build error: ios/Pods/BraintreeDropIn/BraintreeDropIn/BTDropInController.m:423:67: 'topLayoutGuide' is deprecated: first deprecated in iOS 11.0 - Use view.safeAreaLayoutGuide.topAnchor instead of topLayoutGuide.bottomAnchor

1280103995
1280103995

@1280103995 Sure. This is what my pod_install statement looks like, at the bottom of ios/Podfile:

post_install do |installer|

  flipper_post_install(installer)

  installer.pods_project.targets.each do |target|
    targets_to_ignore = %w(React yoga)
    if targets_to_ignore.include? target.name
        target.remove_from_project
    end
    target.build_configurations.each do |config|
        if target.name == "BraintreeDropIn"
            #  Do nothing because BraintreeDropIn has a bug and requires lower target OS.
            #  This condition should be removed after a future update that fixes this.
        else
            #  This removes any Pod specific deployment target to ensure the project target is used.
            config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
        end
    end
  end

end

The relevant part is in the target.build_configurations.each loop:

  • if target.name is "BraintreeDropIn", do nothing (keep the Pod's target setting)
  • else delete the IPHONEOS_DEPLOYMENT_TARGET setting to make sure all Pods use the project target

Note that your Podfile might have some different logic so you might have to do this differently. Hope this helps!

I was unlucky. After many builds, I still encountered the same error (no error was reported once). But thank you for the code.

Activity icon
issue

1280103995 issue comment wgltony/react-native-braintree-dropin-ui

1280103995
1280103995

Xcode 12.5 Support

Is there a working fork or method to be able to build in Xcode 12.5 at all?

Build error: ios/Pods/BraintreeDropIn/BraintreeDropIn/BTDropInController.m:423:67: 'topLayoutGuide' is deprecated: first deprecated in iOS 11.0 - Use view.safeAreaLayoutGuide.topAnchor instead of topLayoutGuide.bottomAnchor

1280103995
1280103995

@1280103995 Sure. This is what my pod_install statement looks like, at the bottom of ios/Podfile:

post_install do |installer|

  flipper_post_install(installer)

  installer.pods_project.targets.each do |target|
    targets_to_ignore = %w(React yoga)
    if targets_to_ignore.include? target.name
        target.remove_from_project
    end
    target.build_configurations.each do |config|
        if target.name == "BraintreeDropIn"
            #  Do nothing because BraintreeDropIn has a bug and requires lower target OS.
            #  This condition should be removed after a future update that fixes this.
        else
            #  This removes any Pod specific deployment target to ensure the project target is used.
            config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
        end
    end
  end

end

The relevant part is in the target.build_configurations.each loop:

  • if target.name is "BraintreeDropIn", do nothing (keep the Pod's target setting)
  • else delete the IPHONEOS_DEPLOYMENT_TARGET setting to make sure all Pods use the project target

Note that your Podfile might have some different logic so you might have to do this differently. Hope this helps!

Thanks, I added your code, deleted the Pods folder, and re-pod install, it worked.

Activity icon
issue

1280103995 issue comment wgltony/react-native-braintree-dropin-ui

1280103995
1280103995

Xcode 12.5 Support

Is there a working fork or method to be able to build in Xcode 12.5 at all?

Build error: ios/Pods/BraintreeDropIn/BraintreeDropIn/BTDropInController.m:423:67: 'topLayoutGuide' is deprecated: first deprecated in iOS 11.0 - Use view.safeAreaLayoutGuide.topAnchor instead of topLayoutGuide.bottomAnchor

1280103995
1280103995

@1280103995当然。这就是我的pod_install声明的样子,在底部ios/Podfile

post_install do |installer|

  flipper_post_install(installer)

  installer.pods_project.targets.each do |target|
    targets_to_ignore = %w(React yoga)
    if targets_to_ignore.include? target.name
        target.remove_from_project
    end
    target.build_configurations.each do |config|
        if target.name == "BraintreeDropIn"
            #  Do nothing because BraintreeDropIn has a bug and requires lower target OS.
            #  This condition should be removed after a future update that fixes this.
        else
            #  This removes any Pod specific deployment target to ensure the project target is used.
            config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
        end
    end
  end

end

相关部分在target.build_configurations.each循环中:

  • 如果 target.name 是“BraintreeDropIn”,什么都不做(保持 Pod 的目标设置)
  • 否则删除IPHONEOS_DEPLOYMENT_TARGET设置以确保所有 Pod 都使用项目目标

请注意,您的 Podfile 可能有一些不同的逻辑,因此您可能必须以不同的方式执行此操作。希望这可以帮助!

I have no good luck, the problem still exists. But thank you for the code.

This is my code:

source 'https://github.com/CocoaPods/Specs.git'
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'

target 'XXXApp' do
  pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [
    'TextDetector'
  ]

  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera/Permission-Camera.podspec"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary/Permission-PhotoLibrary.podspec"

  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false
  )

  # target 'XXXAppTests' do
    # inherit! :complete
    # Pods for testing
  # end

  # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable these next few lines.
    use_flipper!()

    post_install do |installer|
      react_native_post_install(installer)
      __apply_Xcode_12_5_M1_post_install_workaround(installer)

      # https://github.com/wgltony/react-native-braintree-dropin-ui/issues/71
      installer.pods_project.targets.each do |target|
          targets_to_ignore = %w(React yoga)
          if targets_to_ignore.include? target.name
              target.remove_from_project
          end
          target.build_configurations.each do |config|
              if target.name == "BraintreeDropIn"
                  #  Do nothing because BraintreeDropIn has a bug and requires lower target OS.
                  #  This condition should be removed after a future update that fixes this.
              else
                  #  This removes any Pod specific deployment target to ensure the project target is used.
                  config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'
              end
          end
        end
    end
end
Oct
14
1 month ago
Activity icon
issue

1280103995 issue comment react-navigation/react-navigation

1280103995
1280103995

Screens in stack below current screen respond to touches

Current Behavior

Screens in stack below current screen respond to touches.

As seen in a video, I have a menu with different methods of authentication. After navigating to email/password registration screen, I am still able to press touchables below my new screen, causing other screens to open.

EDIT: These are react-native-gesture-handler touchables. Touchables from react-native work as expected. EDIT2: While reproducing I found out that issue only appears while using custom cardStyleInterpolator as shown in snack.

Right now I'm using navigation.isFocused() as a workaround.

touchable_issue

Reproduction https://snack.expo.io/@zabarobot/85c2b3

Expected Behavior

Only visible screen should respond to touches.

Your Environment

software version
Android 9, 10
@react-navigation/native 5.5.1
@react-navigation/stack 5.5.1
react-native-gesture-handler 1.6.1
react-native-safe-area-context 0.7.3
react-native-screens 2.9.0
react-native 0.62.0
expo not using
node v8.16.0
npm or yarn 6.4.1
1280103995
1280103995
Activity icon
issue

1280103995 issue react-navigation/react-navigation

1280103995
1280103995

When using gestures to return, the previous page will cover the current page

Current behavior

https://user-images.githubusercontent.com/17424486/137289661-39c07149-54c7-4900-8f94-d9a510a44c6f.mp4

import React from 'react';
import {Button, Text, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
  CardStyleInterpolators,
  createStackNavigator,
} from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Group
        screenOptions={{
          // headerShown: false,
          gestureEnabled: true,
          gestureDirection: 'horizontal',
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Group>
      <Stack.Group
        screenOptions={{
          headerShown: false,
          presentation: 'modal',
          cardStyle: {backgroundColor: 'transparent'},
          cardOverlayEnabled: true,
        }}>
        <Stack.Screen name="Modal" component={ModalScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
};

const HomeScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>This is HomeScreen</Text>
      <Button
        title={'Next Screen'}
        onPress={() => navigation.navigate('Profile')}
      />
      {/*<Button*/}
      {/*  title={'Open Modal'}*/}
      {/*  onPress={() => navigation.navigate('Modal')}*/}
      {/*/>*/}
    </View>
  );
};

const ProfileScreen = () => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>This is ProfileScreen</Text>
    </View>
  );
};

const ModalScreen = ({navigation}) => {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text
        style={{
          width: '86%',
          height: 200,
          textAlign: 'center',
          backgroundColor: 'blue',
        }}>
        This is ModalScreen
      </Text>
      <Button title={'close'} onPress={navigation.goBack} />
    </View>
  );
};

const App = () => {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
};

export default App;

Expected behavior

The previous page should be slowly pulled out behind the current page

Reproduction

The sample code is above

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

"dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "react": "17.0.2",
    "react-native": "0.66.0",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.8.0"
  }
Previous