1280103995

1280103995

Member Since 5 years ago

Experience Points
1
follower
Lessons Completed
0
follow
Lessons Completed
120
stars
Best Reply Awards
6
repos

22 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优化版应用
⚡ Step-by-step walkthrough for your react native app
⚡ Components to control your app status and navigation bars.
Activity
Dec
10
1 month ago
Activity icon
issue

1280103995 issue facebook/react-native

1280103995
1280103995

On Android, after changing the navigation bar type, the keyboard height is wrong?

Description

  1. Under the gesture navigation, the keyboard information obtained is:
{ 
   width: 411.4285583496094,
   screenX: 0,
   screenY: 540.5714111328125,
   height: 325.3333435058594 
}

In this mode, the height of the navigation bar is calculated to be 15.238095783052017.


  1. After changing to button navigation, the information obtained is:
{ 
   width: 411.4285583496094,
   screenX: 0,
   screenY: 540.5714111328125,
   height: 292.19049072265625
}

In this mode, the height of the navigation bar is calculated to be 48.38095292590913.

The height: 325.3333435058594 does it include the height of the navigation bar? If included, the real keyboard height is 325.3333435058594 - 15.238095783052017. For the second part, the real keyboard height is 292.19049072265625 - 48.38095292590913.

The two calculation results are not equal. But in these two cases, their screenY values are the same.

So, the conclusion is that the keyboard height is wrong, am I right?

Device: Samsung Galaxy A51 (Android 11)

Version

0.66.3

Output of react-native info

System:
    OS: macOS 11.5.2
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 401.35 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.4.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. In the gesture navigation mode, let the Textinput get the focus. (You can see that Textinput is just at the top of the keyboard)
  2. Go to the phone settings and switch the navigation bar type to button navigation.
  3. Restart the app and let Textinput get the focus. (You can see that the keyboard will cover the Textinput)

Snack, code example, screenshot, or link to a repository

Demo: https://github.com/1280103995/react-native-keyboard-debug/tree/main

Activity icon
issue

1280103995 issue comment facebook/react-native

1280103995
1280103995

On Android, after changing the navigation bar type, the keyboard height is wrong?

Description

  1. Under the gesture navigation, the keyboard information obtained is:
{ 
   width: 411.4285583496094,
   screenX: 0,
   screenY: 540.5714111328125,
   height: 325.3333435058594 
}

In this mode, the height of the navigation bar is calculated to be 15.238095783052017.


  1. After changing to button navigation, the information obtained is:
{ 
   width: 411.4285583496094,
   screenX: 0,
   screenY: 540.5714111328125,
   height: 292.19049072265625
}

In this mode, the height of the navigation bar is calculated to be 48.38095292590913.

The height: 325.3333435058594 does it include the height of the navigation bar? If included, the real keyboard height is 325.3333435058594 - 15.238095783052017. For the second part, the real keyboard height is 292.19049072265625 - 48.38095292590913.

The two calculation results are not equal. But in these two cases, their screenY values are the same.

So, the conclusion is that the keyboard height is wrong, am I right?

Device: Samsung Galaxy A51 (Android 11)

Version

0.66.3

Output of react-native info

System:
    OS: macOS 11.5.2
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 401.35 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.4.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. In the gesture navigation mode, let the Textinput get the focus. (You can see that Textinput is just at the top of the keyboard)
  2. Go to the phone settings and switch the navigation bar type to button navigation.
  3. Restart the app and let Textinput get the focus. (You can see that the keyboard will cover the Textinput)

Snack, code example, screenshot, or link to a repository

Demo: https://github.com/1280103995/react-native-keyboard-debug/tree/main

1280103995
1280103995

This is a full screen, so the StatusBar and NavigationBar still have a height.

Then, keyboardHeight should be: frames.endCoordinates.height + getNavHeight().

Therefore, the moving distance of Textinput should be: keyboardHeight + StatusBar.currentHeight, so that it will not be covered by the keyboard.

Dec
9
1 month ago
Activity icon
issue

1280103995 issue facebook/react-native

1280103995
1280103995

On Android, after changing the navigation bar type, the keyboard height is wrong?

Description

  1. Under the gesture navigation, the keyboard information obtained is:
{ 
   width: 411.4285583496094,
   screenX: 0,
   screenY: 540.5714111328125,
   height: 325.3333435058594 
}

In this mode, the height of the navigation bar is calculated to be 15.238095783052017.


  1. After changing to button navigation, the information obtained is:
{ 
   width: 411.4285583496094,
   screenX: 0,
   screenY: 540.5714111328125,
   height: 292.19049072265625
}

In this mode, the height of the navigation bar is calculated to be 48.38095292590913.

The height: 325.3333435058594 does it include the height of the navigation bar? If included, the real keyboard height is 325.3333435058594 - 15.238095783052017. For the second part, the real keyboard height is 292.19049072265625 - 48.38095292590913.

The two calculation results are not equal. But in these two cases, their screenY values are the same.

So, the conclusion is that the keyboard height is wrong, am I right?

Device: Samsung Galaxy A51 (Android 11)

Version

0.66.3

Output of react-native info

System:
    OS: macOS 11.5.2
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 401.35 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.4.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. Run react-native init MyApp to get a 0.66.3 version RN project.
  2. Monitor keyboard:
Keyboard.addListener('keyboardDidShow', frames => {
    console.log('KeyboardLayoutInfo', frames.endCoordinates);
});

Snack, code example, screenshot, or link to a repository

Demo: https://github.com/1280103995/react-native-keyboard-debug/tree/main

Dec
8
1 month ago
Activity icon
issue

1280103995 issue comment zoontek/react-native-bars

1280103995
1280103995

On Android, when I open the app for the second time, the barStyle setting is invalid

Bug summary

In order to cooperate with the library react-native-bootsplash, a dark style is set in MainActivity: RNBars.init(MainActivity.this, "dark-content"); (this is no problem).

Then set the default light-content in App.tsx. After exiting the app, restart the app and you will see that the status bar style has changed to dark-content.

Library version

1.0.4

Environment info

System:
    OS: macOS 11.5.2
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 62.12 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.4.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.3 => 0.66.3 
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1.Modify App.tsx in the example: Change const [isLightStatus, setIsLightStatus] = React.useState(false); to const [isLightStatus, setIsLightStatus] = React.useState(true);.

2.Exit the app, restart the app. (Click the virtual back button, the app is still on the recently used app screen)

Reproducible sample code

I used your sample project to debug, so you only need to modify the code according to the reproduction steps.
1280103995
1280103995

I guess the problem is here in StatusBar.tsx:

if (
      lastEntry != null &&
      // Update only if style have changed.
      (!oldProps || oldProps.barStyle !== lastEntry.barStyle)
) {

When I changed to: if (oldProps?.barStyle !== lastEntry.barStyle), this problem can be solved.

I found a new problem. Set light-content and dark-content on the two pages in BottomTabNavigator (react-navigation) respectively. After switching tabs back and forth, the status bar color will remain one color.

Activity icon
issue

1280103995 issue zoontek/react-native-bars

1280103995
1280103995

On Android, the height of the navigation bar does not change after switching the navigation type.

Bug summary

In the phone settings, after switching the button navigation to the sliding gesture navigation, the height obtained through NavigationBar.currentHeight is still the previous value.

Reading NavigationBar.tsx can see static currentHeight = NativeModule?.navigationBarHeight;, here a fixed value is returned.

In the StatusBar.js source code:

static currentHeight: ?number =
     Platform.OS ==='android'
       ? NativeStatusBarManagerAndroid.getConstants().HEIGHT
       : null;

In the NativeStatusBarManagerAndroid.js source code:

getConstants(): {|
    +HEIGHT: number,
    +DEFAULT_BACKGROUND_COLOR?: number,
  |} {
    if (constants == null) {
      constants = NativeModule.getConstants();
    }
    return constants;
  },

I am not familiar with flow and typescript, and I cannot push a PR:disappointed:. Can we learn from this approach?

Device: Samsung Galaxy A51 (Android 11)

Library version

1.0.4

Environment info

System:
    OS: macOS 11.5.2
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 110.27 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.4.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: Not Found
    react-native: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

  1. In the phone settings, change the button navigation to gesture navigation.
  2. In App.tsx, call NavigationBar.currentHeight.

Reproducible sample code

I just run the example project in the repository.
Dec
7
1 month ago
Activity icon
issue

1280103995 issue comment zoontek/react-native-bars

1280103995
1280103995

On Android, when I open the app for the second time, the barStyle setting is invalid

Bug summary

In order to cooperate with the library react-native-bootsplash, a dark style is set in MainActivity: RNBars.init(MainActivity.this, "dark-content"); (this is no problem).

Then set the default light-content in App.tsx. After exiting the app, restart the app and you will see that the status bar style has changed to dark-content.

Library version

1.0.4

Environment info

System:
    OS: macOS 11.5.2
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 62.12 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.4.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.3 => 0.66.3 
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1.Modify App.tsx in the example: Change const [isLightStatus, setIsLightStatus] = React.useState(false); to const [isLightStatus, setIsLightStatus] = React.useState(true);.

2.Exit the app, restart the app. (Click the virtual back button, the app is still on the recently used app screen)

Reproducible sample code

I used your sample project to debug, so you only need to modify the code according to the reproduction steps.
1280103995
1280103995

@1280103995 Can you publish all your styles.xml? Give more info about how you tested it? (device, android version)

I cloned your repository and only modified the content of App.txs in the example, so you can read the source code for the content of style.xml.

My device is: Samsung Galaxy A51 (Android 11)

style.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Allow drawing under the system bars background -->
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:fitsSystemWindows">false</item>

        <!-- Set status bar background transparent -->
        <item name="android:statusBarColor">@android:color/transparent</item>

        <!-- Navigation bar will stay translucent on Android < 8.1 -->
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

styles-v27.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <!-- Allow drawing under the system bars background -->
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:fitsSystemWindows">false</item>

        <!-- Set system bars background transparent -->
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>

        <!-- Disable auto contrasted system bars background (on Android 10+) -->
        <item name="android:enforceStatusBarContrast" tools:targetApi="q">false</item>
        <item name="android:enforceNavigationBarContrast" tools:targetApi="q">false</item>
    </style>
</resources>
Dec
6
1 month ago
Activity icon
issue

1280103995 issue zoontek/react-native-bars

1280103995
1280103995

On Android, when I open the app for the second time, the barStyle setting is invalid

Bug summary

In order to cooperate with the library react-native-bootsplash, a dark style is set in MainActivity: RNBars.init(MainActivity.this, "dark-content"); (this is no problem).

Then set the default light-content in App.tsx. After exiting the app, restart the app and you will see that the status bar style has changed to dark-content.

Library version

1.0.4

Environment info

System:
    OS: macOS 11.5.2
    CPU: (6) x64 Intel(R) Core(TM) i5-8500B CPU @ 3.00GHz
    Memory: 62.12 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.4.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.0.15 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.2 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7486908
    Xcode: 12.5/12E262 - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.8 - /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.66.3 => 0.66.3 
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1.Modify App.tsx in the example: Change const [isLightStatus, setIsLightStatus] = React.useState(false); to const [isLightStatus, setIsLightStatus] = React.useState(true);.

2.Exit the app, restart the app. (Click the virtual back button, the app is still on the recently used app screen)

Reproducible sample code

I used your sample project to debug, so you only need to modify the code according to the reproduction steps.
Dec
1
1 month ago
Activity icon
fork

1280103995 forked razorRun/react-native-vlc-media-player

⚡ React native media player for video streaming and playing. Supports RTSP, RTMP and other protocols supported by VLC player
1280103995 MIT License Updated
fork time in 1 month ago
Nov
30
1 month ago
Activity icon
issue

1280103995 issue comment react-navigation/react-navigation

1280103995
1280103995

Keyboard hide and show after going back

Current Behavior

What code are you running and what is happening?

When you navigate back, the keyboard hides and shows (see screen recording below).

The bug does not happen if using:

  • animationEnabled: false or
  • gestureEnabled: false.

The bug happens if using:

  • TransitionPresets.ModalSlideFromBottomIOS or TransitionPresets.ModalPresentationIOS
  • animationEnabled: true or/and gestureEnabled: true

To see the code, open the snack, it's just 3 files

  • Include a screenshot or video if it makes sense.

https://user-images.githubusercontent.com/39778068/103159087-f32d3680-47a3-11eb-8460-c9daedeeea3c.mp4

Expected Behavior

What do you expect should be happening?

The keyboard should be dismissed only once, or not showed if it is already hidden.

How to reproduce

Run the snack on your android device

Environment

software version
Android 11
@react-navigation/native ^5.8.10
@react-navigation/stack ^5.12.8
react-native-gesture-handler ~1.8.0
react-native-safe-area-context 3.1.9
react-native-screens ~2.15.0
react-native 0.63
expo 40
node
npm or yarn
1280103995
1280103995
Nov
29
1 month 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
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

如果有人仍然有这个问题,只需将下一行添加到您的 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
2 months ago
Nov
23
2 months 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
2 months 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"
  }