Jan
22
10 hours ago
Activity icon
issue

marsalan72 issue comment react-navigation/react-navigation

marsalan72
marsalan72

while switching between top bar fastly app crashed in iOS

Current behavior

Using @react-navigation/material-top-tabs app getting crashed in iOS. while switching fast between tabs.

Expected behavior

The app must work without crashing.

Reproduction

https://github.com/react-navigation/react-navigation.git

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

package version
@react-navigation/native ^6.0.2
@react-navigation/bottom-tabs ^6.0.5
@react-navigation/material-bottom-tabs ^6.0.5
@react-navigation/material-top-tabs ^6.0.4
@react-navigation/stack ^6.0.7
react-native-safe-area-context ^3.3.2
react-native-screens ^3.2.0
react-native-gesture-handler ^1.10.3
react-native-reanimated ^2.3.0-alpha.2
react-native-pager-view ^5.4.6
react-native ^0.65.1
node v14.17.5
npm or yarn 6.14.14
marsalan72
marsalan72

I am also getting the same issue in android fast speed mobile. Press bottom tab in continuously press then app crash. Any one solution cane handle this problem

Activity icon
issue

MiteshKalal7 issue comment react-navigation/react-navigation

MiteshKalal7
MiteshKalal7

Styles not applying to custom drawer background even with drawer styles

Current Behavior

  • What code are you running and what is happening? I am trying to achieve border-radius on the custom drawer content but I still get an underlying white background (see the white background on the custom drawer in the pic)
const Drawer = createDrawerNavigator<DrawerParamList>();

const styles = StyleSheet.create({
    drawerStyle: {
        backgroundColor:         "red",
        borderBottomRightRadius: 35,
        borderTopRightRadius:    35,
        width:                   90,
    },
});

export default function Navigation() {
    return (
        <NavigationContainer>
            <Drawer.Navigator
                initialRouteName="Feed"
                backBehavior="history"
                drawerType="slide"
                drawerContent={SideBar}
                drawerStyle={styles.drawerStyle}
            >
                <Drawer.Screen name="Home" component={Home} />
                <Drawer.Screen name="Feed" component={Feed} />
                <Drawer.Screen name="Twitter" component={Twitter} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

Screenshot 2020-04-12 at 16 03 55

Expected Behavior I will expect that there should be no white background after applying the border-radius which

How to reproduce To reproduce, apply border-radius and color to drawer styles, you should see the white background underneath

Your Environment

software version
iOS or Android both
@react-navigation/native ^5.1.5
@react-navigation/drawer ^5.4.1
react-native-reanimated ^1.8.0
react-native-gesture-handler ^1.6.1
react-native-safe-area-context ^0.7.3
react-native-screens ^2.4.0
react-native 0.62.2
expo Using RN init
node v10
npm or yarn yarn
MiteshKalal7
MiteshKalal7

<Drawer.Navigator screenOptions={{drawerStyle:{backgroundColor:'transparent'}}} initialRouteName={'Auth'} drawerContent={(props:DrawerContentComponentProps) => <Menu propiedades={props}/> } > <Drawer.Screen name="Auth" component={Auth} /> <Drawer.Screen name="Main" component={Main} /> </Drawer.Navigator>

screenOptions={{drawerStyle:{backgroundColor:'transparent'}}} working

Activity icon
fork

Smartial-Team forked react-navigation/react-navigation

⚡ Routing and navigation for your React Native apps
Smartial-Team Updated
fork time in 8 hours ago
Activity icon
issue

github-actions[bot] issue comment react-navigation/react-navigation

github-actions[bot]
github-actions[bot]

lag/delay when navigate to new screen

Current behavior

Here's my pushed screen:

const venue_id = route.params.venue_id; const dispatch = useDispatch();

const venue = useSelector((state) => get_venue_by_id_state(state, venue_id));

As you can see I get the venue_id from the previous screen and then, use this to get venue from redux-state. I've also tried to pass venue as route params instead of venue_id and the getting it, but nothing the same lag.

Expected behavior

The expected behaviour is that when tap on the list element it immediatly navigate to desired screen instead of lagging for half second and then navigate. This lag also allow user to tap the cell twice and so perform twice also the navigation.

Reproduction

https://github.com/react-navigation/react-navigation/issues/new/choose

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

  • [] I've removed the packages that I don't use
package version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn
github-actions[bot]
github-actions[bot]

Couldn't find version numbers for the following packages in the issue:

  • @react-navigation/native
  • @react-navigation/bottom-tabs
  • @react-navigation/drawer
  • @react-navigation/material-bottom-tabs
  • @react-navigation/material-top-tabs
  • @react-navigation/stack

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

Activity icon
issue

github-actions[bot] issue comment react-navigation/react-navigation

github-actions[bot]
github-actions[bot]

lag/delay when navigate to new screen

Current behavior

Here's my pushed screen:

const venue_id = route.params.venue_id; const dispatch = useDispatch();

const venue = useSelector((state) => get_venue_by_id_state(state, venue_id));

As you can see I get the venue_id from the previous screen and then, use this to get venue from redux-state. I've also tried to pass venue as route params instead of venue_id and the getting it, but nothing the same lag.

Expected behavior

The expected behaviour is that when tap on the list element it immediatly navigate to desired screen instead of lagging for half second and then navigate. This lag also allow user to tap the cell twice and so perform twice also the navigation.

Reproduction

https://github.com/react-navigation/react-navigation/issues/new/choose

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

  • [] I've removed the packages that I don't use
package version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn
github-actions[bot]
github-actions[bot]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

Activity icon
issue

Pietro-Putelli issue react-navigation/react-navigation

Pietro-Putelli
Pietro-Putelli

lag/delay when navigate to new screen

Current behavior

Here's my pushed screen:

const venue_id = route.params.venue_id; const dispatch = useDispatch();

const venue = useSelector((state) => get_venue_by_id_state(state, venue_id));

As you can see I get the venue_id from the previous screen and then, use this to get venue from redux-state. I've also tried to pass venue as route params instead of venue_id and the getting it, but nothing the same lag.

Expected behavior

The expected behaviour is that when tap on the list element it immediatly navigate to desired screen instead of lagging for half second and then navigate. This lag also allow user to tap the cell twice and so perform twice also the navigation.

Reproduction

https://github.com/react-navigation/react-navigation/issues/new/choose

Platform

  • Android
  • iOS
  • Web
  • Windows
  • MacOS

Packages

Environment

  • [] I've removed the packages that I don't use
package version
@react-navigation/native
@react-navigation/bottom-tabs
@react-navigation/drawer
@react-navigation/material-bottom-tabs
@react-navigation/material-top-tabs
@react-navigation/stack
@react-navigation/native-stack
react-native-safe-area-context
react-native-screens
react-native-gesture-handler
react-native-reanimated
react-native-tab-view
react-native-pager-view
react-native
expo
node
npm or yarn
Jan
21
1 day ago
Activity icon
issue

Mati36 issue comment react-navigation/react-navigation

Mati36
Mati36

Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'? app is crashing

HI I'm trying to implement the react-navigation native stack navigator with the material bottom tab navigator. I'm using v5 of react-navigation, and gone through the installation process here: https://reactnavigation.org/docs/en/next/native-stack-navigator.html

I'm getting the error: Error: Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer’? and then the app crashes.

I'm wrapping the tab navigator with: <NavigationNativeContainer>

here is my code:

const Stack = createNativeStackNavigator();

function homeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={{
          header: null,
        }}
      />
      <Stack.Screen
        name="Item"
        component={Item}
        options={{
          title: '',
          // tabBarVisible: false,
        }}
      />
    </Stack.Navigator>
  );
}

and the material tab navigator:

const Tab = createMaterialBottomTabNavigator();

const StackTabs = function StackTabs({theme}: Props) {
  return (
    <NavigationNativeContainer>
      <StatusBar
        backgroundColor={theme.colors.primary}
        barStyle="light-content"
      />
      <Tab.Navigator
        initialRouteName="Home"
        activeColor={theme.colors.primary}
        shifting={false}
        barStyle={{backgroundColor: '#fff'}}>
        <Tab.Screen
          name="Home"
          component={homeStack}
          options={{
            tabBarLabel: 'Home',
            tabBarIcon: ({color}) => (
              <Icon name="home" color={color} size={25} />
            ),
          }}
        />

      </Tab.Navigator>

    </NavigationNativeContainer>
  );
};

Any idea why is this happening

Mati36
Mati36

I solved this error by wrapping my component with {} like so

return(
    <NavigationContainer>{ <Chat/> }</NavigationContainer>
);
Previous